How do I hide the header in react navigation?

Question

Everything online has told me I have to do headerShown: false in order to hide the header but for some reason it is not working for me in my code:

const Stack = createNativeStackNavigator();

const App = () => {
  return (
   <NavigationContainer>
      <Stack.Navigator 
         screenOptions={{
             headerShown: false
         }}>
            <Stack.Screen name='Welcome Screen' component={WelcomeScreen}/>
      </Stack.Navigator>
   </NavigationContainer>
  )
}

I have done everything it said to do in the documentation but I am still seeing the header in the emulator.

[https://stackoverflow.com/questions/44701245/hide-header-in-stack-navigator-react-navigation](https://stackoverflow.com/questions/44701245/hide-header-in-stack-navigator-react-navigation) — ferter3006, Feb 27 '23 at 15:06
@ferter3006 I have done the solution for that post as you can see in my code but it is still not working. — venus, Feb 27 '23 at 15:14

score 1 · Answer 1 · answered Feb 28 '23 at 04:50

If you only have one screen in your Stack Navigator, instead of hiding the header for the whole stack, hide it for the individual screen by using the Stack Screen option headerShown -> <Stack.Screen name='Welcome Screen' options={{headerShown: false}} component={WelcomeScreen}/>.

Also, check if you are hiding the header in your welcome Screen, that might cause an issue and won't let you hide the header.

How do I hide the header in react navigation?

1 Answers1