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

Not resolved. I just abandoned the project. The answer below did not resolved my use case. — Mark Hkr, May 26 '21 at 22:09
I think the nesting stricture will need to be changed, still trying to figure out how. I wish there was an easy prop to add. — Morris S, May 26 '21 at 22:22
Yep, I tried different ways of nesting them, but never could get the right one. — Mark Hkr, May 27 '21 at 04:34

score 2 · Answer 1 · answered Oct 12 '21 at 21:45

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.

score 0 · Answer 2 · answered Jun 09 '20 at 03:32

You will have to nest a drawer navigator inside your tab navigator.

The profile tab should contain a drawer navigator and should contain your actual profile screen.

If you want to customize your drawer to a notifications page you should provide a customize view there.

The high level structure will be as below

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

function AppDraw() {
  return (
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={AppDraw} />
    </Tab.Navigator>
  );
}

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

You can refer this for customizing the drawer. Hope it helps.

@mark i believe this is correct, coz ideally i would try this too. — Gaurav Roy, Jun 09 '20 at 05:08
This is actually how my code is, this solves the problem of having the Drawer only inside one tab, but it still appears below the tab navigator because of this: https://reactnavigation.org/docs/drawer-navigator#nesting-drawer-navigators-inside-others I need the drawer on top of the tab, but only visible on one of them — Mark Hkr, Jun 09 '20 at 14:37

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

2 Answers2