Optimize memory usage and performance

Prior to [email protected], 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 { useScreens } from 'react-native-screens';
useScreens();

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.