How to disable headers of a parent stack navigator from a screen of the child navigator in React Nat-CodePudding

I am building a React Native app, I am using React Navigation and I have to disable headers of the parent navigator from the screen of a child navigator, so for example

  Tab Naviagtor A (Headers ON)
    Stack Navigator B (Headers OFF)
      Navigtor B Screens ( A, B, C, D, E)

So how do I disable the headers at Tab Navigator A, From a specific Navigator A Screen like C. So that When I navigate to Screen C I no more see the header but will be able to see the header on other screens like E and D.

CodePudding user response：

This should be achievable by using route param like this on the Tab navigator:

<Tab.Navigator
      initialRouteName={"A")}
      screenOptions={({route}) => {
        return {
          headerShown: route.name !== "C",
        };
      }}>

Another option would be to hide the Tab Navigator header and enable Stack Navigator headers on those screens you need.

CodePudding user response：

const StackNavigator = ({ navigation }) => {
  return (
    <Stack.Navigator
      screenOptions={{ headerShown: false }}

    >
      <Stack.Screen
        name="Tabs"
        component={TabNavigator}
        options={({ route }) => ({
          headerTitle: getHeaderTitle(route),
          headerLeft: () => (
            <NavigationHeaderDashboard navigationProps={navigation} position={'Right'} />
          ),
          headerStyle: {
            backgroundColor: '#FFFFFF',
          },
          headerTintColor: '#092241',
          headerTitleStyle: {
            fontWeight: 'bold',
            fontSize: 20,
            alignSelf: 'center',
          },
          headerTitleAlign: "center",
        })}

      />
      <Stack.Screen name="ViewScreen" component={ViewScreen} /> 
    </Stack.Navigator>

  );
};