How to implement drawer navigator in each tab?

Question

I want to have drawer navigation in each tab and I followed this approach, but it doesn't work when I switch back to the previous tab (maybe some navigation tree issue).

As you can see above, the drawer works fine for the first time in each tab, but when I go back to any already navigated tab and try to open the drawer, the drawer doesn't open for that tab but opens up for the just previous tab. I think there's some navigation issue.

HomeBottomTab.js

Here, I created a Bottom Tab Navigator and called the drawers for each tab.

const HomeBottomTab = ({ navigation }) => {
  return (
    <Tab.Navigator ... >
      <Tab.Screen name="Notifications" component={NotificationsDrawer} ... />
      <Tab.Screen name="Tutorials" component={TutorialsDrawer} ... />
      <Tab.Screen name="Wallet" component={WalletDrawer} ... />
    </Tab.Navigator>
  )
}

NotificationsDrawer.js

Here I created a Drawer Navigator for the Notifications tab.

export default function NotificationsDrawer({ navigation }) {
    return (
      <Drawer.Navigator ... >
        <Drawer.Screen ... />
        <Drawer.Screen ... />
        <Drawer.Screen ... />
      </Drawer.Navigator>
    )
}

I did the same for TutorialsDrawer and WalletDrawer. Is there any way to fix this? Have I done something wrong?

Answer 1

All I had to do was create an independent Navigation Container and a Stack Navigator inside of it, which contains a Stack Screen and it accepts the drawer as a component.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function Notifications_Drawer({ navigation }) {
 return (
  <Drawer.Navigator ... >
      <Drawer.Screen ... />
      <Drawer.Screen ... />
      <Drawer.Screen ... />
  </Drawer.Navigator>
 )
}

export default function NotificationsDrawer() {
    return (
        <NavigationContainer independent={true}>
            <Stack.Navigator>
                <Stack.Screen
                    name="Notifications_Drawer"
                    component={Notifications_Drawer}
                    options={{ headerShown: false }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}