react native can not go from login to homescreen-CodePudding

im want to go to homeScreen after login, here is my app.js

const [auth, setAuth] = useState(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    RNSecureStorage.get('authState').then(a => {
      setLoading(false)
      const tokenAuth = JSON.parse(a)
      console.log('auth', tokenAuth.accessToken)
      setAuth(tokenAuth)
      axios.defaults.headers.common['Authorization'] = 'Bearer'   tokenAuth.accessToken;
      ApiHelper.getData(ApiConstant.GET_MASTER_INFO, '_getMasterInfoApi')
        .then(data => {
            console.log('data', data)
        })
    }).finally(() => {
      setLoading(false)
    })
    LogBox.ignoreLogs(['Animated: `useNativeDriver`',
      'Require cycle:']);

    return () => {
      RootNavigation.isReadyRef.current = false
    };
  }, []);


  if (loading) {
    return <ContinueSplashScreen/>
  }
 <NavigationContainer ref={RootNavigation.navigationRef}
        onReady={() => {
          SplashScreen.hide()
          RootNavigation.isReadyRef.current = true
        }}>
        <Stack.Navigator>
          {auth ? (
              <Stack.Screen name="HomeScreen"
                component={HomeScreen}
                options={{
                  presentation: 'fullScreenModal',
                  headerShown: false
                }} />
          ) : (
              <Stack.Screen name="LoginScreen"
                component={LoginScreen}
                options={{
                  presentation: 'fullScreenModal',
                  headerShown: false,
                  unmountInactiveRoutes: true
                }} />
          )
          }
        </Stack.Navigator>
      </NavigationContainer>

after login success, im using

RootNavigation.navigate('HomeScreen')

but i got this error:

The action 'NAVIGATE' with payload {"name":"HomeScreen"} was not handled by any navigator

im just follow with reactnative.dev tutorial, but im stucking with change screen after login, can anyone give me some provides? Thanks in advance

CodePudding user response：

Looking at your code, the variable auth defines if the HomeScreen OR LoginScreen is being loaded. That means, only one screen will exist at a time. You will NEVER be able to navigate from one screen to another since one of them will ALWAYS not exist. Ideally auth should be a variable defined in a Context and your Navigator is wrapped in this Context Provider so that you will be automatically sent to the Homescreen if auth is set to true in your login method. That being said, you are not quite following best practices to implement an Authentication flow in React Native. Luckily, React Navigation has an own guide in their docs on how to do this. With the help of this guide, you should be able to get your Authentication up and running in minutes, hope this helps!

CodePudding user response：

Use the default navigation from props to navigate from one screen to another screen like below

  navigation.navigate('HomeScreen')