@react-navigation/drawer NPM | npm.io

6.7.2 • Published 6 months ago

Install

Weekly downloads

74,149

License

MIT

Repository

Last release

6 months 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 aincrad-library @everything-registry/sub-chunk-766 hubspire-expo-app @dededeck/client @snapbot-app/examples @snapbot-app/time-ruler tamagui-expo swapnil2510storytelling test-lib-tsnk vuimobile vxs wefdsacerchretnerxfewedxfwsdfwefreg whitedark-expo-dn-ts-template telen-app template-qv-app testnpmpackagetestnpm @create-luna-app/expo @common-stack/mobile-stack-react @dabr89/expo-template @bluebase/components @bluebase/plugin-react-navigation integrador kitchentemplate kitcheningredients whitedark-expo-android react-native-paper-extended-example stark-custom-bottom-tab-bar stark-custom-sidebar-menu statefullapicjslibrary uakshaynayak @autofleet/locomotion-sdk @akalli/create-akalli-app @axelor/aos-mobile-core @beepsoft/hamster @cloud-varejo/cloud-varejo-ui @1023-ventures/serra-common @hogent-mobile/expo-template @lomelidev/react-native-toopago-ui @didcky/jaijagga @crqlar/expo-sdk yes-framework veritatismaxime @hubspire/expo-app @hinh-eoh/test_publish @lgowrav/testapp @mainamiru/admin-ui @mainamiru/expo-app-with-navigation @ninjavid/rn-lib @narwhal/react-view-types @nodeworks/expo-starter @eohjsc/react-native-personal-health @eohjsc/react-native-smart-city @eohjsc/react-native-smart-parking @eohjsc/react-native-hts @mcplabs/mcp-rn-showtime-template @kafudev/react-native-core @jabz/react-library-template @jabz/react-native-expo-core-system @johanneswe91/expo-typescript-storybook @react-native-oh-tpl/drawer @sagredoismael/navigation_rn @proximus/myproximus-design-system @reactseals/renative-template-chat @rndm/render-plugin-react-navigation @shenorg/ss_rn_ui @smart-construction-vn/mobile-component @snapbox/mapp-examples @snapbox/mapp-green-energy-reaper @snapbox/mapp-led-danmaku @snapbox/mapp-little-days @snapbox/mapp-qrcode-generator @snapbox/mapp-scanner @selene-wallet/app money-verse-bigbang moor-react-native-components packen-rn ordering-ui-native-release ordering-ui-native-ubanku-release ordering-ui-react-native operationnpm one onboardingjom react-native-custom-packages react-native-expo-router-template react-native-common-utils-huzaifaa react-native-erxes-ui react-native-nano

6 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 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

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

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

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

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

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

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

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

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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago