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

Question

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

Did you try setting the header options inside the component using ```static navigationOptions = { header:null }```. I am not sure if it will work on React Navigation v5. — Hisham Mubarak, Feb 16 '20 at 14:42
No buddy, ```static navigationOptions``` doesn't work in version 5 — roz333, Feb 16 '20 at 14:55
Oops! Sorry then. I haven't yet moved to V5! Anyways, good luck :) — Hisham Mubarak, Feb 16 '20 at 16:39

score 14 · Accepted Answer · answered Feb 16 '20 at 14:59

14

use options={{ headerShown: false }}

answered Feb 16 '20 at 14:59

farhad

226
3
8

thanks worked for me "navigationOptions becomes options prop on Screen" in v5 – Hassan jan Jun 20 '20 at 19:08

score 4 · Answer 2 · answered Jun 29 '20 at 08:50

4

in your navigation options={{ headerShown: false }}
from your component navigation.setOptions({ headerShown: false })

answered Jun 29 '20 at 08:50

Imron Rosadi

71
3

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

2 Answers2