@react-navigation/drawer

@react-navigation/drawer

Bottom tab navigator for React Navigation following iOS design guidelines.

Documentation can be found on the React Navigation website.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/native @react-navigation/drawer

Now we need to install react-native-gesture-handler, react-native-reanimated and react-native-safe-area-context.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context

If you are not using Expo, run the following:

yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context

If you are using Expo, you are done. Otherwise, continue to the next steps.

To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios
pod install
cd ..

IMPORTANT: There are additional steps required for react-native-gesture-handler on Android after linking (for all React Native versions). Check the this guide to complete the installation.

Usage

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

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="home" component={Home} options={{ title: 'Home' }} />
      <Drawer.Screen name="feed" component={Feed} options={{ title: 'Feed' }} />
      <Drawer.Screen
        name="profile"
        component={Profile}
        options={{ title: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

Similar packages

Other packages similar to @react-navigation/drawer

react-native-drawer

react-native-drawer is another package for creating a drawer navigation in React Native applications. It provides a highly customizable drawer component that can be used to create side menus. Compared to @react-navigation/drawer, react-native-drawer offers more flexibility in terms of customization but requires more manual setup and configuration.

react-native-side-menu

react-native-side-menu is a simple and customizable side menu component for React Native. It allows you to create a side menu that can be swiped in from the edge of the screen. While it is easier to set up compared to @react-navigation/drawer, it lacks some of the advanced features and integrations provided by @react-navigation/drawer.

react-navigation

react-navigation is a popular navigation library for React Native that provides a variety of navigators, including stack, tab, and drawer navigators. While @react-navigation/drawer is a specific package for drawer navigation, react-navigation offers a more comprehensive solution for handling different types of navigation in a React Native app.