How can I hide the screen header but show my back button?

user_14785427 0
Viewed 1494

I would like to hide my screen header but still show the back button in my Stack Navigator? I have set screenOptions={{ headerShown: false }} in my Stack.Navigator, which hides both the screen header and back button. I would like to just hide the screen header.

Can someone please assist with this? Below is my Stack Navigator:

function SearchStack() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="SearchScreen" component={SearchScreen} />
        <Stack.Screen name="SearchListScreen" component={SearchListScreen} />

     </Stack.Navigator>
   );
}

In the tab navigator the stack is set as:

   <Tab.Navigator screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {...})}> 
    <Tab.Screen name="Search" component={SearchStack} />
   </Tab.Navigator>

This is what I'm currently seeing:

enter image description here

But this is what I would like to have with my Tab navigation bar still at the bottom for the search stack:

enter image description here

This is what I get using options={{headerMode:"none"}} in Stack.Navigator:

enter image description here

The below occurs when adding updating the Stack.Navigator to <Stack.Navigator screenOptions={{ headerTitle:"", headerTransparent:true }}> . How can add or move the back button to the top exactly like the 2nd image, which is achieved when not adding the Stack to the Tab.Screen so changing:

<Tab.Screen name="Search" component={SearchStack} />

to

<Tab.Screen name="Search" component={SearchScreen} />

but doing this causes the tab to not appear in the Search list screen.

enter image description here

react-navigation-stack react-navigation react-native
3 Answers

The back button is part of the header, so you can't hide the header and keep the back button.

What you want to do is to hide other parts of the header except for the back button, which would be

  • Title, with headerTitle: ""
  • Background, with headerTransparent: true
user_16650260

for hide the back button in react-native, we can use property,

headerBackVisible:false this property only work on android

<Stack.Screen
   options={{headerBackVisible: false}}
/>

user_161966890

If you don't want the default header then use like this

screenOptions={{ headerShown: false }}

and write custom code for the header with back button in your component (If your are using class component) Then

<TouchableOpacity onPress={()=>this.props.navigation.goBack()} style={{width:'100%', height:45, flexDirection:'row'}}> <Image source={require('back button image path')}/> </TouchableOpacity>

if you want header title too then,

<TouchableOpacity onPress={()=>this.props.navigation.goBack()} style={{width:'100%', height:45, flexDirection:'row'}}> <Image source={require('back button image path')}/> <Text>SearchListScren</Text> </TouchableOpacity>

Put this code at top of the component code under a container

user_110214870
Related