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

Raggedy

Please post an answer if this was resolved – Orleans

Not resolved. I just abandoned the project. The answer below did not resolved my use case. – Raggedy

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. – Orleans

Yep, I tried different ways of nesting them, but never could get the right one. – Raggedy

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.

Caryl

Answer 2

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.

Beggary

@mark i believe this is correct, coz ideally i would try this too. – Longbow

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: reactnavigation.org/docs/… I need the drawer on top of the tab, but only visible on one of them – Raggedy

Answer 3

These answers are actually close to the solution. What you have to do is to hide the header of these navigators using {headerShown: false} and make the chosen icon/button call navigation.dispatch(DrawerActions.openDrawer()); from the component it resides.

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator screenOptions={{headerShown: false}}>
      <Drawer.Screen name="Home" component={BottomTabNavigation} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  )
}

const StackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name="drawer" component={DrawerNavigator} />
    </Stack.Navigator>
  )
}

export default StackNavigator;

On the component where you want to have the drawer trigger (button/icon);

import { DrawerActions } from '@react-navigation/native';

const Profile = () => {
  return (
    <Icon
      onPress={() => {
        navigation.dispatch(DrawerActions.openDrawer());
      }}
    />
  )
}

Tabloid