I am trying to route my user
const tryLogin = async () => {
try {
await firebase.auth().onAuthStateChanged((user) => {
if (user != null) {
props.navigation.navigate("Page1");
} else {
props.navigation.navigate("Page3");
}
});
} catch {
console.log("errrors");
}
};
My navigation looks like this
<NavigationContainer>
<Drawer.Navigator>
{userToken == null ? (
<>
<Drawer.Screen
name="Splash"
component={SplashScreen}
options={{ headerShown: false }}
/>
<Drawer.Screen name="Page1" component={Page1} options={{}} />
<Drawer.Screen name="Page2" component={Page2} options={{}} />
</>
) : (
<>
<Drawer.Screen name="Page3" component={Page3} options={{}} />
<Drawer.Screen name="Page4" component={Page4} />
<Drawer.Screen name="Page5" component={Page5} />
<Drawer.Screen name="Page6" component={Page6} />
<Drawer.Screen name="Page7" component={Page7} />
</>
)}
</Drawer.Navigator>
</NavigationContainer>
It works perfectly fine with page 1&2 component but as I try to redirect to page3 component I get following error The action 'NAVIGATE' with payload {"name":"Page3"} was not handled by any navigator.
You are mixing async and promises function in your code.
You should check for the userToken condition also in the code that triggers the navigate Action.
Based on your logic, if the userToken exists, the Page3 component is not rendered.
This is the reason for the error.
Try to change your code like this:
const tryLogin = async () => {
try {
const user = await firebase.auth().onAuthStateChanged();
if (user !== null) {
props.navigation.navigate('Page1');
} else if (userToken !== null) {
props.navigation.navigate('Page3');
}
} catch {
console.log('errrors');
}
};