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

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

• javascript
• reactjs
• react-native
• navigation
• react-navigation

3 Answers 3

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)

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

I managed to solve my problem using 'navigation-state' https://reactnavigation/docs/navigation-state/

Any list of a given item in the 'state', you only need to paste to the previous one that is currently and redirect to it.

const handleGoBack = async () => {
    const routesState = navigation.getState().routes
    const registerRoutesState = routesState[routesState.length - 1]

    const nestedRegisterRoutesState = registerRoutesState.state?.routes || []
    const backNestedRegisterRoutesState = nestedRegisterRoutesState[nestedRegisterRoutesState.length - 2]

    // para voltar à rota pai
    if (registerRoutesState.state?.routes.length === 1) {
        if (navigation.canGoBack()) {
            navigation.goBack()
        }

        return
    }

    navigation.navigate({ key: backNestedRegisterRoutesState.key! })
}