headerMode: 'none' is confusing

[marcpicaud]

Hi,

As title says, it's currently not possible to have {headerMode: 'none} on specific screens if this property is not shared by the parent stackNavigator.

Something like the following just doesn't work :

const authStack = createStackNavigator({
  Onboarding: OnboardingScreen,
  SignIn: SignInScreen
})

// header won't be hidden on OnboardingScreen
class OnboardingScreen extends React.Component {
  static navigationOptions = { headerMode: 'none' }
}

However, setting navigationOptions = { header: null }on targetted screen does the trick.

Maybe we should update the doc because I'm sure there are people out there who have this use case and it's a little confusing as per now in the docs :

`headerMode` - Specifies how the header should be rendered:

    `float` - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
    `screen` - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
    `none` - No header will be rendered.

[brentvatne]

I think we need to do a better job in the docs of highlighting what is appropriate as navigationOptions and what is a navigator config

notice how headerMode: 'none' does not sit under the navigationOptions heading:

[marcpicaud]

Oh... You're right, I didn't see this, sorry !

Thanks @brentvatne :)

[bobber205]

@marcpicaud THANK YOU SO MUCH for the header: null trick. 🙏

[joseBecerra105]

Can we set header: true?

[susbnr21]

@joseBecerra105 No but you can do headerShown: true/false.

[nadeem6logics]

in react-navigation5, use headerShown: true/false.