How to user drawer navigation and stack navigation for same screen?

user_12721555 0
Viewed 30

This is my react native app.js file code.

const Stack = createNativeStackNavigator();
const App = () => {
  return (
    
    <AuthProvider>
    <NavigationContainer>
      <AuthStack/> 
       {/* <DrawerNavigation/> */}
    </NavigationContainer>
    </AuthProvider>
  )
}
export default App;

In the <AuthStack/> I added the stack navigation. According to that code, it's working. And also added <DrawerNavigation/> I created drawer navigation to the screen. But cannot use both in same code like abow. I am new to the react-native can you tell me how can I solve this?

navigation-drawer react-navigation-stack react-native
1 Answers

Here's a similar implementation I've made before and is working.

const AppHomeTabs = createBottomTabNavigator()

function AppHomeTabsNavigator() {
  const { Screen, Navigator } = AppHomeTabs

  return (
    <Navigator>
      <Screen name="one" component={ScreenOneStack} />
      <Screen name="two" component={ScreenTwoStack} />
    </Navigator>
  )
}

and

const Drawer = createDrawerNavigator()

function ScreenOneStack() {
  return (
    <Drawer.Navigator
      drawerType="slide"
      backBehavior="initialRoute"
    >
      <Drawer.Screen
         name="foo"
         component={ScreenFoo}
      />
      <Drawer.Screen
         name="bar"
         component={ScreenBar}
      />
    </Drawer.Navigator>
  )
}

and so on.

user_131997070
Related