theme
theme copied to clipboard
Published
20 hours ago •
shoutem
shoutem
warning failed prop type: invalid prop backgroundColor supplied to View : this.state.buttoncolor
I got an issue here, Hope you can help me in this situation here is my code.
const routes = [
{
value:"Daily Time Record",
datavalue:"Home",
buttoncolors:"this.state.buttoncolor"
},
{
value:"Personal Info",
datavalue: "EmployeePersonalInfo",
buttoncolors:"this.state.buttoncolor1"
},
{
value:"Employment Info",
datavalue: "EmploymentInfo",
buttoncolors:"this.state.buttoncolor2"
}
];
export default class SideBar extends React.Component {
constructor(props){
super(props);
this.state={
buttoncolor:'white',
buttoncolor1:'gray',
buttoncolor1:'blue'
};
}
render() {
return (
<View style={{
width:300,
height:540,
backgroundColor:'#212223'
}}>
<Header style={{
height:100,
backgroundColor:'#212223',
justifyContent:'flex-start',
alignItems:'center',
borderBottomWidth:1,
borderBottomColor:'black',
}}>
<Title>Juan De la cruz</Title>
</Header>
<View style={{width:300,height:165}}>
<List style={{marginLeft:-17}}
dataArray={routes}
renderRow={data => {
return (
<ListItem style={{
backgroundColor:'#212223',
borderColor:'black',
borderBottomWidth:1
}}
button style={{backgroundColor:data.buttoncolors}}
onPress={() => this.props.navigation.navigate(data.datavalue)}
>
<Body>
<Text style={{color:'white'}}>{data.value}</Text>
</Body>
<Right>
<Icon name="ios-arrow-forward" />
</Right>
</ListItem>
);
}}
<List />
</View>
</View>
);
}
}
First thing to note is that your formatting greatly impedes your own and anyone else's ability to read the code, I would suggest keeping it cleaner. For the sake of this issue I've cleaned up your code to be able to see what the issue at hand is. Take it as constructive criticism.
button style={{backgroundColor:data.buttoncolors}}
I'm not sure this does what you want it to do. You're passing a boolean prop called button and a second style prop. This may be your issue.
