react native stack navigation header not visible

Question

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>

Jasur Kurbanov · Accepted Answer · 2020-11-18 07:50:30Z

3

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}}/>

answered Nov 18, 2020 at 7:50

Jasur Kurbanov

1107 bronze badges

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

Comments

Redz · Accepted Answer · 2025-02-18 06:26:12Z

If you are using <Stack.Screen ...> (in 2025), this may solve your issue.

Scenario - Inside the directory where your app.tsx (or) app directory is located, suppose you have sub-directories, which are for different groups / sub tasks for your app (ex - app/auth/otp-handling.tsx). Each such directory will have its own _layout.tsx, in which we typically have the settings for the header, which is local to the directory.

Lets say you are developing / testing the otp-handling.tsx, so to do that you may have imported that component directly into your app.tsx (the mistake which I had done). And the header styles were not applied, despite mentioning then clearly in the Stack.Screen in _layout.tsx.

Here, when you import a component which is under a subdirectory with its own _layout.tsx, into app.tsx, it (otp-handling.tsx, say) would follow the _layout.tsx of the app directory (outer one).

Hence instead of importing it, use 'useRouter' from expo-router and do router.push('/auth/otp-handling'), it will work, as the otp-handling.tsx will now follow _layout.tsx of the auth directory.

Note - do that router.push in a useEffect, in a set timeout (1000ms) Believe me, it works!

Collectives™ on Stack Overflow

react native stack navigation header not visible

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related