1 | # React Navigation Stack
|
2 |
|
3 | [![Build Status][build-badge]][build]
|
4 | [![Version][version-badge]][package]
|
5 | [![MIT License][license-badge]][license]
|
6 |
|
7 | Stack navigator for use on iOS and Android.
|
8 |
|
9 | ## Installation
|
10 |
|
11 | Open a Terminal in your project's folder and run,
|
12 |
|
13 | ```sh
|
14 | yarn add react-navigation-stack @react-native-community/masked-view react-native-safe-area-context
|
15 | ```
|
16 |
|
17 | or
|
18 |
|
19 | ```sh
|
20 | npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context
|
21 | ```
|
22 |
|
23 | ## Usage
|
24 |
|
25 | ```js
|
26 | import { createStackNavigator } from 'react-navigation-stack';
|
27 |
|
28 | export default createStackNavigator({
|
29 | Inbox: InboxScreen,
|
30 | Drafts: DraftsScreen,
|
31 | }, {
|
32 | initialRouteName: 'Inbox',
|
33 | });
|
34 | ```
|
35 |
|
36 | ## Development workflow
|
37 |
|
38 | To setup the development environment, open a Terminal in the repo directory and run the following:
|
39 |
|
40 | ```sh
|
41 | yarn bootstrap
|
42 | ```
|
43 |
|
44 | While developing, you can run the example app with [Expo](https://expo.io/) to test your changes:
|
45 |
|
46 | ```sh
|
47 | yarn example start
|
48 | ```
|
49 |
|
50 | The code in this repo uses the source from [`@react-navigation/stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/stack) and patches it to make it usable in React Navigation 4. If you need to make changes, please send a pull request there.
|
51 |
|
52 | If the change is specifically related to React Navigation 4 integration, first run `yarn patch:apply`, then change the files in `src/vendor` to resolve any conflicts and then run `yarn patch:create` to update the patch file with the latest changes.
|
53 |
|
54 | Make sure your code passes TypeScript and ESLint. Run the following to verify:
|
55 |
|
56 | ```sh
|
57 | yarn typescript
|
58 | yarn lint
|
59 | ```
|
60 |
|
61 | To fix formatting errors, run the following:
|
62 |
|
63 | ```sh
|
64 | yarn lint --fix
|
65 | ```
|
66 |
|
67 | ## Docs
|
68 |
|
69 | Documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/en/stack-navigator.html).
|
70 |
|
71 |
|
72 |
|
73 | [build-badge]: https://img.shields.io/circleci/project/github/react-navigation/stack/master.svg?style=flat-square
|
74 | [build]: https://circleci.com/gh/react-navigation/stack
|
75 | [version-badge]: https://img.shields.io/npm/v/react-navigation-stack.svg?style=flat-square
|
76 | [package]: https://www.npmjs.com/package/react-navigation-stack
|
77 | [license-badge]: https://img.shields.io/npm/l/react-navigation-stack.svg?style=flat-square
|
78 | [license]: https://opensource.org/licenses/MIT
|