react navigation deep linking with stack and tab navigation is not working

1.8k views Asked by At

I'm using react-native v0.68, react-navigation v6.xx

When i open app with url(prefix://home/doctor/:category), it works. But DoctorList components is always first route so I can't use navigation.back() to go TabOne(path: 'home') components. It just appear only one screen(not stack screen) so back button is not shown. How can i set config to use stack navigation??

TabOne, TabTwo, TabThree is Bottom Tab Navigation and DoctorList, DoctorDetail is Stack.screen in TabOne

config: {
        screens: {
          Root: {
            initialRouteName: 'TabOne',
            screens: {
              TabOne: {
                path: 'home',
                screens: {
                  DoctorList: {
                    path: 'doctor/:category',
                    parse: {
                      category: (category: string) => decodeURI(category)
                    }
                  },
                  DoctorDetail: {
                    path: 'detail/:docid/:category',
                    parse: {
                      docid: (docid: string) => decodeURI(docid),
                      category: (category: string) => decodeURI(category)
                    }
                  }
                }
              },
              TabTwo: 'history',
              TabThree: {
                initialRouteName: 'TabThree',
                path: 'mypage', 
                screens: {
                  Notice: 'notice'
                }
              }
            }
          }
        }
      },
2

There are 2 answers

0
Nate Munger On

I'm not 100% sure I understand the question - given your configuration, a deep link to home/doctor/:category would result in you being in the TabOne stack with the only screen being DoctorList. With the default header, no back button would display because you can't go back in the stack.

Your solution likely involves overriding the default stack header, but it's hard to say exactly how. Supposing there were a back button available on your deep link, where would you want it to go?

0
João Paulo On

In navigation.navigate there is an initial:false parameter to not allow the window to be the initial one and obey the flow hierarchy and the goBack button appears. But inside deeplink not exist settings for this.