javascriptreactjsreact-native

react native stack navigation header not visible


i have a stack navigation with some screen i want the header to be hidden in some screen and i achieved that but i have a registration page that i want the header to be visible and to have the back button but its not visible,this is my navigation code

     <NavigationContainer>
       <Stack.Navigator>
          <Stack.Screen name="Login" component={LoginScreen} 
                        initialParams={{title:null}} options={{
                                                           headerShown: false,
                                                           headerLeft: null,
                                                           gestureEnabled: false}} 
         />
         <Stack.Screen name="Register" component={RegisterScreen}/>
       </Stack.Navigator>
     </NavigationContainer>

Solution

  • 1) First remove header for entire stack navigator

    Choose one of them

    I-way <Stack.Navigator headerMode={'none'}>

    II-way <Stack.Navigator screenOptions={{ headerShown: false }}/>

    2) Then show header inside individual screen that you want

    <Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: true}}/>