Custom Function In Headerright Of Stacknavigator In React Native

I have the following component that I'm trying to have some left and right header buttons in the header area. However, I am having trouble getting my function logout to call. Does

Solution 1:

UPDATE :

In navigationOptions, you, and I quote grabbou on this issue :

You can't access state. What you can do is either use this.context, externalise props (parent component / redux) or see this thread #145

And dmhood :

you can't call this.saveDetails() from a static context since the actual saveDetails method is a class method. You would need to make saveDetails static or just some helper function outside of the class.

One of the solution exposed in the #145 issue, and one that I used for an app that I am currently working on, is to use setParams on your componentDidMount lifecycle hook like so :

componentDidMount() {
   this.props.navigation.setParams({ yourfunction: this.yourfunction });
}

Then you can use the other way to declare your navigationOptions and this by declaring a function that takes in parameters the navigation object (with the navigation state (that contains the params !!))

( see an example on the main repo here)

YourComponent.navigationOptions = props => {
      const { navigation } = props;
      const { state } = navigation;
      const { params } = state;
      return {
         /* your navigationOptions props */,
         headerRight: <ButtononPress={() => params.yourfunction()} />
      }
  }

UPDATE 2 :

If you want to stick with the other syntax, just remember that your headerRight component receives the navigation object as a props containing your navigation state and its params !

UPDATE 3 :

A good discussion about how to solve this particular problem can be found on the official repo here