Unexpected go back on react-navigation for nested navigations

Question

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.

• Tab Navigation

  • Home

    • Screen A(Intial)
    • Screen B

  • Trade

    • Screen 1 (Intial)
    • Screen 2
    • Screen 3

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

1. When I navigate to Trade (Screen2) and use the back button, it navigates to Home (ScreenA)

2. 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.

3. 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

Answer 1

When you navigate from one tab to another tab with a nested stack, you will need to pass the initial: false parameter to prevent the first page from being considered the initial.

navigation.navigate('TradeStack', { screen: 'Screen2', initial: false, params: { param_1: 'foo' } })

Then when you press goBack() on Screen2 - it will go up the stack to screen 1 (initial)