React Native Deep Link

In this article, I am going to explain how Deep link works in React Native and how should we use it.

I am going to explain this concept from scratch. In this article, I focus only on Android.

Create React Native New Project.

react-native init deepLink

After you create your project you change directory

cd deepLink

In this application, I used react navigation plugin for navigation. Follow this link for navigation installation.

After finish installation creates your files in your root folder.

touch router.js home.js  people.js

Setup your navigation

//route.js
import React from "react";
import PropTypes from "prop-types";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from "./home";
import People from "./people";
const Router = createStackNavigator({
  Home: { screen: Home },
  People: { screen: People }
});
export default createAppContainer(Router);

React native Linking

Try to understand the below codes. OK, I will explain.

React native provide Linking.

import { Linking } from "react-native";
componentDidMount() {
    if (Platform.OS === "android") {
      Linking.getInitialURL().then(url => {
        console.log('url is', url);
        this.navigate(url);
      });
    }
  }

In your componentDidMount, we just get URL, if URL is passed.

Navigate to another screen.

navigate = url => {
    const { navigate } = this.props.navigation;
    const route = url.replace(/.*?:\/\//g, '');
    const id = route.match(/\/([^\/]+)\/?$/)[1];
    const routeName = route.split("/")[0];
if (routeName === "deep") {
      navigate("People", { id, name: "chris" });
    }
  };

The above code explains if we get routeName and it matches with “deep”, it moves to people page. In URL we pass ‘id’.

In this article, I do not focus on regular expressions.

In people screen, it chooses appropriate image and name depends on receiving params(id).

//people.js
/* @flow weak */
import React from "react";
import { View, Text, Image, StyleSheet } from "react-native";
const people = {
  0: {
    name: "Leela",
    image:
      "http://vignette1.wikia.nocookie.net/en.futurama/images/d/d4/Turanga_Leela.png/revision/latest?cb=20150218013044"
  },
  1: {
    name: "Bender",
    image:
      "https://vignette2.wikia.nocookie.net/en.futurama/images/4/43/Bender.png/revision/latest?cb=20150206072725"
  },
  2: {
    name: "Amy",
    image: "https://i.ytimg.com/vi/4sCtTq7K3yI/hqdefault.jpg"
  },
  3: {
    name: "Fry",
    image:
      "http://www.supergrove.com/wp-content/uploads/2017/03/fry-futurama-22-which-robot-from-quotfuturamaquot-are-you.jpg"
  }
};
class People extends React.Component {
  static navigationOptions = {
    title: "People"
  };
  render() {
    const id = this.props.navigation.getParam("id", "");
    if (!people[id]) {
      return <Text>Sorry, no data exists for this user </Text>;
    }
    return (
      <View>
        <Text style={styles.text}>{people[id].name}</Text>
        <Image
          resizeMode="contain"
          style={styles.image}
          source={{ uri: people[id].image }}
        />
      </View>
    );
  }
}
export default People;
const styles = StyleSheet.create({
  text: {
    margin: 19,
    fontSize: 22
  },
  image: {
    width: 400,
    height: 400
  }
});

Configure with android.

We are going to edit our AndroidManifest.xml. In this file, we should add reference id.

<intent-filter android:autoVerify="true">
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="deeplink" android:host="deep" />
      </intent-filter>

We should call these ways.

deeplink://deep/0
deeplink://deep/1
deeplink://deep/2

You can check with your terminal whether it works or not.

$  adb shell am start -W -a android.intent.action.VIEW -c     android.intent.category.BROWSABLE -d "deeplink://deep/0" com.deeplink

Tribute for Edison Laptop

Then it opens your app in your device or emulator if your app is not open.

We can use below link for generating app links https://halgatewood.com/deeplink/

https://halgatewood.com

https://halgatewood.com

In the above pictures, explain fill your value and just hit enter then it generate URL. Copy the URL you can use this URL in your android mobile browsers.

Thank you for reading this article. Please command your valuable feedbacks.

By,
Edison Devadoss. J

Reference links.

Code link. https://github.com/EdisonDevadoss/deepLink

Deep link Native Android app with React Native app

https://develoer.android.com/training/app-links/deep-linking

Linking · React Native

Deep Linking Your React Native App