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?
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}
...
}
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.
