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.

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.

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

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.

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.

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

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.

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

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.

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

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.

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

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

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.

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.

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.

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://cowboycode.co.uk/

Software Developer in the UK. With a keen passion for React Native & C#. Blog — https://cowboycode.co.uk/