Skip to content

Commit 48f1529

Browse files
satya164satya164
committed
Update getting started guide
1 parent 6095bfa commit 48f1529

File tree

8 files changed

+102
-212
lines changed

8 files changed

+102
-212
lines changed

‎docs/bottom-tab-navigator.md

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,12 @@ sidebar_label: createBottomTabNavigator
66

77
A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.
88

9-
To use this navigator, you need to install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs):
9+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`@react-navigation/bottom-tabs`](https://github.com/react-navigation/navigation-ex/tree/master/packages/bottom-tabs):
1010

1111
```sh
12-
yarn add @react-navigation/native@next @react-navigation/bottom-tabs@next
12+
yarn add @react-navigation/bottom-tabs@next
1313
```
1414

15-
Now we need to install [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
16-
17-
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
18-
19-
```sh
20-
expo install react-native-safe-area-context
21-
```
22-
23-
If you are not using Expo, run the following:
24-
25-
```sh
26-
yarn add react-native-safe-area-context
27-
```
28-
29-
If you are using Expo, you are done. Otherwise, continue to the next steps.
30-
31-
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
32-
33-
```sh
34-
cd ios
35-
pod install
36-
cd ..
37-
```
38-
39-
Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
40-
4115
## API Definition
4216

4317
To use this tab navigator, import it from `@react-navigation/bottom-tabs`:

‎docs/drawer-navigator.md

Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,73 +6,12 @@ sidebar_label: createDrawerNavigator
66

77
Component that renders a navigation drawer which can be opened and closed via gestures.
88

9-
To use this navigator, you need to install [`@react-navigation/drawer`](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer):
9+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`@react-navigation/drawer`](https://github.com/react-navigation/navigation-ex/tree/master/packages/drawer):
1010

1111
```sh
12-
yarn add @react-navigation/native@next @react-navigation/drawer@next
12+
yarn add @react-navigation/drawer@next
1313
```
1414

15-
Now we need to install [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated), [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
16-
17-
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
18-
19-
```sh
20-
expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context
21-
```
22-
23-
If you are not using Expo, run the following:
24-
25-
```sh
26-
yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
27-
```
28-
29-
If you are using Expo, you are done. Otherwise, continue to the next steps.
30-
31-
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
32-
33-
```sh
34-
cd ios
35-
pod install
36-
cd ..
37-
```
38-
39-
To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary modifications to `MainActivity.java`:
40-
41-
```diff
42-
package com.reactnavigation.example;
43-
44-
import com.facebook.react.ReactActivity;
45-
+ import com.facebook.react.ReactActivityDelegate;
46-
+ import com.facebook.react.ReactRootView;
47-
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
48-
49-
public class MainActivity extends ReactActivity {
50-
51-
@Override
52-
protected String getMainComponentName() {
53-
return "Example";
54-
}
55-
56-
+ @Override
57-
+ protected ReactActivityDelegate createReactActivityDelegate() {
58-
+ return new ReactActivityDelegate(this, getMainComponentName()) {
59-
+ @Override
60-
+ protected ReactRootView createRootView() {
61-
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
62-
+ }
63-
+ };
64-
+ }
65-
}
66-
```
67-
68-
Then add the following at the top of your entry file, such as `index.js` or `App.js`:
69-
70-
```js
71-
import 'react-native-gesture-handler'
72-
```
73-
74-
Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
75-
7615
## API Definition
7716

7817
To use this drawer navigator, import it from `@react-navigation/drawer`:

‎docs/getting-started.md

Lines changed: 82 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ title: Getting started
44
sidebar_label: Getting started
55
---
66

7-
React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.
8-
9-
Before you commit to using React Navigation for your project, you might want to read the [anti-pitch](pitch.md) — it will help you to understand the tradeoffs that we have chosen along with the areas where we consider the library to be deficient currently.
10-
117
## What to expect
128

139
If you're already familiar with React Native then you'll be able to get moving with React Navigation quickly! If not, you may want to read sections 1 to 4 (inclusive) of [React Native Express](http://reactnativeexpress.com/) first, then come back here when you're done.
@@ -16,7 +12,7 @@ What follows within the _Fundamentals_ section of this documentation is a tour o
1612

1713
## Installation
1814

19-
Install the required packages in your React Native project.
15+
Install the required packages in your React Native project:
2016

2117
```bash
2218
yarn add @react-navigation/native@next
@@ -28,7 +24,83 @@ Or with npm
2824
npm install @react-navigation/native@next
2925
```
3026

31-
> When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional configuration.
27+
React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.
28+
29+
The libraries we will install now are [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated), [`react-native-screens`](https://github.com/kmagiera/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context). If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.
30+
31+
#### Installing dependencies into an Expo managed project
32+
33+
In your project directory, run:
34+
35+
```sh
36+
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context
37+
```
38+
39+
This will install versions of these libraries that are compatible.
40+
41+
You can now continue to ["Hello React Navigation"](hello-react-navigation.html) to start writing some code.
42+
43+
#### Installing dependencies into a bare React Native project
44+
45+
In your project directory, run:
46+
47+
```sh
48+
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
49+
```
50+
51+
> Note: You might get warnings related to peer dependencies after installation. They are usually caused my incorrect version ranges specified in some packages. You can safely ignore most warnings as long as your app builds.
52+
53+
From React Native 0.60 and higher, [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md). So you **don't need to run** `react-native link`.
54+
55+
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
56+
57+
```sh
58+
cd ios
59+
pod install
60+
cd ..
61+
```
62+
63+
To finalize installation of `react-native-screens` for Android, add the following two lines to `dependencies` section in `android/app/build.gradle`:
64+
65+
```gradle
66+
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
67+
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
68+
```
69+
70+
To finalize installation of `react-native-gesture-handler` for Android, make the following modifications to `MainActivity.java`:
71+
72+
```diff
73+
package com.reactnavigation.example;
74+
75+
import com.facebook.react.ReactActivity;
76+
+ import com.facebook.react.ReactActivityDelegate;
77+
+ import com.facebook.react.ReactRootView;
78+
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
79+
80+
public class MainActivity extends ReactActivity {
81+
82+
@Override
83+
protected String getMainComponentName() {
84+
return "Example";
85+
}
86+
87+
+ @Override
88+
+ protected ReactActivityDelegate createReactActivityDelegate() {
89+
+ return new ReactActivityDelegate(this, getMainComponentName()) {
90+
+ @Override
91+
+ protected ReactRootView createRootView() {
92+
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
93+
+ }
94+
+ };
95+
+ }
96+
}
97+
```
98+
99+
Then 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`:
100+
101+
```js
102+
import 'react-native-gesture-handler';
103+
```
32104

33105
Now, we need to wrap the whole app in `NavigationNativeContainer`. Usually you'd do this in your entry file, such as `index.js` or `App.js`:
34106

@@ -45,4 +117,8 @@ export default function App() {
45117
}
46118
```
47119

120+
> Note: When you use a navigator (such as stack navigator), you'll need to follow the installation instructions of that navigator for any additional dependencies. If you're getting an error "Unable to resolve module", you need to install that module in your project.
121+
122+
Now you are ready to build and run your app on the device/simulator.
123+
48124
Continue to ["Hello React Navigation"](hello-react-navigation.md) to start writing some code.

‎docs/material-bottom-tab-navigator.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ A material-design themed tab bar on the bottom of the screen that lets you switc
1010

1111
This wraps the [`BottomNavigation`](https://callstack.github.io/react-native-paper/bottom-navigation.html) component from [`react-native-paper`](https://reactnativepaper.com). If you [configure the Babel plugin](https://callstack.github.io/react-native-paper/getting-started.html), it won't include the whole `react-native-paper` library in your bundle.
1212

13-
To use this navigator, you need to install [`@react-navigation/material-bottom-tabs`](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs):
13+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`@react-navigation/material-bottom-tabs`](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-bottom-tabs):
1414

1515
```sh
16-
yarn add @react-navigation/native@next @react-navigation/material-bottom-tabs@next react-native-paper
16+
yarn add @react-navigation/material-bottom-tabs@next react-native-paper
1717
```
1818

1919
This API also requires that you install `react-native-vector-icons`! If you are using Expo, it will just work out of the box. Otherwise, [follow these installation instructions](https://github.com/oblador/react-native-vector-icons#installation).

‎docs/material-top-tab-navigator.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ A material-design themed tab bar on the top of the screen that lets you switch b
88

99
This wraps [`react-native-tab-view`](https://github.com/react-native-community/react-native-tab-view).
1010

11-
To use this navigator, you need to install [`@react-navigation/material-top-tabs`](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs):
11+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`@react-navigation/material-top-tabs`](https://github.com/react-navigation/navigation-ex/tree/master/packages/material-top-tabs):
1212

1313
```sh
14-
yarn add @react-navigation/native@next @react-navigation/material-top-tabs@next react-native-tab-view
14+
yarn add @react-navigation/material-top-tabs@next react-native-tab-view
1515
```
1616

1717
Now we need to install [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler) and [`react-native-reanimated`](https://github.com/software-mansion/react-native-reanimated).

‎docs/native-stack-navigator.md

Lines changed: 2 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,10 @@ By default the stack navigator is configured to have the familiar iOS and Androi
1010

1111
This uses native primitives (`UINavigationController` on iOS and `Fragment` on Android) for navigation using [`react-native-screens`](https://github.com/kmagiera/react-native-screens) under the hood, as opposed to the JS based stack navigator. While this provides native feeling and performance, it's not as customizable.
1212

13-
To use this navigator, you need to install [`@react-navigation/native-stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack):
13+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`@react-navigation/native-stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/native-stack):
1414

1515
```sh
16-
yarn add @react-navigation/native@next @react-navigation/native-stack@next
17-
```
18-
19-
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
20-
21-
```sh
22-
expo install react-native-screens
23-
```
24-
25-
If you are not using Expo, run the following:
26-
27-
```sh
28-
yarn add react-native-screens
29-
```
30-
31-
If you are using Expo, you are done. Otherwise, continue to the next steps.
32-
33-
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
34-
35-
```sh
36-
cd ios
37-
pod install
38-
cd ..
39-
```
40-
41-
To finalize installation of `react-native-screens` for Android, add the following two lines to dependencies section in `android/app/build.gradle`:
42-
43-
```gradle
44-
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
45-
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
16+
yarn add @react-navigation/native-stack@next
4617
```
4718

4819
Make sure to enable `react-native-screens`. This needs to be done before our app renders. To do it, add the following code in your entry file (e.g. `App.js`):
@@ -53,8 +24,6 @@ import { enableScreens } from 'react-native-screens';
5324
enableScreens();
5425
```
5526

56-
Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
57-
5827
## API Definition
5928

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

‎docs/stack-navigator.md

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,80 +8,12 @@ Provides a way for your app to transition between screens where each new screen
88

99
By default the stack navigator is configured to have the familiar iOS and Android look & feel: new screens slide in from the right on iOS, fade in from the bottom on Android. On iOS the stack navigator can also be configured to a modal style where screens slide in from the bottom.
1010

11-
To use this navigator, you need to install [`@react-navigation/stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/stack):
11+
To use this navigator, ensure that you have [react-navigation and its dependencies installed](getting-started.md), then install [`@react-navigation/stack`](https://github.com/react-navigation/navigation-ex/tree/master/packages/stack):
1212

1313
```sh
14-
yarn add @react-navigation/native@next @react-navigation/stack@next @react-native-community/masked-view
14+
yarn add @react-navigation/stack@next @react-native-community/masked-view
1515
```
1616

17-
Now we need to install [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler), [`react-native-screens`](https://github.com/kmagiera/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
18-
19-
If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
20-
21-
```sh
22-
expo install react-native-gesture-handler react-native-screens react-native-safe-area-context
23-
```
24-
25-
If you are not using Expo, run the following:
26-
27-
```sh
28-
yarn add react-native-gesture-handler react-native-screens react-native-safe-area-context
29-
```
30-
31-
If you are using Expo, you are done. Otherwise, continue to the next steps.
32-
33-
To complete the linking on iOS, make sure you have [Cocoapods](https://cocoapods.org/) installed. Then run:
34-
35-
```sh
36-
cd ios
37-
pod install
38-
cd ..
39-
```
40-
41-
To finalize installation of `react-native-screens` for Android, add the following two lines to `dependencies` section in `android/app/build.gradle`:
42-
43-
```gradle
44-
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
45-
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
46-
```
47-
48-
To finalize installation of `react-native-gesture-handler` for Android, be sure to make the necessary modifications to `MainActivity.java`:
49-
50-
```diff
51-
package com.reactnavigation.example;
52-
53-
import com.facebook.react.ReactActivity;
54-
+ import com.facebook.react.ReactActivityDelegate;
55-
+ import com.facebook.react.ReactRootView;
56-
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
57-
58-
public class MainActivity extends ReactActivity {
59-
60-
@Override
61-
protected String getMainComponentName() {
62-
return "Example";
63-
}
64-
65-
+ @Override
66-
+ protected ReactActivityDelegate createReactActivityDelegate() {
67-
+ return new ReactActivityDelegate(this, getMainComponentName()) {
68-
+ @Override
69-
+ protected ReactRootView createRootView() {
70-
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
71-
+ }
72-
+ };
73-
+ }
74-
}
75-
```
76-
77-
Then add the following at the top of your entry file, such as `index.js` or `App.js`:
78-
79-
```js
80-
import 'react-native-gesture-handler';
81-
```
82-
83-
Finally, run `react-native run-android` or `react-native run-ios` to launch the app on your device/simulator.
84-
8517
## API Definition
8618

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

0 commit comments

Comments
 (0)