Skip to content

Commit 27f9be3

Browse files
committed
Update getting started instructions
1 parent e50b0f1 commit 27f9be3

File tree

3 files changed

+59
-3
lines changed

3 files changed

+59
-3
lines changed

versioned_docs/version-6.x/drawer-navigator.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,21 @@ Component that renders a navigation drawer which can be opened and closed via ge
1515
To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/drawer`](https://github.com/react-navigation/react-navigation/tree/main/packages/drawer):
1616

1717
```bash npm2yarn
18-
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
18+
npm install @react-navigation/drawer
19+
```
20+
21+
You also need to install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/) and [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/).
22+
23+
If you have a Expo managed project, in your project directory, run:
24+
25+
```sh
26+
expo install react-native-gesture-handler react-native-reanimated
27+
```
28+
29+
If you have a bare React Native project, in your project directory, run:
30+
31+
```bash npm2yarn
32+
npm install react-native-gesture-handler react-native-reanimated
1933
```
2034

2135
To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:

versioned_docs/version-6.x/material-top-tab-navigator.md

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,21 @@ This wraps [`react-native-tab-view`](https://github.com/react-native-community/r
1717
To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/material-top-tabs`](https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs):
1818

1919
```bash npm2yarn
20-
npm install @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view
20+
npm install @react-navigation/material-top-tabs react-native-tab-view
21+
```
22+
23+
You also need to install [`react-native-pager-view`](https://github.com/callstack/react-native-pager-view).
24+
25+
If you have a Expo managed project, in your project directory, run:
26+
27+
```sh
28+
expo install react-native-pager-view
29+
```
30+
31+
If you have a bare React Native project, in your project directory, run:
32+
33+
```bash npm2yarn
34+
npm install react-native-pager-view
2135
```
2236

2337
## API Definition

versioned_docs/version-6.x/stack-navigator.md

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,21 @@ One thing to keep in mind is that while `createStackNavigator` is extremely cust
1919
To use this navigator, ensure that you have [`@react-navigation/native` and its dependencies (follow this guide)](getting-started.md), then install [`@react-navigation/stack`](https://github.com/react-navigation/react-navigation/tree/main/packages/stack):
2020

2121
```bash npm2yarn
22-
npm install @react-navigation/stack react-native-gesture-handler
22+
npm install @react-navigation/stack
23+
```
24+
25+
You also need to install [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/).
26+
27+
If you have a Expo managed project, in your project directory, run:
28+
29+
```sh
30+
expo install react-native-gesture-handler
31+
```
32+
33+
If you have a bare React Native project, in your project directory, run:
34+
35+
```bash npm2yarn
36+
npm install react-native-gesture-handler
2337
```
2438

2539
To finalize installation of `react-native-gesture-handler`, add the following at the **top** (make sure it's at the top and there's nothing else before it) of your entry file, such as `index.js` or `App.js`:
@@ -30,6 +44,20 @@ import 'react-native-gesture-handler';
3044

3145
> Note: If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms.
3246
47+
Optionally, you can also to install [`@react-native-masked-view/masked-view`](https://github.com/react-native-masked-view/masked-view). This is needed if you want to use UIKit style animations for the header ([`HeaderStyleInterpolators.forUIKit`](#headerstyleinterpolators)).
48+
49+
If you have a Expo managed project, in your project directory, run:
50+
51+
```sh
52+
expo install @react-native-masked-view/masked-view
53+
```
54+
55+
If you have a bare React Native project, in your project directory, run:
56+
57+
```bash npm2yarn
58+
npm install @react-native-masked-view/masked-view
59+
```
60+
3361
## API Definition
3462

3563
To use this navigator, import it from `@react-navigation/stack`:

0 commit comments

Comments
 (0)