React-Native Nested Navigation and Deep Links

Question

I'm in trouble:

• I have a nested navigation you can see there as a schema : AppNavigator.tsx ( contains Login/Auth screen ) -> Logged.tsx -> OnboardingNavigator.tsx (If new account) -> OnboardedNavigator.tsx (If known account)

OnboardedNavigator.tsx stack contains all my user screens + a TabBarIcon.tsx my Home.tsx screen belongs to OnboardedNavigator.tsx Stack.

I have as well a Notifications.tsx screen I'm targeting below as an example for routing with any deep link.

So at the end my app.tsx looks like this:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import Amplify, {Auth} from 'aws-amplify';
import React, {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RNBootSplash from 'react-native-bootsplash';
import 'react-native-gesture-handler';
import {Provider as PaperProvider} from 'react-native-paper';
import awsconfig from './aws-exports';
import {MySpeedyTheme} from './src/assets/styles/theme';
import AppNavigator from './src/navigation/AppNavigator';
import {requestUserPermission} from './src/utils/services/notificationServices';
import countries from 'i18n-iso-countries';
import {StatusBar} from 'react-native';

// import {withAuthenticator} from 'aws-amplify-react-native';
Amplify.configure(awsconfig);
Auth.configure(awsconfig);

const App = () => {
  setSupportedLanguages();
  useEffect(() => {
    requestUserPermission();
  }, []);

  const linking = {
    prefixes: ['carool://', 'https://carool.page.link'],
    config: {
      screens: {
        Home: 'HomePath',
        Notifications: {
          path: 'Notifications/',
        },
      },
    },
  };

  return (
    <NavigationContainer linking={linking} onReady={() => RNBootSplash.hide()}>
      <PaperProvider theme={MySpeedyTheme}>
        <StatusBar barStyle={'light-content'} />
        <AppNavigator />
      </PaperProvider>
    </NavigationContainer>
  );
};

const setSupportedLanguages = () => {
  // Register i18n countries support languags.
  countries.registerLocale(require('i18n-iso-countries/langs/en.json'));
  countries.registerLocale(require('i18n-iso-countries/langs/fr.json'));
};

export default App;

I want this command (

npx uri-scheme open carool://Notifications --android

) to go directly on my Notifications.tsx screen as mentioned in my "config" above.

I obviously introduced all the Android/iOS meta-code following those references:

1. https://reactnavigation.org/docs/deep-linking/
2. https://medium.com/tribalscale/working-with-react-navigation-v5-firebase-cloud-messaging-and-firebase-dynamic-links-abf79bbef34e

I definitely did something wrong and I would be happy to receive any form of help about my case of Deep-links implementation.

Here a view of my Onboarded.tsx stack navigator:

import {NavigatorScreenParams} from '@react-navigation/core';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import AnalysesContextProvider from '../contexts/Analyses/AnalysesContextProviders';
import TyresContextProvider from '../contexts/Tyres/TyresContextProvider';
import LastAnalyse from '../screens/lastanalyse/LastAnalyse';
import NotFound from '../screens/notfound/NotFound';
import Photoshoot from '../screens/photoshoot/Photoshoot';
import I18n from '../utils/i18n.util';
import BottomTabNavigator, {BottomTabParamList} from './BottomTabNavigator';
import Notifications from '../screens/notifications/Notifications';
import {StatusBar} from 'react-native';
import {useTheme} from 'react-native-paper';

export type OnboardedStackParamList = {
  Root: NavigatorScreenParams<BottomTabParamList> | undefined;
  Home: undefined;
  NotFound: undefined;
  Photoshoot?: {redo: boolean};
  LastAnalyse: undefined;
  Notifications: undefined;
};

/**
 * A root stack navigator is often used for displaying modals on top of all other content.
 * https://reactnavigation.org/docs/modal
 */
const Stack = createStackNavigator<OnboardedStackParamList>();

const OnboardedNavigator = () => {
  const {colors} = useTheme();
  return (
    <AnalysesContextProvider>
      <TyresContextProvider>
        <StatusBar barStyle="light-content" />
        <Stack.Navigator initialRouteName="Root">
          <Stack.Screen
            name="Root"
            component={BottomTabNavigator}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="Photoshoot"
            component={Photoshoot}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="LastAnalyse"
            component={LastAnalyse}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="Notifications"
            component={Notifications}
            options={{
              title: 'Mes Notifications',
              headerStyle: {
                backgroundColor: colors.accent,
                borderBottomLeftRadius: 20,
                borderBottomRightRadius: 20,
              },
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontWeight: 'bold',
                fontFamily: 'Barlow-Regular',
                fontSize: 17,
              },
            }}
          />
          <Stack.Screen
            name="NotFound"
            component={NotFound}
            options={{title: I18n.t('NOT_FOUND_PAGE.PAGE_TITLE')}}
          />
        </Stack.Navigator>
      </TyresContextProvider>
    </AnalysesContextProvider>
  );
};

export default OnboardedNavigator;