2

I've been programming in React Native for a short time, and I know little about react-navigation. After trying a lot I managed to use stack navigator with a custom drawer navigator (side menu), but this seems to be very strange because my stack is inside my menu drawer like a screen.

My stack:

const SignedInStack = () => (
  <Stack.Navigator>
    <Stack.Screen name='Confluence' component={Confluence} />
    <Stack.Screen name='QRCode' component={Main} />
  </Stack.Navigator>
)

In the DrawerMenu:

const DrawerMenu = () => (
  <Drawer.Navigator
    screenOptions={{ headerShown: false }}
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    detachInactiveScreens={false}
  >
    <Drawer.Screen
      name="SignedInStack"
      component={SignedInStack}
      options={{
        drawerItemStyle: { height: 0 }
      }}
    />
    <Drawer.Screen
      name="QRCode"
      component={Main}
    />
  <Drawer.Navigator/>
);

In the App.js:

const App = () => (
  <NavigationContainer>
    <DrawerMenu />
  </NavigationContainer>
);

Previously I use my drawer menu inside my stack, but the app had navigation problems.

Tchiteu Abloh
  • 424
  • 1
  • 6
  • 15
  • 2
    This is perfectly fine and recommended in the documentation for nesting several navigators. – David Scholz May 03 '22 at 15:46
  • @DavidScholz I'm having problems using the goBack function on my stack, when using navigation.getState I realized that the type is drawer, can you tell me if I'm doing something wrong? – Tchiteu Abloh May 24 '22 at 12:43

0 Answers0