Ben44
Ben44

Reputation: 245

Universal/deep link configuration when the final screen is on another stack

I have a configuration issue with deep/universal links when I want to open a screen that is in another Stack.

Here is the screen composition:

- NavigationContainer
   - AppStack (stack navigator)
      - TabsNavigator (BottomTabNavigator)
        - LoadListScreen (screen component)
        - ...
   - LoadListScreen (screen component)
   - ...

I have a NavigationContainer, inside which I have a Stack navigator (AppStack). Nested within, I have a BottomTabNavigator and a screen for lot details. In the BottomTabNavigator, I have a screen that displays a load list.

Why have LoadDetails in the same navigator as the TabsNavigator? It’s to hide the bottom Tab bar when on the lot details screen (https://reactnavigation.org/docs/hiding-tabbar-in-screens).

const linking = {
  prefixes: ['https://example.com'],
    config: {
      screens: {
        AppStack: {
          screens: {
            TabsNavigator: {
              screens: {
                LoadListStack: {
                  screens: {
                    LoadListScreen: {
                       screens: {
                         LoadDetails: {
                           path: 'loadlist/:id' // This is not working because my screen is not inside LoadListStack
                         },
                    },
                 },
               },
        }
      },
      LoadDetails: 'loadlist/:id', // this is working but it's not what I want (because the user can't go back to the list
    }
  }
}

} };

My goal when I open a link: https://example.com/loadlist?=XYZ is to open the LoadDetails screen via the LoadListScreen. This allows the user to go back and return to the lot list (LoadListScreen).

I'm using:

Do you need more information?

Do you have a solution to go through LoadListScreen before displaying LoadDetails? (knowing that they are in two different Stacks)

Upvotes: 1

Views: 54

Answers (0)

Related Questions