react-nativereact-navigationreact-native-navigation

React Native Navigate Back within the same Stack after opening deeply nested Screen


I am trying to achieve the following behaviour:

  1. I receive push notification, with the target screen e.g. 'Order' + id in params
  2. When user presses the notification he is being taken to that 'Order' Screen or 'Product' Screen (I have a switch statement that check notification type)
  3. On that Order Screen he can see 'Go Back' button that takes him back to 'Orders' or 'ProductList' screen and NOT the notifications or root screen (think of it as breadcrumbs /orders <- /orders/[id])

I have managed to get point 1 and 2 to work.

In terms of point 3, Is there any way to achieve that with the way routes are structured or some kind of built in straightforward way? Or do I need to have custom header with hardcoded go back button that takes me to whatever Screen I want.

Currently I don't even see Go Back button, but the navigation.canGoBack returns true.

My routes structure is as follows:

Overall is this structure not an overkill? It's first time I am working on the react native app and I am not sure what is like an industry standard way to organise the navigation.

Should I even provided this option to go back straight to the Orders or it is an expected behaviour to go back to e.g. home page or notifications list?


Solution

  • Use reset to replace the current state and build the desired one. Something like this:

    navigation.reset({
      routes: [
        {
          name: 'Orders',
        },
        {
          name: 'Order',
          params: { id: 1 },
        }
      ]
    })