How to disable/hide drawer inside specific sub nested screens?

Question

I have a React Native app navigation logic similar to this navigation structure (Drawer, Tab, Stack).

DrawerNavigator enclosing BottomTabNavigator enclosing StackNavigator.

I want to disable my left Drawer (completely deactivate its header) when I'm on a certain deepest nested component.

Level 0
const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigation />
    </NavigationContainer>
  );
};

Level -1
const DrawerNavigation = (props: Props) => {
  const Drawer = createDrawerNavigator();

  return (
    <Drawer.Navigator
      useLegacyImplementation
      initialRouteName="GlobalTabNavigation"
    >
      <Drawer.Screen
        name="GlobalTabNavigation"
        component={BottomTabNavigation}
      />
    </Drawer.Navigator>
  );
};

Level -2
const BottomTabNavigation = () => {
  const Tab = createMaterialTopTabNavigator();
  return (
    <Tab.Navigator
      initialRouteName="HomeStack"
      tabBarPosition="bottom"
      backBehavior="initialRoute"
    >
      <Tab.Screen
        name="HomeStack"
        component={HomeStackScreen}
      />
      <Tab.Screen
        name="DownloadsStack"
        component={DownloadsStackScreen}
      />
      <Tab.Screen
        name="Wipe"
        component={WipeScreen}
      />
    </Tab.Navigator>
  );
};

Level -3
const HomeStackScreen = () => {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeComponent} />
      <Stack.Screen name="RlsACOptions" component={RlsACOptionsComponent} />
    </Stack.Navigator>
  );
};

Level -4
const RlsACOptionsComponent = () => {
  return (
     // My Stuffs
  );
};

Now in my sub level -4 component RlsACOptionsComponent, I want my level -1 Drawer header to be deactivated.
How to make my Drawer detects routes at that kind of depth ?

Regards.

I know that getFocusedRouteNameFromRoute can get to 1 level down. But what about 2, 3, 4 levels down ?
I'm using React Navigation v6x.

user18309290 · Accepted Answer · 2023-11-08 17:45:43Z

0

Listen to navigation state changes with onStateChange and update the application state to hide/show components. Something like this:

const [showHeader, setShowHeader] = useState(true);

const getCurrentRoute = (state) => {
  if (state.routes[state.index].state != undefined) {
    return getCurrentRoute(state.routes[state.index].state);
  } else {
    return state.routes[state.index];
  }
}

return (
  <NavigationContainer
    onStateChange={(state) =>
      setShowHeader(!['RlsACOptions'].includes(getCurrentRoute(state).name))
    }>
    <Drawer.Navigator
      screenOptions={{ headerShown: showHeader }}>
...
    </Drawer.Navigator>
  </NavigationContainer>
);

answered Nov 8, 2023 at 17:45

user18309290

8,5003 gold badges9 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to disable/hide drawer inside specific sub nested screens?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related