React Native Deep Linking for iOS and Android

What is Deep Link?

Deep linking is a technique that allows an app to be opened to a specific UI or resource, in response to some external event. The “deep” refers to the depth of the page in an App hierarchical structure of pages. This is a very important feature for user engagement, it also makes the app more responsive and capable of navigating to arbitrary content in response to external events like Push Notifications, Emails, web links etc.

What problem Deep Link solve?

Web links don’t work with native mobile apps.

The different way of implementing Deep Linking?

There are two ways of implementing deep linking:

  • URL scheme
  • Universal Links
react-native init DeepLinkExample
cd DeepLinkExample
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
import React from 'react';import { Text } from 'react-native';
class Home extends React.Component { static navigationOptions = { title: 'Home', };render() { return <Text>Hello from Home!</Text>; }}export default Home;
import React from 'react';import { Text } from 'react-native';class Article extends React.Component {  static navigationOptions = {   title: 'Article',  };
render() { const { id } = this.props.navigation.state.params; return <Text>Hello from Article {id}!</Text>; }}export default Article;
import React, {Component} from 'react';import { StyleSheet, Text, View} from 'react-native';import { createAppContainer, createStackNavigator} from "react-navigation";import Home from './src/Home';import Article from './src/Article';const AppNavigator = createStackNavigator({  Home: { screen: Home },  Article: { screen: Article, path: 'article/:id', },},{  initialRouteName: "Home"});const prefix = 'myapp://myapp/';const App = createAppContainer(AppNavigator)const MainApp = () => <App uriPrefix={prefix} />;export default MainApp;
#import “React/RCTLinkingManager.h” 
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)urlsourceApplication:(NSString *)sourceApplication annotation:(id)annotation{return [RCTLinkingManager application:application openURL:urlsourceApplication:sourceApplication annotation:annotation];}

Testing DeepLink in iOS

To test DeepLink you need to run the app using react-native run ios or through Xcode. Then open safari browser on simulator and type: myapp://article/5, it will automatically open the app and open Article with no 5.

xcrun simctl openurl booted myapp://article/5

Configuring deep link for Android

To configure the external linking in Android, we need to create a new intent in the manifest. Open /src/main/AndroidManifest.xml add the new intent-filter inside the MainActivity entry with a VIEW type action:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.deeplinkexample">

<uses-permission android:name="android.permission.INTERNET" />

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<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="myapp" />
</intent-filter>

</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

Testing Deeplink on Android

To test Deep Linking, open project in Android Studio and Click on Run -> Edit Configuration. and the change Launch options to URL and update URL to myapp://article/13

adb shell am start -W -a android.intent.action.VIEW -d "myapp://article/3" com.com.deeplinkexample

Setting up Universal Linking

Now lets setup Universal link for your app. First will suggest to check out Apple Doc.

{ "activitycontinuation":
{ "apps": [ "<TeamID>.<Bundle-Identifier>" ]},
"applinks": { "apps": [],
"details": [{ "appID": "<TeamID>.<Bundle-Identifier>",
"paths": [ "<WebRoutes>" ]}]
{
"applinks": {
"apps": [],
"details": [{
"appID": "D3KQX62K1A.com.example.deeplinkexample",
"paths": ["/home"]
},
{
"appID": "D3KQX62K1A.com.example.deeplinkexample",
"paths": ["/article/*"]
}]
}
}
  • It should be publically available.
  • It should be served as application/json mime type
  • File should be less than or equal to 128 Kb
  • It should be served over Https
  1. applinks:YOUR_WEBSITE_DOMAIN
  2. activitycontinuation:YOUR_WEBSITE_DOMAIN

Wrapping up ?

Deep linking is a very important feature for user engagement. Its also a foundation for setting up push notification, Email Marketing, Social Sharing etc. So don't wait to implement this in your app.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Nalwaya

Abhishek Nalwaya

330 Followers

Author of three books, latest one is on React Native, Architect at Digital Mckinsey