Optimize memory usage and performance
Prior to 2.14.0
, all screens are essentially regular native View
in each platform, which will increase memory usage and make the render tree deep in a heavy-stacked application. This is one of the reason your app is slowing down comparing to native navigation solution.
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 to see the performance gain.
Setup when you are using Expo
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):
// Before rendering any navigation stack
import { enableScreens } from 'react-native-screens';
enableScreens();
Setup in normal react-native applications
You will need to follow the installation instruction from react-native-screens first. After that, you can import the library like mentioned above and enjoy the optimization.