Issue with navigation handler when navigate to a new screen

[quyetthang122]

The action 'NAVIGATE' with payload {"name":"Home","params":{"user":{"email":"xxxx","id":"xxx","fullName":"test"}}} was not handled by any navigator #3

[ashutosh-kendurkar]

The action 'NAVIGATE' with payload {"name":"Home","params":{"user":{"email":"xxxx","id":"xxx","fullName":"test"}}} was not handled by any navigator #3

Yes, I too am facing the same issue. As suggested on stackoverflow, i have used below alternative but thats not working either.

`const goToScreen = () => {

    const navigateAction = NavigationActions.navigate({
      routeName: 'Profile',
  
      params: { previous_screen: 'Home' }, // current screen
  
      action: NavigationActions.navigate({ routeName: 'Profile' }), // screen you want to navigate to
    });
  
    navigation.dispatch(navigateAction);
  
  };`

[astewart27]

Hopefully this helps someone in the future, but I think I've found a solution. Almost zero experience with React Native so bare with me. I was able to Login and get redirected to the Home page. Seems as if since the Home Stack.Screen is in a ternary operator that when it initializes it's null? So it for some reason can't find it when it's time to redirect to the Home screen (after Logging in).

I changed this:
<Stack.Navigator> { user ? ( <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> ) : ( <> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </> )} </Stack.Navigator>

to this:

<NavigationContainer> <Stack.Navigator initialRouteName="Login"> <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </Stack.Navigator> </NavigationContainer>

essentially you're just setting the initial route to the Login screen. Then when Login is successful, it navigates to the Home screen.

[tpssim]

Hopefully this helps someone in the future, but I think I've found a solution. Almost zero experience with React Native so bare with me. I was able to Login and get redirected to the Home page. Seems as if since the Home Stack.Screen is in a ternary operator that when it initializes it's null? So it for some reason can't find it when it's time to redirect to the Home screen (after Logging in).

I changed this:
<Stack.Navigator> { user ? ( <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> ) : ( <> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </> )} </Stack.Navigator>

to this:

<NavigationContainer> <Stack.Navigator initialRouteName="Login"> <Stack.Screen name="Home"> {props => <HomeScreen {...props} extraData={user} />} </Stack.Screen> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Registration" component={RegistrationScreen} /> </Stack.Navigator> </NavigationContainer>

essentially you're just setting the initial route to the Login screen. Then when Login is successful, it navigates to the Home screen.

The persistent login functionality won't work with this solution. To make your solution to work..

Change this:
<Stack.Navigator initialRouteName="Login">
To this:
<Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}>

And in the useEffect function chage this:
.then((document) => { const userData = document.data() setLoading(false) setUser(userData) })
To this:
.then((document) => { const userData = document.data() setUser(userData) setLoading(false) })

Initial route is resolved once loading is set to false.

Edit: Here is a better way to fix this: https://reactnavigation.org/docs/auth-flow
In short NAVIGATE should not be used in the first place for moving from login to home.

[fnandoz21]

Does anyone have working code that uses the auth-flow code @tpssim linked in the previous comment?

[mfukano]

Hey @fnandoz21, just stumbled on this too and was able to successfully implement the fix; take a look at my exercise repository here.

Essentially it does work, but you need to be at step 7 to correct the order of setting the user data then resolving the loading flag for persistent login.

[fnandoz21]

@mfukano yes, I kind of landed on code that is very similar to yours. I was asking if anyone had implemented code similar to what @tpssim linked at: https://reactnavigation.org/docs/auth-flow. Thanks for responding to me though.

[tpssim]

Does anyone have working code that uses the auth-flow code @tpssim linked in the previous comment?

https://github.com/tpssim/react-native-firebase
This should work. I also added logout functionality.

[fnandoz21]

Awesome thanks for sharing @tpssim !

[amilahashim]

The action 'NAVIGATE' with payload {"name":"DetailScreen","params":{"places":"name"}} was not handled by any navigator.help