Skip to main content

Multiple drawers

Sometimes we want to have multiple drawers on the same screen: one on the left and one on the right. This can be achieved in 2 ways:

  1. By using react-native-drawer-layout directly (Recommended).
  2. By nesting 2 drawer navigators.

Using react-native-drawer-layout​

When we have multiple drawers, only one of them shows the list of screens. The second drawer may often be used to show some additional information such as the list of users etc.

In such cases, we can use react-native-drawer-layout directly to render the second drawer. The drawer navigator will be used to render the first drawer and can be nested inside the second drawer:

import * as React from 'react';
import { View } from 'react-native';
import { Drawer } from 'react-native-drawer-layout';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
import { Button } from '@react-navigation/elements';

function HomeScreen() {
  const navigation = useNavigation();