How to add Deep Linking to an Android app in React-Native

This article will be about how to add deep linking to an Android app in React-Native.

Firstly we will need to create a react-native project using the command below.

react-native init deeplinkandroidproject

Once the project has finished creating open it in your preferred code editor and within the root of the project create a folder called “components” and within this folder create a javascript file named “Movie” and another javascript file called “Song”.

Our next process is to install the package “react-navigation”, since this is the most popular package to create/develop navigation within a react-native I thought it suitable to use this.

Install react-navigation using the command below.

npm install react-navigation

We will now need to install the other packages that “react-navigation” relies on and the command to do this is below.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Once all of those have been installed we will need to add the pod dependencies for the ios folder, run the below in the terminal to do this.

cd ios; pod install; cd ..

To finish the installation of react-native-gesture-handler we need to add some extra code to the “MainActivity.java” file found in our Android project.

You will first need to add the below 3 lines of imports to the top of “MainActivity.java” which is found in the android/app/src/main/java folder.

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

We then need to add an additional method to the “MainActivity.java” too.

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}

Once you have done this you should restart your metro bundler that opens a terminal for your simulator as well as restart your simulator also as sometimes.

Now open the Movie.js file you created earlier and paste the below code into the file.

import React from 'react';
import { Text } from 'react-native';
class Movie extends React.Component {
render() {
   return <Text>This is a movie page - One of my favourite movies is the Dark Knight!</Text>;
  }
}
export default Movie;

Now open the Song.js file and paste the below into it.

import React from 'react';
import { Text } from 'react-native';
class Song extends React.Component {
   render() {
     return <Text>One of my favourite songs is Working Man by Rush!</Text>;
   }
}
export default Song;

Now we will need to install another package for our stack navigator named “react-navigation-stack” which will be used for our navigation. Install the package below.

npm install react-navigation-stack

Now change your App class or function in “App.js” to the below.

class App extends React.Component{
  render(){
    return(
      <View>
          <View><Text>Hello there and welcome to my app!</Text>    </View></View>
          )
       }
}

After you have done this we need to import the “Song.js” and “Movie.js” components to our “App.js” file to use in our stack navigator.

import Movie from './components/Movie';
import Song from './components/Song';

We also need to import the “createStackNavigator” from “react-navigation-stack” and import “createAppContainer” from “react-navigation” at the top of “App.js”.

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

We now need to add the components we imported “Movie” and “Song” to our stack navigator using the below.

const MyAppNavigator = createStackNavigator(
{Home: { screen: App },
Movie: { screen: Movie },
Song: { screen: Song }},
{
initialRouteName: "Home"
}
);

We also set our App component to the Home screen and set our initial/default route to be the “Home” route.

We will now need to create an app container using the “createAppContainer” component imported from “react-navigation”, it will have one parameter which will be the variable containing our stack navigator.

const MyAppNavigator = createAppContainer(MyStackNavigator)

We will make “MyAppNavigator” the default export for the file “App.js” so remember to comment out/remove the original default export “export default App.js” so instead we now have the below.

export default MyAppNavigator;

Next you will need to open the project in Android studio using the build.gradle file found within the android folder in the react native project and run the app by clicking on the green triangle.

After doing this you should see a screen like the below, ignore the weird circle thing.

We will now begin to configure deep linking for Android, to do this we need to add an intent to our AndroidManifest.xml file which is located in the /src/main folder. We need to add an intent filter of type VIEW.

An intent in Android is a messaging object you can use to ask another app to do something. We have given our intent filter a category of “default” and “browsable”, “browsable” category determines what the app/device shall do when it clicks on a link with the intent scheme name. I have given intent a scheme of “deeplinkapp” which we will use later to load a specific component from the Android app.

<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="deeplinkapp" />
</intent-filter>

We will now need to test our deep linking on Android, however, on the simulator it is a bit frustrating as with Google chrome when you type in a link and search for it it will do a google search instead of going to the link, there may be a way around this but I am not too sure of it yet, however, for this tutorial I will open the project in Android Studio, that means opening Android Studio and opening the build.gradle file found in the “android” folder in our React-Native project. Once you have done this click on the tab labelled “Run” and then click on “Edit Configurations”.

A menu like the below will appear, change the “Launch” option to be URL, then you will need to enter the intent filter scheme we specified in the AndroidManifest file then add a colon and 2 forward slashes plus the name of the component we want to start on default of theapp load which is “Song” so now the default URL is the below.

Click “Apply” and then “Ok” then run the simulator from Android Studio. The simulator device I had configured was Pixel XL API 27 if that helps anyone.

And above is the output of making the change in configurations settings and running the simulator, we are able to use a deep link to load a component within our app project.

Apologies for doing the deep linking within 2 separate articles but I just didn’t want to make 1 article and it be 12–15 minutes long, I hope you learned something from this as I definitely did!

Remember to clap and share this article too ;), have a good day and stay safe!

Check out my blog — https://simplyreact.uk