We live in a new era where everything is connected and we share links more often than before. We also want our customer to reach the desired page, as quickly as possible regardless of the platform they are using. ne

If you are not using Deep Linking you are not having optimal customer experience.

Deep linking does not only mean to have a clickable link which opens up your app but it is a smart way to navigate to the desired page.

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 navigation to arbitrary content in response to external events like Push Notification, Emails, web links etc.

You must have seen generic linking before like when using mailto:abhishek@nalwaya.com it will open the default mail app with prefill my email. We will implement similar URL schemes in our example which will handle external URIs. Let’s suppose that we want a URI like myapp://article/4 to open our app and link straight into an article screen which shows article number 4.

What problem Deep Link solve?

Web links don’t work with native mobile apps.

If you use your mobile device to open a link to an article, you are taken to the destination in your web browser even if you have the article app installed. This is a problem because the article app is a better user experience than the mobile version of the article app.

The different way of implementing Deep Linking?

There are two ways of implementing deep linking:

URL scheme

Universal Links

URL schemes are a well-known way of having deep linking, Universal links are the new way Apple has implemented to easily connect your webpage and your app under the same link.

URL schemes are more easy to implement then Universal Links

Setup the react native project for both ios and Android

We are using react-native CLI to create a project and in that, we will create two pages Home screen and then an Article page. Then we will create deep links like myapp://article/4 and myapp://home to open these pages.

react-native init DeepLinkExample

cd DeepLinkExample

After creating a project we will add react-navigation and then use link command to link react native gesture handling.

It's not necessary that you use react-navigation for Deep Linking. Since its most popular navigation library for React Native, that's why we have used this in the tutorial.

yarn add react-navigation

yarn add react-native-gesture-handler

react-native link react-native-gesture-handler

Create an src folder in the root and add Article.js and Home.js file.

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;

We have created a react component which renderd text Hello from Home!. Now we will create a file Article.js in src folder and add following code:

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;

We have created two components Home.js and Article.js we will now add this in React navigation routes. Open App.js and update the following code:

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;

We have created react navigation and created routes for two pages. We have configured our navigation container to extract the path from the app’s incoming URI.

Setting up for iOS

Lets first setup for iOS, then will configure for Android. Open the iOS project by clicking DeepLinkExample/ios/DeepLinkExample.xcodeproj/

Open info.plist by clicking on top and then click on URL Types and add URL schemes. Update it as myapp. (whatever name you want to give to your app)