React Native Navigation Sidebar and TabBar toggled navigation

user_4570353 0
Viewed 490

I want to toggle between sidebar and tab navigation. I have it so that it currently switches between tabs and sidebar depending on the screen size, however since they are separate navigators it resets the navigation stack. Is there any way to persist the navigation stack when I change navigators?

If there is a way to have a Drawer and TabBar navigator with the same screens at the same time that would also solve my problem.

  <Stack.Navigator
      screenOptions={{ headerShown: false }}
      mode="modal"
      initialRouteName="WalkthroughScreen"
    >
      {deviceSize(layout.width) > 0 ||
      (layout.width < 50 && Platform.OS === 'web') ? (
        <Stack.Screen name="Root" component={DrawerNavigator} />
      ) : (
        <Stack.Screen name="Root" component={BottomTabNavigator} />
      )}
react-navigation-v5 react-navigation react-native-navigation
1 Answers

What I ended up doing was just using bottom navigation for the mobile app and drawer navigation for web and mobile web. So my code looks like this:

      {Platform.OS === 'web' ? (
        <Stack.Screen name="Root" component={DrawerNavigator} />
      ) : (
        <Stack.Screen name="Root" component={BottomTabNavigator} />
      )}

The reason this works and not the other way is there is since it just uses platform there is never a reason for the navigator to switch mid process. So I decided to give up on tabs and use a hamburger menu for mobile web with the side drawer and a permanent side drawer on larger screens.

So in my drawer navigator <DrawerNavigation.Navigator> I set drawerType like this

      drawerType={deviceSize(layout.screenWidth) === 0 ? 'front' : 'permanent'}
user_45703530
Related