Drawer navigation inside Tab navigation but on top (react native)

Question

I'm coding a react native app similar to Instagram. I have already a bottom tab navigator with 5 items, the last one is the profile tab.

Inside this profile tab I want a drawer navigator to manage the profile settings, I want this drawer only "drawable" inside this tab, not the others. But also I want the drawer to show on TOP of the tab navigator at the same time (just like instagram's).

I am using the react-navigation library for this. My question is: is this possible? If yes, how could I implement it on my code?

Thanks

Answer 1

You can wrap the bottom tabs navigator inside a drawer navigator.
This way, the drawer will always be shown on top of the bottom tabs.
Any attempt to open the drawer from any bottom tab page will bubble up to the drawer navigator and will eventually cause the drawer to be opened.

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

function BottomTabsNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="tab1"
        component={Component1}
      />
      <Tab.Screen
        name="tab2"
        component={Component2}
      />
      <Tab.Screen
        name="tab3"
        component={Component3}
      />
    </Tab.Navigator>
  )
}
    

function MainNavigator() {
  return (
    <Drawer.Navigaton>
      <Drawer.Screen name="drawer" component={BottomTabsNavigator} />
    </Drawer.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <MainNavigator/>
    </NavigationContainer>
  )
}

You can of course implement a customized drawer component and replace it with the default drawer (using drawerContent props) to show any items you want.