Configure DeepLinking with React Navigation

You can handle the Deep Linking by using the linking library available on react-native out-of-the-box; however, it’s a little complex task and so many edge cases to take. As you might already use React Navigation, it would be straightforward to rely on React Navigation to handle your DeepLinking.

First, you must configure your DeepLinking for iOS and Android App before configuring the DeepLink Schema to work with React Navigation.

Deep Linking — Setup for Android

Deep Linking — Setup for iOS

Below I will walk you through how to configure your DeepLinking using React Navigation. You will create a plugin to pass to React Navigation through the linking property.

Configure the Prefix

The prefixes are the schema url we must choose when setting deep linking for iOS and Android apps.

prefixes: ['jlrecharge://', 'https://jlrecharge.com'],

Configure the Get Initial URL function

The function is that when you open the app, it will retrieve the initial url and redirect to the screen associated with deep linking. This function takes a deep link and returns the deep link path to the schema. The url passed into getInitialUrl is the one that opens the app. In our case, it should look like this:

async getInitialURL() {
    const url = await Linking.getInitialURL();
    if (url !== null) {
      return url;
    }
    return 'jlrecharge://home';
  },

Configure the Subscribe function.

The subscribe function listens for urls while the app is active and deep links the user:

subscriber(listener) {
    const onReceiveURL = ({url}) => listner(url);

    Linking.addEventListener('url', onReceiveURL);

    return () => {
      Linking.removeAllListeners('url', onReceiveURL);
    };
  },

Config Mapping between DeepLinking and Screen

The config states where each link should go in the app. The key in each case is the string we want to redirect to. The value is the path that turns there. In our case, it should look like this:

// file route names:
export const REQUEST_SCREEN = 'request';

config: {
    screens: {
      [REQUEST_SCREEN]: {
        path: REQUEST_SCREEN,
      },
    },
  },

Then the complete linking schema for DeepLinking would be the following.

import {Linking} from 'react-native';
import {REQUEST_SCREEN} from './routerNames';

export const linking = {
  prefixes: ['jlrecharge://', 'https://jlrecharge.com'],

  async getInitialURL() {
    const url = await Linking.getInitialURL();
    if (url !== null) {
      return url;
    }
    return 'jlrecharge://home';
  },

  subscriber(listner) {
    const onReceiveURL = ({url}) => listner(url);

    Linking.addEventListener('url', onReceiveURL);

    return () => {
      Linking.removeAllListeners('url', onReceiveURL);
    };
  },

  config: {
    screens: {
      [REQUEST_SCREEN]: {
        path: REQUEST_SCREEN,
      },
    },
  },
};

Connecting DeepLinking Schema to React Navigation

Below is how to pass the deep linking schema to React Navigation.

// import deep linkshema
import {linking} from './deepLinkSchema';

return (
    <NavigationContainer linking={linking}>
      {isAuthenticated ? <DrawerAppRoutters /> : <OnboardingRouters />}
    </NavigationContainer>
  );

Validation & Test

Close your app and then run the command below.

npx uri-scheme open "jlrecharge://request" --ios

You should be taken directly to the request screen.

For Support or if you have any questions, please reach out.

If you have questions or need help, reach out — info@jaalves.com.

Collaboration:

DM on Instagram : https://www.instagram.com/jaa.consulting/

DM on Facebook: https://www.facebook.com/Jaa.Consulting.Official