React native navigation: Unable to navigate to the top screen in the stack

user_14171827 0
Viewed 294

My current navigation looks like this

Top Level Stack

  • Login Screen
  • Main App Stack
    • Home Stack
    • Search
    • Settings Tab Stack
      • Settings screen

Im trying to have a sign out button in the settings screen, which when pressed would navigate to the Login Screen

Currently it gives an error The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.

The sign out button code

<View style={{alignSelf: "center"}}>
  <TouchableOpacity onPress={() => { navigation.navigate("Login") }}>
    <Text>Sign Out</Text>
  </TouchableOpacity>
</View>

This is how my top level stack looks like

<NavigationContainer>  
    
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
          headerStyle: { backgroundColor: 'white', height: ScreenHeigth * 0 },
          headerTintColor: '#fff',
      }}>
          
        <Stack.Screen name="Login" component={Login} options={{ title: '', headerLeft: null, gestureEnabled: false }}/>
        <Stack.Screen name="Main" component={Main} options={{ title: '', headerLeft: null, gestureEnabled: false}} />

      
      </Stack.Navigator>
          
    </NavigationContainer>
react-native-navigation expo react-native
1 Answers

Did you try popToTop?

I have changed some code onPress button in signOut view

<View style={{ alignSelf: "center" }}>
   <TouchableOpacity
     onPress={() => {
     navigation.popToTop();
   }}
>
   <Text>Sign Out</Text>
</TouchableOpacity>
user_152254600
Related