react-native-screens integrated inside react-navigation or has to be installed?

[Piero87]

Hello,
I haven't understand if react-native-screen is already integrated inside react-navigation or has to be installed separately following your readme, I make this question because the react navigation getting started suggest to install it with this:

yarn add react-native-reanimated react-native-gesture-handler **react-native-screens** react-native-safe-area-context @react-native-community/masked-view

but there is no hint to add this in react-navigation :

enableScreens();

so my question is, If I want to use it I have to follow you readme or it's all integrated in react navigation 5?

[WoLewicki]

You should follow the README if you want to use them. If you do not call the enableScreens(), they won't be enabled in any of the navigators. Also, using native-stack without react-native-screens enabled is impossible.

[Piero87]

@WoLewicki Thank you very much for the answer, so using this plugin will decrease the usage memory improving the speed of the app right?

Another question my code is this:

import { NavigationContainer } from '@react-navigation/native';
import { App } from './src/App';


const App = () => (
  <Provider store={store}>
    <NavigationContainer>
      <Navigator />
    </NavigationContainer>
  </Provider>
);

I have to use enableScreens only here at the root or I have to use it in every component of my app?

[WoLewicki]

@WoLewicki Thank you very much for the answer, so using this plugin will decrease the usage memory improving the speed of the app right?

Yeah, it should do so, especially on Android. On iOS, react-native-screens are disabled for stack navigator currently.

I have to use enableScreens only here at the root or I have to use it in every component of my app?

Only at the root of the project.

[WoLewicki]

Do you have any other questions or can I close it?

[Piero87]

At the moment no! thank you very much!

[Piero87]

@WoLewicki Is this currently true?

On iOS, react-native-screens are disabled for stack navigator currently.

[WoLewicki]

It is no longer true. react-native-screens are now available on both platforms for stack navigator 🎉

[Piero87]

@WoLewicki Thanks for the answer! I already do this in my code:

import { enableScreens } from 'react-native-screens';
....
enableScreens();

But I use this:

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

If I read instead this:

https://github.com/software-mansion/react-native-screens/tree/master/native-stack

I have to do this:

import { createNativeStackNavigator } from 'react-native-screens/native-stack';
const Stack = createNativeStackNavigator();

is that right? So at the moment I'm not using react native screen fully?

[WoLewicki]

createStackNavigator is just a different navigator than createNativeStackNavigator. The second one uses iOS and Android native primitives for navigation, as mentioned in the README. The first one uses JS only, and it is using react-native-screens (but does not have to) to boost the performance by detaching inactive screens.

[Piero87]

@WoLewicki Perfect, thank you, so if I use createNativeStackNavigator what other perfomance I boost?

[WoLewicki]

The boost comes from using platform primitives for navigation, which of course is faster than managing it only in JS.

[WoLewicki]

I will transform this into a discussion since other people may want to look at this thread for some information about the native-stack. Is it ok for you?

[Piero87]

@WoLewicki yes of course

[Piero87]

@WoLewicki summing up, what do you think is best to use?

only: enableScreens() like react navigation suggest or also createNativeStackNavigator? Why they doesn't suggest to use also createNativeStackNavigator?

[WoLewicki]

What do you mean by not suggesting the usage of createNativeStackNavigator? It is documented in the docs and there is no information about it not being good to use: https://reactnavigation.org/docs/native-stack-navigator

[Piero87]

@WoLewicki I'm sorry, i'm completely miss this: https://reactnavigation.org/docs/native-stack-navigator/

Thank you!

[Piero87]

@WoLewicki Sorry to bother you again, I have one last question, I see this code: https://reactnavigation.org/docs/native-stack-navigator/#api-definition and use enableScreen, I put enableScreen at the start of all my code, I have to repeate it every time?

[WoLewicki]

If you want to use react-native-screens in your project, you should put enableScreens only in the root of your project and it is enough. It is described in the README: https://github.com/software-mansion/react-native-screens#usage-with-react-navigation