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

Minyan

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. – Vibration

No buddy, static navigationOptions doesn't work in version 5 – Minyan

Oops! Sorry then. I haven't yet moved to V5! Anyways, good luck :) – Vibration

Answer 1

use options={{ headerShown: false }}

Delmerdelmor

thanks worked for me "navigationOptions becomes options prop on Screen" in v5 – Forty

Answer 2

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

Berg