My Custom Component, a Simple Counter, Has a Small Style Error. Despite Trying Multiple Solutions, I Couldn't Figure Out the Problem. Can Someone Please Tell Me What's Wrong and How to Fix It?
I Have Added 3 Touchable Opacity Components with Flex: 1. The Issue Arises When I Apply a Background Color to the Parent Container, Changing the Area That Should Fill. I Want All Objects' Backgrounds to Be Equal.
import React, { Component } from "react";
import { StyleSheet, View, Text, ViewPropTypes} from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import PropTypes from "prop-types";
class Counter extends Component{
constructor(props){
super(props);
this.style = StyleSheet.create({
topContainer:{
flex:1,
width:"100%",
flexDirection:"column",
alignItems:"center",
justifyContent:"center"
},
topPanel:{
flex:1,
flexDirection:"row",
alignItems:"center",
justifyContent:"center",
width:"100%",
},
bottomPane:{
flex:1,
flexDirection:"row",
width:"100%",
alignItems:"center",
justifyContent:"center",
},
buttonStyle:{
flex:1,
alignItems:"center",
justifyContent:"center",
},
});
}
static propTypes = {
backgroundStyle : ViewPropTypes.style,
textStyle: Text.propTypes.style,
buttonBackground: ViewPropTypes.style,
returnFunc: PropTypes.func,
};
/*
this.props =
{"buttonBackground":{"backgroundColor":"#cc99ff","borderRadius":20,"margin":4},
"backgroundStyle":{"backgroundColor":"#cc99ff","borderRadius":20,"margin":4},
"textStyle":{"fontSize":25.919999999999995,"textAlign":"center","color":"#ffffff"}}
*/
render(){
console.log("Counter:56 " , JSON.stringify(this.props));
return(
<View style={this.style.topContainer}>
<View style={[this.style.topPanel,this.props.backgroundStyle]}>
<Text style={this.props.textStyle}>2</Text>
</View>
<View style={this.style.bottomPane}>
<TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}>
<Text style={this.props.textStyle}>Increment</Text>
</TouchableOpacity>
<TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}>
<Text style={this.props.textStyle}>Decrement</Text>
</TouchableOpacity>
<TouchableOpacity style={[this.style.buttonStyle,this.props.buttonBackground]}>
<Text style={this.props.textStyle}>Save</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default Counter;
This Is the Full Code for My Counter Component, all Styled with Flex Properties. Need help understanding why it's behaving this way.
Thank you for any assistance provided.