1

I am trying to make a button appear in headerRight of the header bar in a React Navigation screen, but I cant seem to get it to work.

I want the start button (what is in headerRight) to show when props.players.length > 1.

Can anyone point me in the right direction?

1
  • Could you give a more complete excerp of your code? Commented Aug 18, 2018 at 17:06

2 Answers 2

5

You can use the same mechanics describe here for title: https://reactnavigation.org/docs/en/headers.html#setting-the-header-title

Set a navigation params and use it on your navigationOptions.

In your case:

state = { players: 0 };

static navigationOptions = ({ navigation }) => {
  return {
    headerRight: navigation.getParam('players', 0) > 1 ? <YourHeaderButtonComponent /> : null ,
  };
};

addPlayer = () => {
    this.setState(({players}) => {
        this.props.navigation.setParams({players: players + 1})
        return {players: players + 1 }
    });
}

render {
    ...
    <Button onPress={this.addPlayer}
    ...
}
Sign up to request clarification or add additional context in comments.

Comments

0

If you have a nested navigation for example a child bottomTabNavigator inside a parent stackNavigator please look att applying parent screen options based on child navigator's state see documentation here

For me the second option with Using navigation.setOptions worked with a child bottom tab navigator so I could change stackNavigator header options based on bottomTabNavigator page.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.