I am facing a navigation issue in react-native 0.66.4 and react-navigation 4.4.4.
I have a Tab Navigation setup that looks like this.
Home
Trade
Screen 1 Leads to 2 or 3
I am trying to navigate from Home Tab (Screen A) to Trade Tab (Screen 2 and Screen 3) using separate buttons, I am able to achieve that by doing navigation.navigate('Trade', { screen: 'Screen2', params:{...} }) and navigation.navigate('Trade', { screen: 'Screen3', params:{...} })
The issue I am facing now is that
When I navigate to Trade (Screen2) and use the back button, it navigates to Home (ScreenA)
Navigating to Trade (Screen3) and then using the back button goes this way Trade(Screen3) => Trade(Screen 2) => Home(ScreenA), and like this Trade(Screen2) => Trade(Screen 3) => Home(ScreenA) if I visited Screen 3 first and to achieve this I have to click back twice.
Finally, if I have visited Screen 2 or 3 before clicking on the Trade Tab, it shows that screen rather than Screen 1 (Initial). This is not the kind of behavior I am looking for.
How can I do it such that whenever I go back from either Trade (Screen 2 or Screen 3),it navigates to Trade (Screen1), and also clicking the Trade Tab after visiting either of these screens ( 2 and 3) navigates to Screen 1 (initial)?
How can I na
and also clicking the Trade Tab after visiting either of these screens ( 2 and 3) navigates to Screen 1 (initial)?
To achieve this I think you can use the initialRouteName prop as specified in the official docs(check StackNavigatorConfig). Please try that and let me know how it goes.
https://reactnavigation.org/docs/4.x/stack-navigator
How can I do it such that whenever I go back from either Trade (Screen 2 or Screen 3), it navigates to Trade (Screen1)
Can you do a test for these screens? Create a button and onPress do
navigation.goBack()
and please let me know if everything works fine. I don't have my development environment with me so I'm writing this just from reference.