Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

warning failed prop type: invalid prop backgroundColor supplied to View : this.state.buttoncolor #31

Open
jingfreeks opened this issue Nov 1, 2017 · 1 comment
Open

warning failed prop type: invalid prop backgroundColor supplied to View : this.state.buttoncolor #31

jingfreeks opened this issue Nov 1, 2017 · 1 comment

Comments

@jingfreeks
Copy link

jingfreeks commented Nov 1, 2017 •
edited by Definitely-Not-Vlad
Loading

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>
    );
  }
}
@Definitely-Not-Vlad
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jingfreeks @Definitely-Not-Vlad