react native - What is a difference between navigation.navigate(), navigation.push(), navigation.goBack() and navigation.popToTop() if I go back from page to page?

Question

From this and this, I learned that there is a meaningful difference between navigation.navigate() and navigation.push(). Nevertheless, I am still wondering if I can use navigation.navigate() or navigation.push() instead of navigation.goBack() or navigation.popToTop().

In my case, there is one page, and some parameters are included in the navigation. (i.e, through navigation.navigate(param, {...}) or navigation.push(param, {...}). Once I move to another page, some change in variable happened, and now I would like to send back the param with new data to the first page. I considered doing navigation.navigate(param, {...}) or navigation.push(param, {...}) again as it looks I cannot send back any parameters using goBack() or popToTop(), according to this

I checked this, but I am not 100% sure as I think pages might be stacked a lot if a user does the above actions many times.

Answer 1

Lets take an example

Think you have screens A,B and C in the stack and A is the home screen. The actual stack will be an object but for easy understanding i'm using a simple array.

When you start the stack will be [A]

When you do a navigate to B the stack will be [A,B]

And if you push C to the stack from B then it will be [A,B,C]

Now all this is common but now if you do a navigate to B from C then it will unmount C and go back to B and the stack will be [A,B]

If you chose push then it will add a new screen to the stack and stack will be [A,B,C,B] Notice that push always adds a new screen to the stack.

Ignore the push and assume that the stack is [A,B,C] Now if you do goBack from C then it will pop just like the navigate method and go back to B.

But if you do popToTop it will unmount both C and B and make the stack look like this [A].

The difference is that goBack and popToTop does not pass parameters like navigate and push.

There is a way to achieve the same result of popToTop and goBack using navigate and useNavigationState.

The useNavigationState hook will get you the current navigation state which will have the information of all the screens in the stack. The sample navigation state value would be like this

{
  stale: false,
  type: 'stack',
  key: 'stack-A32X5E81P-B5hnumEXkbk',
  index: 1,
  routeNames: ['Home', 'Details', 'MyView', 'ExtView'],
  routes: [
    { key: 'Home-y6pdPZOKLOPlaXWtUp8bI', name: 'Home' },
    {
      key: 'MyView-w-6PeCuXYrcxuy1pngYKs',
      name: 'MyView',
      params: { itemId: 86, otherParam: 'anything you want here' },
    },
  ],
}

As you can see you have the option to use this information to navigate to any screen in the stack. The navigate method can be used like below as well

navigation.navigate({ key: navState.routes[0].key, params: { id: 12 } })

If you use the key 0 then you will be taken to root along with a parameter and it will unmount the screen in the middle.

If you want to go back you can simply do an index - 1 which will give the same effect as goBack

navigation.navigate({ key: navState.routes[navState.Index-1].key, params: { id: 12 } })

So your requirement can be achieved.