Conditional header in react-native StackNavigator

Question

I'm trying to control whether or not my StackNavigator header appears via this.props.navigation.state.params.

I have a screen with the following navigationOptions:

static navigationOptions = ( {navigation} ) => ({
    header: navigation.state.params.headerConfig,
});

and I navigate to the screen as follows:

<Button
      onPress={() => navigate('MyScreen', { headerConfig: _____} ) }
      title="Continue"
/>

, where ____ is what I am unsure about. If I put null then the header disappears, but what can I put there if I don't want the header to disappear?

I tried entering HeaderProps instead of ____.

Any help or alternative approaches would be much appreciated.

Dale Jefferson · Accepted Answer · 2017-06-23 22:20:33Z

2

If you don't want it do disappear then don't set it to null, leave it undefined and you will get the default one.

static navigationOptions = ({navigation}) => {
    if (navigation.state.params.hideHeader) {
        return {header: null}
    }
    return {title: 'Home'}
}

answered Jun 23, 2017 at 22:20

Dale Jefferson

1,9601 gold badge15 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Conditional header in react-native StackNavigator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related