Deeplink in react-native with nested navigators, app gets foregrounded but no navigation

Question

I'm trying to deeplink back to my app after a successful authentication in a browser using a redirect URL. There's a few nested navigators in the app itself, so the set up looks like this:

Outer Stack:

        return (
            <SafeAreaProvider>
                <NavigationContainer
                    theme={theme}
                    linking={linking}>
                    <Stack.Navigator
                        screenOptions={{
                            headerShown: false,
                            gestureEnabled: false
                        }}>
                        <Stack.Screen name="Login" component={LandingStackScreen} options={{
                            gestureEnabled: false,
                        }}/>
                         <Stack.Screen name="Home" component={HomeTabScreen} options={{
                            gestureEnabled: false,
                        }}/>
                        <Stack.Screen name="Logout" component={LogoutStackScreen} options={{
                            gestureEnabled: false,
                        }}/>
                        <Stack.Screen name="Register" component={RegistrationStackScreen} options={{
                            gestureEnabled: false,
                        }}/>
                    </Stack.Navigator>
                </NavigationContainer>
            </SafeAreaProvider>
        )
    };
}

Inner Stack 1 (Home Stack):

function HomeTabScreen() {

 return (
            <HomeTab.Navigator
                tabBarOptions={{
                    activeTintColor: '#059693',
                    inactiveTintColor: 'gray',
                }}
                sceneContainerStyle={{backgroundColor: 'transparent'}}
                tabBar={props => <MyTabBar {...props} key={1} />}
            >
                <HomeTab.Screen name="Home" component={HomeStackScreen}/>
                <HomeTab.Screen name="Analytics" component={AnalyticsStackScreen}/>
                <HomeTab.Screen name="Add" component={Testing}/>
                <HomeTab.Screen name="Dummy" component={Testing}/>
                <HomeTab.Screen name="Coach" component={CoachDrawerScreen}/>
                <HomeTab.Screen name="Profile" component={SettingsStackScreen}/>
            </HomeTab.Navigator>
    );
}

And Inner Stack 2 (Analytics Stack):

function AnalyticsStackScreen() {
    return (
        <AnalyticsStack.Navigator
            screenOptions={{
                headerShown: false,
            }}>
            <AnalyticsStack.Screen name="History" component={History} />
            <AnalyticsStack.Screen name="Trends" component={Trends} />
            <AnalyticsStack.Screen name="widgetpage" component={widgetPage} />
            <AnalyticsStack.Screen name="widgetsuccess" component={successfulWidgetLogon} />
        </AnalyticsStack.Navigator>
    );
}

I'm trying to have the app redirect to the widgetsuccess component in the Analytics Stack (inner stack 2). I've set up a linking prop like this:

const linking = {
    prefixes: ['https://myapp.com', 'myapp://'],
    config: {
        screens: {
            Home: {
                screens: {
                    Analytics: {
                        widgetsuccess: "widgetsuccess?:userId&:resource"
                    }
                }
            }
        },
    },
};

I've also changed the Android Manifest to add the "myapp" scheme and "widgetsuccess" host, alongside the android:launchMode="singleTask" and other intent-filter changes that are required. The redirect url will look like this: "myapp://widgetsuccess?userId=xxx-xxx-xxx&resource=xxx".

When the app successfully authenticates and redirects, it simply takes me back to the same page that the app was on originall. I've tried to just redirect to the initial home page, or any other page really and the same thing happens. I've obviously done something wrong, but can't figure out what, so if anyone has an idea, I would really appreciate the help. Cheers.

Answer 1

I had the same problem. The reason was in redirect url.

By your config I would test something like myapp://Home/Analytics/widgetsuccess?userId=xxx-xxx-xxx&resource=xxx

Notice that links like myapp:// works for ios, there is problem with it on android. For android I use intents, url like intent://...

This article may be usefull https://www.adjust.com/blog/dive-into-deeplinking/