1 | # React Navigation Drawer
|
2 |
|
3 | [![npm version](https://badge.fury.io/js/react-navigation-drawer.svg)](https://npmjs.org/react-navigation-drawer) [![CircleCI badge](https://circleci.com/gh/react-navigation/drawer/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/drawer/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)
|
4 |
|
5 | Drawer navigator for use on iOS and Android.
|
6 |
|
7 | ## Installation
|
8 |
|
9 | Open a Terminal in the project root and run:
|
10 |
|
11 | ```sh
|
12 | yarn add react-navigation-drawer
|
13 | ```
|
14 |
|
15 | If you are using Expo, you are done. Otherwise, continue to the next step.
|
16 |
|
17 | Install and link [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated). To install and link them, run:
|
18 |
|
19 | ```sh
|
20 | yarn add react-native-reanimated react-native-gesture-handler
|
21 | react-native link react-native-reanimated
|
22 | react-native link react-native-gesture-handler
|
23 | ```
|
24 |
|
25 | **IMPORTANT:** There are additional steps required for `react-native-gesture-handler` on Android after running `react-native link react-native-gesture-handler`. Check the [this guide](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html) to complete the installation.
|
26 |
|
27 | ## Usage
|
28 |
|
29 | ```js
|
30 | import { createDrawerNavigator } from 'react-navigation-drawer';
|
31 |
|
32 | export default createDrawerNavigator({
|
33 | Inbox: InboxStack
|
34 | Drafts: DraftsStack,
|
35 | }, {
|
36 | initialRouteName: 'Inbox',
|
37 | contentOptions: {
|
38 | activeTintColor: '#e91e63',
|
39 | },
|
40 | });
|
41 | ```
|
42 |
|
43 | ## Development workflow
|
44 |
|
45 | - Clone this repository
|
46 | - Run `yarn` in the root directory and in the `example` directory
|
47 | - Run `yarn dev` in the root directory
|
48 | - Run `yarn start` in the `example` directory
|
49 |
|
50 | ## Docs
|
51 |
|
52 | Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/drawer-navigator.html).
|