CODEWITHSUNDEEP
react-nativereact-native-navigation
R.Kaka
R.Kaka

Reputation: 167

Problem when mixing TabNavigator and StackNavigator

I have 2 Stacks in a TabNavigator. The structure is as below

StackA
- Screen A
- Screen A1
- Screen A2

StackB
- Screen B
- Screen B1
- Screen B2

TabNavigator
- StackA
- StackB

Now, in screen A, I want to navigate to screen B1. I just use navigate('Screen B1'), the navigating looks successfully. But when I click back button (I my god) I'm on StackB which is showing screen B.

I really expect seeing screen A in this case.

Upvotes: 0

Views: 50

Answers (2)

Auticcat
Auticcat

Reputation: 4489

To do this, you will have to create a custom backButton that let's your screen know where you navigated from. An example would be:

this.props.navigation.navigate('ScreenB1', {lastScreen:"ScreenA1"})   //navigating from stack to other stack with param

Then, the backButton would check about the lastScreen variable and see if it's defined.

<BackButton onPress={({navigation})=>{
    let lastScreen=navigation.state.params.lastScreen
    if (lastScreen) return navigation.navigate(lastScreen)
    else navigation.pop(1)
    }
}

As i dont know how your code looks like i wrote a general situation, but you can change it however you need.

Upvotes: 1

hong developer
hong developer

Reputation: 13906

Currently, Stack A and Stack B are in different stacks. The other stack navigators are within the tab navigator, so they can be moved, but the back button, which is the default stack navigator command, is not moved where you want them to be. Because the initial screen of your stack B is screen B, you will see screen B1 on top of it after the stack of screen B is stacked. If you want to go where you want to go, press the Back button and go to the desired screen

// B1 Screen Back button
navigate('Screen A') 

// OR If you want Screen A to be rendered again,
push('Screen A')

Upvotes: 0

Related Questions