2

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

Hilory
  • 236
  • 2
  • 12

2 Answers2

4

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)

jbone107
  • 101
  • 2
  • 7
0

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.

2xSamurai
  • 1,221
  • 12
  • 18
  • 1. I have initialRouteName set as Trade already, Everything works fine when I click on the Tab menu to go Trade. I believe the issue is because I am trying to route to a deeply nested screen (Screen 2 or 3), both screens are routed to through Screen 1 by default, i.e Trade => Screen 1 => (Screen 2 or 3). – Hilory May 09 '22 at 22:16
  • ```navigation.goBack()``` produces the same result – Hilory May 09 '22 at 22:22
  • can you please share your router code for Trade (screens 1, 2 and 3), It would be really helpful – 2xSamurai May 10 '22 at 05:31