In this article, we are going to build a simple deep linking mechanism in React Native, which takes a user to a specific screen of a sample app, after clicking on a deep link outside the app (e.g. Safari). The output will look like this:
Create a React Native App
To get started, please create a new React Native project by executing the following command:
To be able to support deep linking navigation, let us add the required npm packages. Once the project directory has been generated, navigate inside the project folder from your terminal and install the following dependencies.
The next step is to link all the libraries you just installed. I am using a React Native version greater than
0.60.x. If you are using a lower version of React Native, please follow the instructions to link the libraries here.
For iOS, you just have to run the following set of commands.
You may also like: React Native Developers: Create Your First App.
For Android, add the following lines to the
android/app/build.gradle file under
Next, go to
android/app/src/main/java/com/rndeeplinkdemo/MainActivity.java file and add the following.
Create Two Mock Screens
After the dependencies have installed and
react-navigation configured for each platform, create two mock screen files inside the
src/screens directory. First, create a file
HomeScreen.js with the following code snippet. This screen is going to be the initial screen when the app loads.
Next, create another file
DeepLinkScreen.js. This screen is going to open when the user is transiting from a URL.
Configure Deep Linking in React Navigation
Let’s create a stack navigator from both the screen files. Import the following statements inside the file
Next, create a stack navigator with
HomeScreen as the initial screen.
To enable deep linking the app requires some identifier to recognize the path to the screen to open from the given external URL.
path attribute that tells the router relative path to match against the URL. Re-configure both the routes as following:
The last piece of the puzzle here is to configure the navigation to extract the path from the incoming URL from an external resource. This is done by
uriPrefix. Add the following code snippet at the end of the file.
Do not forget to import the navigator inside
App.js file, which is the main entry point of the current React Native app.
Configure URI Scheme for Native iOS Apps
To make this work, you have to configure the native iOS app to open URLs based on the prefix
ios/rnDeepLinkDemo/AppDelegate.m file and add the following.
Then, open the
ios/rnDeepLinkDemo.xcodeproj in the Xcode app. Select the app from the left navigation bar.
Open the Info tab.
Opening info tab in XCode
Next, go to the URL Types.
Click the + button and in identifier as well as URL schemes add
Adding URL type properties
Rebuild the React Native binaries by running
Testing the Deep Link
The external URL is going to look like this:
To test it out, there are two ways. You can either test by executing the command below in a new terminal tab.
Or, open the Safari web browser in your iOS device or simulator. Type in the URL and press enter.