How to fix the first Screen in a Tab Navigator?

Question

I am using a Stack Navigator inside a Tab Navigator like this:

tab1 -> Stack

    -screen1
    -screen2

tab2 -> Stack

    -screen1
    -screen2

And only screens1 should have the tab navigation in the bottom of the page!

On screen2 of tab1 there is a button that directs to screen2 of tab2, something like this:

() => navigation.navigate("tab2", {screen: "screen2"})

The problem with this navigation happens when I haven't clicked on tab2 yet.

This makes the first screen of tab2 to be screen2 instead of screen1.

Therefore, screen1 does not show tab navigation in the bottom of the page and screen2 show.

How do I fix this?

Answer 1

You can use reset api of the navigator.

https://reactnavigation.org/docs/navigation-actions#reset

You will reset the routes and create a new one according to which tab and screen you want to navigate.

For example,

When you want to navigate users to tab2/screen2, you will create the route like below:

routes: [
  { name: 'tab2' { screen: "screen1"} },
  { name: 'tab2' { screen: "screen2"} },
],

The users will see screen2 first, but now they can press back button and go back to screen1.