Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6290

react native navigation does not navigate to desired screen on button press

$
0
0

I have a main navigator and two navigators nested in it: Auth Navigator and a Root navigator that renders a different screen depending on whether a user exists or not. But It returns this error when I try to navigate to either of the screens:

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

This is my main Navigator:

function _Navigation({  colorScheme,  tokenRedux,}: {  colorScheme: ColorSchemeName;  tokenRedux: any;}) {  const [userExists, setUserExists] = React.useState<boolean>(false);  const [user, setUser] = React.useState<any>();  const getUser = async () => {    const user = await getDataInStorage("USER_AUTH");    if (user?.data?.username) {      setUserExists(true);    } else {      setUserExists(false);    }    setUser(user);    return user;  };  React.useEffect(() => {    getUser();  }, [tokenRedux]);  return (<NavigationContainer      linking={LinkingConfiguration}      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}>      {userExists ? <RootNavigator user={user} /> : <AuthNavigator />}</NavigationContainer>  );}

This is my Root Navigator(Where the problem lies):

function RootNavigator(user: any) {  const currentUser = user?.user?.data;  return (<Stack.Navigator>      {currentUser && currentUser?.userType === "influencer" ? (<Stack.Screen          name="UserType1"          component={UserType1BottomTabNavigator}          options={{ headerShown: false }}        />      ) : (<Stack.Screen          name="UserType2"          component={UserType2BottomTabNavigator}          options={{ headerShown: false }}        />      )}<Stack.Screen        name="Profile"        component={ProfileOverview}        options={{ headerShown: false }}      /><Stack.Screen        name="BioData"        component={BioData}        options={{ headerShown: false }}      /><Stack.Screen        name="NotFound"        component={NotFoundScreen}        options={{ title: "Oops!" }}      />      {/* <Stack.Group screenOptions={{ presentation: "modal" }}><Stack.Screen name="Modal" component={ModalScreen} /></Stack.Group> */}</Stack.Navigator>  );}

When I try to navigate to either the userType1 or userType2 screen, it returns an error:

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

Viewing all articles
Browse latest Browse all 6290

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>