@react-navigation/drawer NPM | npm.io

6.6.15 • Published 1 month ago

Install

Weekly downloads

74,149

License

MIT

Repository

Last release

1 month ago

`@react-navigation/drawer`

Bottom tab navigator for React Navigation following iOS design guidelines.

Installation

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

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

Now we need to install react-native-gesture-handler and react-native-reanimated.

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

If you are not using Expo, run the following:

yarn add react-native-reanimated react-native-gesture-handler

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

Next, we need to link these libraries. The steps depends on your React Native version:

React Native 0.60 and higher
On newer versions of React Native, linking is automatic.
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:
```
cd ios
pod install
cd ..
```
React Native 0.59
If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
```
react-native link react-native-reanimated
react-native link react-native-gesture-handler
```

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>
  );
}

react-native-component react-component react-native react-navigation ios android material drawer

@react-navigation/elements color react-native-drawer-layout use-latest-callback

@neur0base/app-sdk react-native-twitter-clone @snooper/core publishtestformeinreactnativewebtestcomponent react-native-twilio-video-callkit react-native-twilio-video-test react-native-video-call-v1 iusify-module-codigos_pt iusify-module-iuslex react-native-jitsi-meet-lib @tendai.maswaya/sheshamobile-components whitedark-drawer-template @infinitebrahmanuniverse/nolb-_react-n @wavemaker/app-rn-runtime ordering-ui-react-native aincrad-library @everything-registry/sub-chunk-766 hubspire-expo-app enntte_app_almacen_garnica ordering-ui-native-release ordering-ui-native-ubanku-release operationnpm now-ui-react-native pivot-expo onboardingjom packen-rn moor-react-native-components @didcky/jaijagga blueko bramantiosyahrulalam @create-luna-app/expo @crqlar/expo-sdk @dabr89/expo-template checktestformytypescriptnativewebproj awt-helmet-adherence awt-qr-scanner @autofleet/locomotion-sdk awesomesafinaz @axelor/aos-mobile-core @dededeck/client @beepsoft/hamster @bluebase/plugin-react-navigation @bluebase/components whitedark-expo-android yes-framework android-example @akalli/create-akalli-app argon-react-native code-vortex netsome newawesome react-native-viva-ui react-navigation-dynamic-drawer react-navigation-generated react-native-template-rn-material-kit-free react-native-template-gauss react-native-template-gersonrs-template react-native-template-gersonrsantos-basic react-native-template-coopertemplate react-native-ts-boilerplate react-native-veroz-nfc-manager rnv5 rntyped-firebase-template rn-wrapper-package rnboilerplate-reduxsaga-typescript rne-at rn-with-navigation rnshell rn-navigation-templates rn-ui-builder rn-wappsto-networks react-native-base-typescript-hungtruong react-native-erxes-ui react-native-expo-router-template salesassist shot-on-target smcinsurance smcinsurance-rn test-lib-tsnk tamagui-expo template-qv-app statefullapicjslibrary stark-custom-bottom-tab-bar stark-custom-sidebar-menu ryts testnpmpackagetestnpm swapnil2510storytelling uakshaynayak veritatismaxime wefdsacerchretnerxfewedxfwsdfwefreg akshay-react @1023-ventures/serra-common agro-package @kafudev/react-native-core @lgowrav/testapp expo-managed-azikar24-template expo-router-template @lomelidev/react-native-toopago-ui create-themed-react-native-app create-akalli-app

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

5 months ago

6 months ago

8 months ago

7 months ago

8 months ago

6 months ago

7 months ago

6 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago