Skip to content

Commit 0a39180

Browse files
docs: update react-native-screens section
1 parent 00809e3 commit 0a39180

File tree

1 file changed

+28
-7
lines changed

1 file changed

+28
-7
lines changed

versioned_docs/version-6.x/react-native-screens.md

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,37 @@ Prior to `2.14.0`, all screens are essentially regular native `View` in each pla
88

99
With the advent of `react-native-screens`, the native screen optimization is brought possible to React Navigation by bringing the native navigation component (`UIViewController` for iOS, and `FragmentActivity` for Android). By using `react-native-screens`, it is possible for each native platform to optimize the memory usage for screens that are under the view stack and also simplify the native node hierarchy. You can take a look at the comparison [here](https://twitter.com/janicduplessis/status/1039979591815897088?s=21) to see the performance gain.
1010

11+
React Navigation 6 incorporates `react-native-screens` in version >=3.0.0 which means the optimizations are already enabled by default.
1112
## Setup when you are using Expo
1213

13-
By default expo already included `react-native-screens`, all you need to do is pasting the following snippet before your navigation stacks are rendered (typically in an `index.js` or `App.js` file):
14+
Expo SDK 41 and up comes with `react-native-screens` that works out-of-the-box without additional configuration. If you installed dependencies with `expo install` as stated in [Getting started](http://localhost:3000/docs/6.x/getting-started#installing-dependencies-into-an-expo-managed-project) section of documentation you are good to go!
1415

15-
```js
16-
// Before rendering any navigation stack
17-
import { enableScreens } from 'react-native-screens';
18-
enableScreens();
16+
## Setup in normal react-native applications
17+
18+
### Setup on iOS
19+
20+
The installation of `react-native-screens` on iOS is supported by auto-linking, if you made sure the pods are installed with `pod install` in project directory, no other actions are necessary.
21+
22+
### Setup on Android
23+
24+
This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.
25+
26+
You'll need to edit `MainActivity.java` which is located in `android/app/src/main/java/<your package name>/MainActivity.java` file.
27+
28+
Add this method to the body of `MainActivity` class:
29+
```java
30+
@Override
31+
protected void onCreate(Bundle savedInstanceState) {
32+
super.onCreate(null);
33+
}
1934
```
2035

21-
## Setup in normal react-native applications
36+
and make sure to add an import statement at the top of the file:
37+
38+
```java
39+
import android.os.Bundle;
40+
```
41+
42+
and that's everything!
2243

23-
You will need to follow the installation instruction from [react-native-screens](https://github.com/software-mansion/react-native-screens) first. After that, you can import the library like mentioned above and enjoy the optimization.
44+
For more information consult installation instructions in [react-native-screens](https://github.com/software-mansion/react-native-screens#installation) repository.

0 commit comments

Comments
 (0)