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?
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 :)