How can I render DrawerLayout from react-native-gesture-handler on top of my TabNavigator?

Question

App using react-navigation 6

App have TabNavigator and I need to have Drawer that rendered on top of TabNavigator that render Items, that could be selected, and based on what Item was selected I need to change screen in the same Tab in TabNavigator.

The DrawerNavigator solution doesn't fit my needs. Because when user select another Tab from TabNavigator I should change Drawer content for another Tab and lock DrawerLayout on some Tabs

I tried to do the same with DrawerNavigator with CustomLayout but I can't get current routeName in DrawerNavigator to change content based on Tab, I could use TabPress listener but then how I could update DrawerNavigator route from TabNavigator?

I am using DrawerLayout to set up Drawer for my react-native app. And I just wrap TabNavigator with DrawerLayout like that(pseudo code):

const TabNavigator = ({ route, navigation }) => {

    return (
      <DrawerLayout route={route} navigation={navigation}>
        <Tab.Navigator>
          <Tab.Screen>
          ...rest of tabs
        </Tab.Navigator>
      </DrawerLayout>
    )
}

And I am navigation to another screen in DrawerLayout like this when user press on Item:

const onPressItem = () => {
   // if Item is not selected then navigate to new screen in the same tab
   if(TabSelectedItem !== 'New_Screen_In_The_Same_Tab') {
       navigation.replace('New_Screen_In_The_Same_Tab')
       navigation.setParams({
        TabSelectedItem: 'New_Screen_In_The_Same_Tab',
       })
   }
   // if tab was already selected close the drawer
   closeDrawer()
}

So basically everything works except one thing, I noticed that if I just close DrawerLayout everythings is fine, but when I am navigating to new screen I feel like DrawerLayout is lagging, I suppose it could be because I do navigation and all TabNavigator do re-render

Question is: Could I fix it, or better to use any another solutions for this specific case?

Rostyslav Broslavskyi · Accepted Answer · 2023-02-23T23:30:19.587

Okay so I figured out how to do this

Now I am using Drawer from react-native-drawer-layout

I still wrap the Drawer around Tab.Navigator, but with this Drawer animations is smooth, in the case of DrawerLayout there is an issue with native animations, and when I do navigate to another screen inside DrawerLayout animation is a little bit glitchy, with Drawer everything is okay. It works in the same way as Drawer.Navigator from react-navigation

And to lock Drawer on some tabs I am using getFocusedRouteNameFromRoute from react-navigation. And inside Drawer I am checking if currentRoute == selectedTabStack I pass swipeEnabled={true} to Drawer to be able to open Drawer with swipe gesture, and I have open-drawer-button only on those tabs where Drawer should be opened(configured via screen param headerLeft)

Also using getFocusedRouteNameFromRoute I change Drawer content based on focusedRoute(it would be the focused tab in my case)

Hope it will help someone :)

How can I render DrawerLayout from react-native-gesture-handler on top of my TabNavigator?

1 Answers1