React Native - Navigation between nested screens - reactjs

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.