What is the recommended way to use Drawer with multiple nested screens structure?

user_4972365 0
Viewed 476

I am trying to implement routing like below...

A(home screen)

B -> B1 -> B2

C -> C1 -> C2

D -> D1 -> D2

...and so on. i have something like 20 items in the drawer menu.(each screen is a business view)

So currently what i have implemented is that the root is a Drawer navigator and each screen (A,B,C...) are screens in the drawer.

snack: https://snack.expo.dev/@raven619claw/stack-within-drawer

Now each screen(A,B,C..) itself is a Stack navigator.

This has been working fine in terms of usage,deeplinking, typescript for routes,params also works. No issues in navigating as such.

However for one use case i need to have a navigation like A -> B -> B1 -> B2 -> C2(and then onBack go to B2).

In this handling back press and swipe to go back in iOS is a big hassle i had to do many hacks to get it working.

set C2 as the initial screen instead of C so that swipe back is not required as this is the first route in Drawer itself define backBehavior for Drawer

i also have to either unmount these Drawer route(B,C) on blur or when coming from drawer manually define the screen required to be shown (navigation.navigate(B,{screen:B1})) else it would continue showing B2

I did try something like using a Stack navigator as root and one screen for Drawer and every other screen is part of the root Stack this did work.

snack: https://snack.expo.dev/@raven619claw/inverted-drawer-within-stack

but as all the routes will be defined in different files this soon became a hassle to maintain in terms of deeplinking hierarchy and handling types.

Also each screen would be independently worked on by a different team of 2,3 people For all this..

i wanted to understand what is the suggested way to handle this kind of routing.

react-navigation react-native
1 Answers

you should to use stack for each of that and then use that is one main stack .

this is sample

for B stack:


 function BScreen() {
   return (
     <BStack.Navigator
       initialRouteName="B1"
       screenOptions={{ headerShown: false }}>
       <LoginStack.Screen name="B1" component={B1} />
       <LoginStack.Screen name="B2" component={B2} />
     </BStack.Navigator>
   );
 }

for C stack:

 function CScreen() {
    return (
      <CStack.Navigator
        initialRouteName="C1"
        screenOptions={{ headerShown: false }}>
        <LoginStack.Screen name="C1" component={C1} />
        <LoginStack.Screen name="C2" component={C2} />
      </CStack.Navigator>
    );
  }

and for main stack you can use like this :

  return (
 
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName="Splash"
            screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Splash" component={Splash} />

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

            <Stack.Screen name="CScreen" component={CScreen} />
        
            <Stack.Screen name="Home" component={HomeScreen} />
          </Stack.Navigator>
        </NavigationContainer>

  );
}

and for you can switch between screen in another stack easily with this sample :

navigation.navigate('CScreen', { screen: 'C1' });
user_72069220
Related