Question 399326 in React native Question posted in
The official React Native documentation can be found here.

I can't reset initialRoute screen in my root stack – React Native

I am using @react-navigation/native upgraded current version but i am trying to reset the index 0 using the CommonAction.reset() not working
scenerio: I am in the login page once i loggined the splash screen in my root stack initially showing 3 seconds delay then navigate tot eh dashboard my question is why the splash screen is showing initially i already tried lot of things to reset the initialScreen while login or logout not working

type SplashScreenProp = NativeStackNavigationProp<RootStackParamList, 'Splash'>;

const Splash = () => {
    const navigation = useNavigation<SplashScreenProp>();
    navigation.dispatch(
                    CommonActions.reset({
                        index: 0,
                        routes: [{ name: 'TabRoot' }],
                    })
                );

const RootNavigator = () => {
    return (
        <HeaderButtonsProvider stackType="native">
            <RootStack.Navigator
                screenOptions={{
                    headerBackTitleVisible: false,
                    headerTitleStyle: screenOptions,
                    headerTitleAlign: 'center',
                }}>
                <RootStack.Screen name="Splash" component={Splash} options={{ title: '', headerShown: false }} />
                <RootStack.Screen name="Login" component={Login} options={{ title: '', headerShown: false, animation: 'fade' }} />
                <RootStack.Screen name="TabRoot" component={TabNavis} options={{ title: '', headerShown: false }} />
                <RootStack.Screen
                    name="Settings"
                    component={Settings}
                    options={{
                        title: 'Settings',
                        headerTitleStyle: screenOptions,
                    }}
                />
Tags:

2

Answers


  1. 0

    You can directly reset to particular screen by writing below code:

     navigation.reset({ routes: [{ name: 'Your Screen Name' }] })
    Login or Signup to reply.
  2. 0

    You can solve this issue using conditional rendering.
    For example, like this:

    <Stack.Navigator screenOptions={{ headerShown: false }}>
  {appInitialized ? (
    <Stack.Screen name={STACKS.AuthStack} component={AuthStackNavigator} />
  ) : (
    <Stack.Screen name={STACKS.SplashScreen} component={SplashScreen} />
  )}
</Stack.Navigator>

    Alternatively, you can display the splash screen in a modal to avoid using it in the navigation since it’s only needed during the project initialization.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search