CODEWITHSUNDEEP
reactjsreact-native
ARMATAV
ARMATAV

Reputation: 634

Using state to hide/reveal view

I'd like to hide the 'Done' button on my react-native-navbar based on state

this.state = {
    doneButtonHidden: true
}

My state has it set to true

doneButtonHidden(hidden) {
    if (!hidden) {
        return {
            title: 'Done',
            tintColor: '#ff9000'
        }
    }
}

However, if I switch the value of doneButtonHidden and hot reload, it stays hidden and does not update

<NavigationBar
    title={{title: 'Friends', tintColor: '#ff9000'}}
    rightButton={this.doneButtonHidden(this.state.doneButtonHidden)}
/>

What am I doing wrong?

Upvotes: 0

Views: 43

Answers (1)

Adam Patterson
Adam Patterson

Reputation: 958

Two things:
-You need to use setState() when changing state.
See this: https://facebook.github.io/react-native/docs/state.html
- When you say this.state.doneButtonHidden, this refers to the current object, and is not lexical.
I would do something like: 

render(){
  // This way you can pass a boolean into
  // the doneButtonHidden function.
  let hidden = this.state.doneButtonHidden ? true : false;
  return(
    ... more stuff here ...
    <NavigationBar
      title={{title: 'Friends', tintColor: '#ff9000'}}
      // If use you use arrow function syntax, you have access
      // to lexical this.
      rightButton={() => {
              // If 'rightButton' is supposed to change
              // state use this line.
              this.setState({doneButtonHidden: false})
              doneButtonHidden(hidden)} 
          }
    />
    ... more stuff here ...
  );
}

Upvotes: 1

Related Questions