Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide stack navigation header from a single screen in react-navigation v5

My app has 5 components (screens), I am using stack navigation version 5, I need the headers for all screens except one screen, I tried to do this via option inside screens like this:

This is my code:

const Stack = createStackNavigator();
const MainStack = () => ({
    return(
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="MyTabs" component={MyTabs} />
                <Stack.Screen name="Direct" component={Direct} />
                <Stack.Screen name="Like" component={Like} />
                <Stack.Screen name="Search" component={Search} />
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </NavigationContainer>
    )
)}
like image 625
roz333 Avatar asked Dec 14 '22 09:12

roz333


2 Answers

use options={{ headerShown: false }}

like image 186
farhad Avatar answered Feb 04 '23 05:02

farhad


  1. in your navigation options={{ headerShown: false }}
  2. from your component navigation.setOptions({ headerShown: false })
like image 31
Imron Rosadi Avatar answered Feb 04 '23 05:02

Imron Rosadi