1

React navigation version 4.3.9

My iOS emulator is throwing an annoying warning, but otherwise it works.

I have a stack navigator with a number of screens. My App.js file loads the stack navigator with the first screen showing. It's a console screen with a number of buttons that load screens from the stack navigator.

I want the first console screen not to have a header, as it doesn't fit with the designers layout.

This works fine:

  const PlanCalcNavigator = createStackNavigator({
   Console: {
     screen: ConsoleScreen,
     navigationOptions: {
       header: null // hides header in first screen
     }
   },
   PlanEvent: PlanEventScreen,
   Calc: CalculatorScreen,
  },
 );

But my iOS emulator keeps throwing up the "Deprecation in "navigationOptions": -"header: null" will be removed" warning which is very annoying.

Is there some other term that I can use that won't throw the error?

headerMode: 'none' doesn't work. It doesn't throw an error, but the console screen shows the header.

Kelvin Aitken
  • 433
  • 6
  • 18

3 Answers3

5

you can use

  navigationOptions:{
    headerShown: false
  }
Rodolfo Campos
  • 199
  • 1
  • 8
  • 1
    in your stacknavigator example: const HomeStack = createStackNavigator({ Home:{ screen:Home, navigationOptions:{ title:"Feed", headerShown:false }.... }, – Rodolfo Campos May 26 '21 at 13:45
2

you can use

<Stack.Navigator screenOptions={{ headerShown: false }}>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
incheol seung
  • 21
  • 1
  • Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P May 02 '22 at 07:25
0

navigationOptions: { header: null // hides header in first screen } That's good. Need to upgrade React navigation version 4.4.0 You need to add headerMode as your fav.

Alison Talatu
  • 1
  • 1
  • I will probably go to version 5 for the next project, or once this is done and I have to do the inevitable upgrade to react-native. – Kelvin Aitken Jul 04 '20 at 18:45
  • If you fixed that problem, that's okay. I also had a problem same like you, I solved this problem by adding headerMode and upgrading react-navigation final version(4.4.0) – Alison Talatu Jul 04 '20 at 19:51