React native: How can I have multiple drawer navigator links point to screens within the same stack navigator

Question

I am new to react native and I haven't seen this question asked by anyone or haven't found a way around this.

Using react navigation 5 with expo.

Currently I have a the following app structure: Stack navigator inside of drawer navigator.

Example of page structure:
Drawer Navigator ( links ):
Home (RouteStack)
Screen 1 
Screen 2
Screen 3

RouteStack( screens) :
Home ( initial route )
Screen 1
Screen 2
Screen 4

How can I get Screen 1/Screen 2 link in drawer navigator load RouteStack: Screen 1/Screen 2? These links are provided to easily jump to the required screen.

Need some guidance on how to achieve this.

I have thought of the possibility of drawer inside of stack, but there are screens inside of drawer that may not be listed in the stack. Hence, went with stack inside of drawer.

I have also tried to do a navigation.navigate(route.name) inside of RouteStack

Sample code: Drawer navigator:

<NavigationContainer>
      <Drawer.Navigator drawerContent={(props, navigation) => <CustomDrawerContent {...props} {...navigation} />}>
        <Drawer.Screen name="Home" component={RouteStack} />
        <Drawer.Screen name="MyItems" component={RouteStack} />
        <Drawer.Screen name="ContactRep" component={RouteStack} />
        <Drawer.Screen name="Settings" component={SettingInfo} />
      </Drawer.Navigator>
    </NavigationContainer>

Stack navigator (RouteStack) looks like this:

   <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{ gestureEnabled: false, headerTitleAlign: 'auto' }}
    // headerMode="float"
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: '',
          headerStyle: {
            backgroundColor: '#fff',
          },
          headerTintColor: '#000',
          headerTitleStyle: {
            fontWeight: 'bold'
          },
          headerLeft: props => <HeaderLeftMenu {...props} />,
          headerRight: props => <HeaderRightMenu {...props} />,
          headerTitle: props => <HeaderTitle {...props} />
        }}
      />
      <Stack.Screen
        name="ContactRep"
        component={ContactRep}
        options={{ headerTitle: props => <HeaderTitle {...props} /> }}
      />
      <Stack.Screen
        name="MyItems"
        component={MyItems}
        options={{ headerTitle: (props, navigation) => <HeaderTitle {...props} /> }}
           />

    </Stack.Navigator>

Thanks in advance and help is appreciated.

score 0 · Answer 1 · answered Apr 27 '20 at 22:14

0

Your method is fine. But to clarify your ideas I will give you an example.

Assume I have a main Drawer. In that drawer I can navigate to 2 different screens. Inside those screens, I can navigate and do diferent things (like going to sub-screens), but never go outside the drawer.

To do this, we would have to created nested navigators. This meaning, one type of navigator if going to be inside another one. In our case of example:

<Papa Drawer>
 <Screen 1 component={StackSon1}>
 <Screen 2 component={StackSon2}>
<Papa Drawer>

And then StackSon1, for example, will look like this:

StackSon = () => {
return (
<Stack.Navigator>
 <Stack.Screen>
 <Stack.Screen>
 ...
  )
}

React Navigation will also handle every drawer separately, meaning that you don't have to worry about the user creating an infinite chain of open screens.

Also, remember that, when we Nest navigators using a function (like I did) we must use return (or the simplified version of return with just parenthesis)

Hope it helps.

answered Apr 27 '20 at 22:14

MIPB

1,770
2
12
21

I get what you said, but can we do this? `code` // note StackSon1 here `code` – Paul Apr 28 '20 at 15:01
Do you mean adding a second drawer to the first? Sorry I can't understand what you mean – MIPB Apr 28 '20 at 15:04
Nah, just one drawer, but the links all open up screens within StackSon1. In your example you had screen 2 open StackSon2. I want screen 2, 3, 4 all open screens within StackSon1 – Paul Apr 28 '20 at 15:07
I assume it would be possible and there are no restrictions to it, but I see no use in doing that. You would have the same content in two different drawers. Is that what you want to achieve? – MIPB Apr 28 '20 at 15:13
I think you mean you would have the same content in different stack navigators. I believe I have a solution, which I will post shortly. Not too convinced this is the best solution, but it works how I want it to. – Paul Apr 28 '20 at 16:54

React native: How can I have multiple drawer navigator links point to screens within the same stack navigator

1 Answers1