React Native - Navigation between nested screens

Question

I have read the documentation regarding navigation between nested screens for react navigation version 5. However, I still keep running into an issue Below is the code for my App.js

export default function App() {
  return (
    <NavigationContainer>
      <Provider store={store}>
          <Stack.Navigator initialRouteName="Login"
          headerMode={'none'}>
            <Stack.Screen name="Login" component={Login}></Stack.Screen>
            <Stack.Screen name="BottomTabs" component={BottomTabs}></Stack.Screen>
          </Stack.Navigator>
      </Provider> 
    </NavigationContainer>
  );
}

Below is the code for the "BottomTabs" component: -

export default function BottomTabs() {
    return (
        <Tab.Navigator initialRouteName="Profile">
            <Tab.Screen name="Profile"component={Profile}></Tab.Screen>
            <Tab.Screen name="Gobble" component={GobbleNavigator}></Tab.Screen>
            <Tab.Screen name="Matches" component={Matches}></Tab.Screen>
            <Tab.Screen name="Chats" component={ChatRoom}></Tab.Screen>
        </Tab.Navigator>
    )
}

In the "Profile" screen, I have a sign out button which, when clicked, executes a function where I call props.navigation.navigate('BottomTabs', {screen: 'Login'}) to go to the login page.

I've tried other things too such as navigation.navigate('BottomTabs', {screen: 'App', params: {screen: 'Login'}) and navigation.navigate('Login')

However, when I click the button, nothing happens. What am I getting wrong here?

Answer 1

There should be a name associated with each screen.

Assuming the Login screen is known as 'Login', then if you want to click a button to navigate to the Login screen, you should be able to do it as:

<Button title="Signout" 
onPress={() => 
this.props.navigation.navigate('Login') } 
/>

However, if you are doing a sign-out operation, you should first say removing your current logged in data --- before you get navigated to the login screen.