React Navigation: Switch to different stack and be able to come back to the previous stack

Question

Example, I have a BottomTabNavigator stack having the tabs A and B. The two tabs are themselves navigation stack comprising of the following routes.

A: 
- A1
- A2
B:
- B1
- B2

At any point, my app should be able to navigate the user from any route(say B1 or B2) to a route of another stack (say A1 or A2). I am able to achieve this by adding the routes A1 and A2 to the stack of B, like as below

B:
-B1
-B2
-A1
-A2

I did this so that the routes of A are available to B in the same stack tree.

Even though I am able to achieve this, I wish to be able to navigate back to the route B2 (if I am navigating from B2 to A1, for example). But it's not happening; on pressing back from A1 route. I am not sure if this is the correct approach.

How can I control the navigation and make sure that I go back to the route of the previous stack where I came from.

Answer 1

The way I do this, I am not sure is this a right approach or not, But it works for me. For example if you have two navigation screens A and B and inside A you have A1, A1 and inside B you have B1, B2. You want to go from A1 to B1 and on the back press you want to return to A1.But as we can see you have declared B2 inside other stack, So when B1 loads, on its back press it returns to its parent stack navigator. What you can do is, Declare B1 inside B as well as A. Like this, A: - A1 - A2 - B1 - B2 B: - B1 - B2 - A1 - A2

I am not sure weather this solution is efficient but it works for me for complex navigations.