react-native deep-linking react-navigation intent filters

In this blog, I will explain how to implement deep linking in react-native in two different ways. First, what is deep linking, and why do we need it in our app? What application do you usually see in your day-to-day life? How does that function work?

What is deep linking?

Deep linking refers to a hyperlink that links to a specific page or location within an app or web application.

Why do we need it in our app?

Sometimes you want to share a specific screen of the app with your friend if the app uses deep linking. When users click on the link, it directly navigates to the page user has shared with his friend if the app is installed in his otherwise, depending on the behavior of the developer, they either have linked it to the play store if the app is not installed or to the app, and you will get navigate respectively. This will eventually save you time and increase ease of use.

What application do you see in your day-to-day life?

You share someone's Instagram post, story, or profile with someone, and it navigates to the same page of the app installed inside the app; otherwise, on the web.

Someone message you on Whatsapp, and when you click on the notification, it lands you on the same person's DM.

The same goes with e-commerce website links you want to buy something, you share the link with your papa, and when he clicks on it, he lands on the exact page you share the link to.

Requirements

I will explain everything which will work in Android well for iOS. Please take a look at some other blogs.

Android Dev or Emulator
React Navigation V6

Setup for android

If you wish to receive the intent in an existing instance of MainActivity, you may set the launchMode of MainActivity to singleTask in android/app/src/main/AndroidManifest.xml. Please take a look at the activity documentation for more information.

<activity
  android:name=".MainActivity"
  android:launchMode="singleTask">

You can add intent filters like those mentioned below in the android/app/src/main/AndroidManifest.xml file, allowing the user to open the link in the app or website.

<intent-filter android:autoVerify="true">
              <action android:name="android.intent.action.VIEW" />
              <category android:name="android.intent.category.DEFAULT" />
              <category android:name="android.intent.category.BROWSABLE" />
              <data android:scheme="http" />
              <data android:scheme="https" />
              <data android:host="YOUR_WEBSITE_HOME_PAGE_URL"/>
</intent-filter>

Every Link (URL) has a URL Scheme; some websites are prefixed with https:// or http://, and the http is a URL Scheme. You can make your custom URL scheme. For example, your app name is tomato so you can create a tomato:// URL scheme.

You can also add an extra intent filter to handle this custom URL scheme like this.

<intent-filter>
    ....
    <data android:scheme="tomato" />
</intent-filter>

In this blog, I will explain implementing deep-linking in two ways :

1. Using React-Native Linking API

Now, all you need is to handle two cases :

1. If the app is already open, the app is foregrounded, and a Linking 'url' event is fired

You can do this like this

    const backgroundListener = async () => {
            Linking.addEventListener('url', event => {
                if (event.url) {
                    console.log('URL: ', event.url);
                    //now you can extract params from the URL and can 
                    //navigate to a preferred screen
                }
            });
        };

2. If the app is not already open, it is opened, and the url is passed in as the initialURL

const getInitialURL = async () => {
            const initialURL = await Linking.getInitialURL();
            if (initialURL) {
                console.log('Initial URL: ', initialURL);
                //now you can extract params from the URL and can 
                //navigate to a preferred screen
            }
        };

Some other methods which will help you while deep linking canOpenURL() openURL() sendIntent() . You can read about them in the documentation.

Create a linking file that handles the screens the app will navigate with appropriate params. You can do this:

const config = {
    screens: {
        Home: {
            path: 'home'
            //app will navigate to the home screen if the user clicksthe of             the type 'https://tomato.com/home'        

        },
        Profile: {
            path: 'profile'
        }
    }
};

const linking = {
    prefixes: ['https://tomato.com', 'http://tomato.com'],
    config
};
export default linking;

Now, link this linking file to NavigationContainer like this :

    <NavigationContainer linking={linking}>
        ...
    </NavigationContainer>

Now comes the tricky part of making a path so I can get params to navigate. Suppose you want to handle the URL https://tomato.com/home?q="fruits"&type="big"

It would be best if you defined your path in the linking file, as path: home and react-navigation will give you params {q="fruits", type="big"}. There are other ways of parsing URLs; you can refer to the documentation.

Additional: You can also use Firebase for deep-linking; documentation

That's all. If you have any doubts, feel free to ping me on LinkedIn. Upvote!

Shiv Shankar Kanaujiya's Blog