react-native-navigation: set screen as root parent-CodePudding

I'm using react-native-navigation with:

a custom animated app loading screen
my home screen

I created a Stack.Navigator as follows:

<Stack.Navigator
    initialRouteName="AnimatedAppLoader"
>
    <Stack.Screen
        name="AnimatedAppLoader"
        component={AnimatedAppLoader}
    />

    <Stack.Screen
        name="Home"
        component={Home}
    />
</Stack.Navigator>

My AnimatedAppLoader waits that the app is ready then navigate to the Home screen through:

navigation.navigate('Home');

The problem is that the Home screen becomes a child of AnimatedAppLoader screen and users can go back to the loader screen.

I tried to disable back button and back gestures but this solution does not seem proper since android users can still go back with the system back button.

Is there a proper way to set my Home screen as the root parent of my app?

CodePudding user response：

use navigation.replace('Home'); replace will replace the current screen with a new one rather than adding a new screen

you can read more at the props

https://reactnavigation.org/docs/navigation-prop/