Issue with authentication flow using react-navigation 5.0.5

Viewed 1424

Actual Behaviour:

I'm working on implementing authentication flow for a project. I'm rendering a stack of screens with login screen as the initial route when user is not logged in successfully. And rendering another stack of screens with home screen as initial route when user login is successful.

My issue is that when user login is successful, instead of home screen appearing directly, login screen is appearing for few seconds without allowing any screen interaction and then home screen is appearing with some animation similar to react-navigation push transition.

Expected Behaviour:

I want to display home screen on successful login without any bugs as mentioned above.

Environment:

"react-native": "0.61.5", "@react-navigation/native": "^5.0.5", "@react-navigation/stack": "^5.0.5" "react-native-reanimated": "^1.7.0", "react-native-safe-area-context": "^0.7.3", "react-native-screens": "^2.0.0-beta.7", "@react-native-community/masked-view": "^0.1.6",

Code:

 homeStack = () => {
    return (
      <>
        <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
        <Stack.Screen name="JobsFormsList" component={JobsFormsList} />
        <Stack.Screen name="Forms" component={Forms} />,
        <Stack.Screen name="SignTemp" component={SignTemp}
          options={{ headerShown: false }}
        />
      </>
    );
  }
loginStack = () => {
        return (
          <>
           <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
            <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
            <Stack.Screen name="JobsFormsList" component={JobsFormsList} />
            <Stack.Screen name="Forms" component={Forms} />,
            <Stack.Screen name="SignTemp" component={SignTemp}
              options={{ headerShown: false }}
            />
          </>
        );
      }


 render() {
    return(
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ gestureEnabled: false }}>
        {this.state.user_data === null ? this.loginStack() : this.homeStack()}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
0 Answers
Related