CODEWITHSUNDEEP
reactjsreact-nativenavigationstack-navigator
Nomura Nori
Nomura Nori

Reputation: 5187

How to use status variable in navigation item in React Native

I would like to show/hide navigation item according to state changes in react native app. This is what I have done.

static navigationOptions = ({ navigation }) => {    
    return {
      headerLeft: <Button this.state.showSaveBtn && title='Save'/>
    }
  }
...
validateForm () {
    if (validate()){
       this.setState({showSaveBtn: true});
    } else {
       this.setState({showSaveBtn: false});
    }
}

But it can't be run because 'this' don't refer current component. I have just shown how I would like to do. What the important is to control navigation item with state variable.

Thank you.

Upvotes: 0

Views: 349

Answers (2)

BLDD
BLDD

Reputation: 513

You need to set the navigation State, not the Component State. If form validate() returns true, you can do something like this.props.navigation.setParams({showSaveBtn: true }) and then in navigationOptions you just need to do something like this:

static navigationOptions = ({ navigation }) => {

        const { params } = navigation.state;

        return {
          headerLeft: <Button params.showSaveBtn && title='Save'/>
        }

};

Ps.: Don't forget to define the default value to showSaveBtn navigation parameter in componentWillMount()

Upvotes: 1

Bin Feng
Bin Feng

Reputation: 116

Change ideas

navigationOptions: {
    header: null
}

Customize a header

Upvotes: 0

Related Questions