Deep Linking is the reason why you click on a link, and it opens up an app that’s installed on your device. Most of the time, it directly opens up particular screens in the app. Implementing Deep linking in your app means easing up the user experience of your application so that users can be directed to a screen in your application without manually opening and navigating the app.
How can this functionality be set up in a React Native project? That’s what I will be going over in this article. I will explain how it works and how to implement it on Android and iOS, and then I will show live instances of deep linking in a React Native application.
You can get the complete source code of this tutorial here on Github.
To follow along with this tutorial, basic knowledge of React Native is important, and you should have React Native set up on your computer. An Android and an iOS simulator should also be set up for testing the application. You can learn more about how you can set up React Native and the Android and iOS simulators here. Also, you should have a basic understanding of React Navigation and how to set it up in your React Native project. Click here to learn more about React Navigation.
How Deep Linking Works
Deep linking is the configuring of an application and the screens of that application so that the application can be launched and navigate to a screen within the application when a certain link is accessed.
This means that the application is configured with a unique URI, the URI Scheme. The purpose of this URI scheme is to locate and launch the application as long as it’s installed on the device. For the application to now navigate to a screen, prefixes must be set up that will match the URI scheme. These prefixes must be set to the same URI scheme on which the application was configured. If not, the application will be launched when the URI is accessed but won’t be able to navigate to any screen.
Once the prefixes have been set to match the URI scheme, there should be a mapping of the screens in the application with their path so that when the path is attached to the URI, the application can directly navigate to the screens.
Setting up Deep Linking in a React Native Project
This tutorial will show you how to set up deep linking in a React Native project using React Navigation and delve into the tutorial. Instead of initializing a React Native project, I have set up a demo project upon which I will demonstrate this tutorial. Click here to access the demo project on Github. Use the commands below to clone it and download the node modules alongside the iOS dependencies for this project.
# Navigate to the ios folder and Install iOS dependencies cd ios && pod install
#Navigate back to the Project root folder cd ..
#Run on Android Emulator npx react-native run-android
#Run on iOS Simulator npx react-native run-ios
After building the demo project on your Android and iOS emulators, you should have it show up like this:
Setting up Deep Linking in Android and Setting Android URI Scheme
To set up Deep Linking in Android, you will need to modify a few things in the AndroidManifest.xml file, or you can use a package to handle the setup. In this tutorial, I will be using the manual route which involves modifying the AndroidManifest.xml manually. To learn more about using the package to configure Android, click here.
Moving on, navigate to android/app/src/main/AndroidManifest.xml. You will be modifying the launchMode of MainActivity to singleTask. If it is set to singleTask by default, you won’t need to modify it.
Next, add a new intent-filter inside the MainActivity and set the android:scheme to your URI scheme; see below:
After setting this, using the commands stated above, rebuild your project in your Android emulator.
Setting up Deep Linking in iOS and Configuring iOS URI Scheme
To set up deep linking in iOS, you must set your URI scheme under URI types in Xcode. Then, you will be required to modify the AppDelegate file before rebuilding the project in your iOS simulator.
Setting the iOS URI Scheme You need to open your React Native iOS project in Xcode. to easily do that, use the command below to navigate to your iOS folder and open the project in Xcode.
cd ios && open RNDeeplinkingProj.xcworkspace
Note that RNDeeplinkingProj is the name of the demo project, so if you called your project a different name, you would be required to use the name of your project instead of RNDeeplinkingProj.
Once your project is open in Xcode, click on the project folder, and from the tabs, click on info. You should scroll till you find URI Types.
Click on the + to add a new URI type. You can input your URI scheme in the identifier and URI schemes field. See the image below:
Configuring Deep linking for iOS Still, in Xcode, click on the dropdown icon next to your project folder and you will find another group with your project name, click on it and double-click on the AppDelegate file to open it.
When it’s open, copy the code below to the top of the file to import RCTLinking to your project.
//Add to the top of the file #import <React/RCTLinkingManager.h>
Next, add the code below just above @end at the bottom of the file.
React Navigation seamlessly integrates with Linking, which React Native provides to handle deep links, and this is how the linking will be made possible.
First, in the App.js folder, I will declare a constant called linking, and inside it, I will input the prefixes and the config. As I said earlier, the prefixes must be the same as you stated in your URI scheme. At the same time, the config will contain a map of your screens in your project.
Once this is set, you should test your application, and to do that, from your project’s root folder, run the commands below in your terminal. You can attach a screen path using the config’s stated paths.
//For Android adb shell am start -W -a android.intent.action.VIEW -d "demoapp://profilescreen/" com.rndeeplinkingproj
Now, clicking this button will navigate you to the settings screen.
It will interest you to know that you can pass some parameters to the screen you are linking to therefore updating the screen when you navigate there. React Navigation provides a method for attaching a parameter to the screen path. Adding a semicolon after the forward slash adds a parameter to the path. You can learn more about how this works here.
To show an example of how this works, I will update the profile screen path with a username so that upon navigation to the profile screen, it will get the username parameter and update the screen.
I am working with a Nested Screen. I mean that to style the bottom tabs I am using for this tutorial, I styled a stack navigation screen and passed it into the bottom tabs component. Therefore, the target screen is inside another navigator.
To pass the parameter to the nested screen, I will do a little more modification to the ProfileScreen because the path has to be properly linked; else, the parameter will return undefined.
The main screen component is the ProfileScreen and the target screen component is Profile which is hidden in the stack navigator screen. The method below is adopted only when you have the target screen nested in another navigator. You can learn more about this here.
We use analytics to understand the usage, to improve user experience and to measure the performance of our website. We anonymise any information we may collate so we can’t identify you personally.