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

Cannot navigate to conditionally set Screen with react native navigation

$
0
0

I am fairly new to react native and it could be that I have set up my code poorly, however, I have my Navigator conditionally set - based on if the user is logged in or not.

const App: React.FunctionComponent<{}> = () => {  const auth = useAppSelector((state) => state.auth.value);  return (<NavigationContainer>      {auth == null ? (<Stack.Navigator screenOptions={{headerShown: false}}><Stack.Screen name="Sign In" component={LoginScreen} /><Stack.Screen name="Register" component={RegisterScreen} /></Stack.Navigator>      ) : (<Drawer.Navigator          initialRouteName="HomeScreen"          drawerContent={(props) => <CustomDrawerContent {...props} />}          drawerContentOptions={{            activeTintColor: color.primaryDark,            itemStyle: {              backgroundColor: 'transperant',              borderColor: color.primaryDark,              borderBottomWidth: 1,              opacity: 0.8,            },          }}          drawerStyle={styles.drawer}><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Notifications" component={NotificationsScreen} /></Drawer.Navigator>      )}</NavigationContainer>  );};

As seen in the code above, the navigation will be set based on if auth is set, which is the auth token of the user. This works great and the problem that I am having is when logging out.

The log out button is in the Drawer:

function CustomDrawerContent(props: DrawerContentComponentProps) {  const dispatch = useAppDispatch();  const onLogOutPress = () => {    dispatch(logOut());    props.navigation.navigate('Sign In');  };  return (<DrawerContentScrollView      {...props}      contentContainerStyle={styles.drawerContentContainer}><View style={styles.drawerUpperItemsAlignment}><DrawerItemList {...props} /></View><DrawerItem        label="Logout"        onPress={onLogOutPress}        style={styles.drawerBottomItems}      /></DrawerContentScrollView>  );}

Where the redux logOut action only resets the token state. When clicking on the log out button, I get the error

ERROR The action 'NAVIGATE' with payload {"name":"Sign In"} was not handled by any navigator.

Do you have a screen named 'Sign In'?

I assume this happens because of conditionally rendering the navigation (based on auth). But if that is the case, how can I have the "Sign In" screen available in the navigation of the drawer?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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