Question 33987 in React native Question posted in
The official React Native documentation can be found here.

React Native – hide parent stack's header on screen located in child stack

I have main navigation stack with few child stacks. In OnboardingStack child stack, I set up custom header per screen, but it renders double header (adds one more header with child stack name above custom header intended for that screen). How can I get rid of it? Tried passing screenOptions={{headerShown: false}} on parent stack and then both headers hide (i.e. missing custom header on screen too). How can I get rid of that additional header above custom one?

const MainNavigation = () => {
return (
    <NavigationContainer>
        <Stack.Navigator id={'MainStack'}>
            <Stack.Screen
                name="SplashScreen"
                component={Splash}
                options={{ headerShown: false }}
            />
            <Stack.Screen name="Onboarding" component={OnboardingStack} />
            <Stack.Screen name="Auth" component={AuthStack} />
            <Stack.Screen
                name="Home"
                options={{ headerShown: false }}
                component={Tabs}
            />
        </Stack.Navigator>
    </NavigationContainer>
);

};

This is OnboardingStack :

const OnboardingStack = () => {
return (
    <Stack.Navigator initialRouteName="Onboarding">
        <Stack.Screen
            name="OnboardingStep1"
            component={OnboardingStep1}
            options={{
                header: () => <Header title={'header'} />,
            }}
        />
        <Stack.Screen
            name="OnboardingStep2"
            component={OnboardingStep2}
            options={{
                header: () => <Header title={'header'} />,
            }}
        />
        <Stack.Screen
            name="OnboardingStep3"
            component={OnboardingStep3}
            options={{
                headerShown: false,
            }}
        />
    </Stack.Navigator>
);

};

I want get rid of light gray header above my custom one.

enter image description here

Tags:

2

Answers


  1. 0

    Try adding options={{ headerShown: false }} to this line in MainNavigation:

     <Stack.Screen name="Onboarding" component={OnboardingStack} />

    screenOptions prop is for a group or navigator while options prop is for a screen.

    Login or Signup to reply.
  2. 0

    You can parse options in onBoarding Stack also at initial place:

    Follow like this :

    const OnboardingStack = () => {
return (
    <Stack.Navigator options={{ headerShown: false }} initialRouteName="Onboarding">
        <Stack.Screen
            name="OnboardingStep1"
            component={OnboardingStep1}
            options={{
                header: () => <Header title={'header'} />,
            }}
        />
        <Stack.Screen
            name="OnboardingStep2"
            component={OnboardingStep2}
            options={{
                header: () => <Header title={'header'} />,
            }}
        />
        <Stack.Screen
            name="OnboardingStep3"
            component={OnboardingStep3}
            options={{
                headerShown: false,
            }}
        />
    </Stack.Navigator>
);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search