React Native Deep Linking for iOS and Android

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

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:[email protected] 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 likemyapp://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)

Then open AppDelegate.m in root folder and add import following header:

#import “React/RCTLinkingManager.h”

And then add this code above @end.

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}


We are done with the change for iOS, lets now test it for ios.

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.

You can also open DeepLink by running following command on your terminal:

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">

&lt;uses-permission android:name="android.permission.INTERNET" /&gt;

&lt;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"&gt;
  &lt;activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"&gt;
    &lt;intent-filter&gt;
        &lt;action android:name="android.intent.action.MAIN" /&gt;
        &lt;category android:name="android.intent.category.LAUNCHER" /&gt;
    &lt;/intent-filter&gt;
      &lt;intent-filter&gt;
          &lt;action android:name="android.intent.action.VIEW" /&gt;
          &lt;category android:name="android.intent.category.DEFAULT" /&gt;
          &lt;category android:name="android.intent.category.BROWSABLE" /&gt;
          &lt;data android:scheme="myapp" /&gt;
      &lt;/intent-filter&gt;
  &lt;/activity&gt;
  &lt;activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /&gt;
&lt;/application&gt;

</manifest>

We are all set for Android.

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

Now run the application by clicking Run button on Android Studio:

You can also open deep link though terminal using:

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.

We need to first create apple-app-site-association for your app. Upload an apple-app-site-association file to your web server

{ "activitycontinuation":
{ "apps": [ "<TeamID>.<Bundle-Identifier>" ]},
"applinks": { "apps": [],
"details": [{ "appID": "<TeamID>.<Bundle-Identifier>",
"paths": [ "<WebRoutes>" ]}]

In our case it will look like this:

{
"applinks": {
"apps": [],
"details": [{
"appID": "D3KQX62K1A.com.example.deeplinkexample",
"paths": ["/home"]
},
{
"appID": "D3KQX62K1A.com.example.deeplinkexample",
"paths": ["/article/*"]
}]
}
}

Few of the important point to note for the file:

  • 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

You can test your file here -> https://branch.io/resources/aasa-validator/

Then log into developer.apple.com with your account and Enable Associated Domains in your app identifier.

Now Launch Xcode and select the Capabilities tab. Enable Associated Domains and add two values.

  1. applinks:YOUR_WEBSITE_DOMAIN
  2. activitycontinuation:YOUR_WEBSITE_DOMAIN

You are all set for Univeral Link !!

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.

Code of the example can be found here -> https://github.com/nalwayaabhishek/DeepLinkExample

Happy Connecting the world with your app !!

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Learn More

The Complete React Native and Redux Course

React Native - The Practical Guide

The complete React Native course ( 2nd edition )

React Native vs Flutter (Which is best for startup ?)

How to build a news app with JavaScript and React Native

React Native – The Future of Mobile

Styling in React Native

Which should I choose: React Native or Flutter?

React Native Web Full App Tutorial - Build a Workout App for iOS, Android, and Web

React Native Tutorial - Build Android and iOS App from Scratch

React Native Tutorial - Build Android and iOS App from Scratch

React Native Tutorial - Build Android and iOS App from Scratch. Getting started tutorial on building an Android and iOS app from scratch using React Native. React Native is a modern Javascript framework backed by Facebook that use to make Mobile Apps (Android/iOS) development easier for Javascript developer. In other words, React Native is React.js mobile apps development version.

A comprehensive step by step tutorial on building Android and iOS app from scratch using React Native

A comprehensive getting started tutorial on building an Android and iOS app from scratch using React Native. React Native is a modern Javascript framework backed by Facebook that use to make Mobile Apps (Android/iOS) development easier for Javascript developer. In other words, React Native is React.js mobile apps development version. For more information about React Native definition, features, etc, you can find in their official documentation.

Shortcut to the steps:

  • Install React App Creator and Create A React Native App
  • Add Navigation Header and Home Screen
  • Load World Cup 2018 Data from API
  • Display List of World Cup Matchdays
  • Display World Cup 2018 Matchdays Details
  • Run the React Native World Cup 2018 App

In this React Native tutorial, we are creating an app that listing the World Cup 2018 matches using the free open public domain football data for the world cups in the JSON format.

The following tools, frameworks, and modules are required for this tutorial:

  • React Native
  • Node.js (NPM or Yarn)
  • Worldcup JSON data
  • Android Studio or SDK for Android
  • XCode for iOS
  • Terminal (OSX/Linux) or Command Line (Windows)
  • Text Editor or IDE (We are using Atom)

Before start to the main steps, make sure that you have installed Node.js and can run npm in the terminal or command line. To check existing or installed Node.js environment open the terminal/command line then type this command.

node -v
v8.11.1
npm -v
6.1.0
yarn -v
1.7.0

That's the Node and NPM or YARN version that we are using. In this tutorial, we will use Yarn commonly.

Install React App Creator and Create A React Native App

The Create React Native App is a tool for creating a React Native App. To install it, type this command in your App projects folder.

sudo npm install -g create-react-native-app

Then create a React Native App using this command.

create-react-native-app reactWorldCupApp

That command will create a React Native app then install all required modules. The app or project folder will contain these folders and files.

Next, go to the newly created React App folder.

cd reactWorldCupApp

This React Native App is running via Expo app, before running on your Android or iOS device, make sure you have to install the Expo App to Android or Expo Client to iOS. Of course, that app is available in the App Store. So, we assume that you have installed the Expo App in your device then type this command to run the app.

npm start

or

yarn start

You will see this barcode and instruction in the terminal or command line.

To open the app in the Android device, open the Expo App first then tap on Scan QR Code button. Scan the barcode in the terminal or command line then you will see the React Native Android App like this after waiting for minutes the build process.

For iOS Device, press s from the keyboard to send React Native App URL to your Email or SMS. Enter your phone number or Email address (We use an email address) then press Enter. You will get this email to your mailbox.

Choose open in Expo URL then open in your browser, that will be redirected to Expo App. In Expo App welcome screen, shake your phone to open the React Native App. Now, you will see this screen in your iOS device.

This step for development purpose, we will show you how to build for production at the end of this article.

Add Navigation Header and Home Screen

Above generated React Native App just show blank app with plain text. Now, we will show you how to add the Navigation Header and Home Screen for your app. So, it will look like the Native App. In the terminal or command line type this command to install React Navigation (react-navigation) module.

yarn add react-navigation

Next, create a folder for components and React Native components files in the root of the app folder.

mkdir components
touch components/HomeScreen.js
touch components/DetailsScreen.js

Open and edit components/HomeScreen.js then add this React Native codes.

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

export default HomeScreen;

Open and edit components/DetailsScreen.js then add this React Native codes.

import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

class DetailsScreen extends Component {
  static navigationOptions = {
    title: 'Details',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.push('Details')}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

export default DetailsScreen;

Next, open and edit App.js then add replace all codes with this.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './components/HomeScreen';
import DetailsScreen from './components/DetailsScreen';

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

When the files are saved, the Expo app will refresh the React Native App automatically. Now, the app will look like this.

Load World Cup 2018 Data from API

To load World Cup 2018 data from API, open and edit components/HomeScreen.js then add constructor function before rendering function.

constructor(props){
  super(props);
  this.state ={ isLoading: true}
}

Add function for load API JSON data which the JSON response set to the dataSource.

componentDidMount(){
  return fetch('https://raw.githubusercontent.com/openfootball/world-cup.json/master/2018/worldcup.json')
    .then((response) => response.json())
    .then((responseJson) => {
      // console.log(responseJson);
      this.setState({
        isLoading: false,
        dataSource: responseJson.rounds,
      }, function(){

      });

    })
    .catch((error) =>{
      console.error(error);
    });
}

The response from API holds by dataSource variable that will use in the view in the next step.

Display List of World Cup Matchdays

We will use the List and ListItem component of React Native Elements (react-native-elements) module. First, install react-native-elements using this command.

yarn add react-native-elements

Open and edit again components/HomeScreen.js then replace all imports with these imports of React, Component (react), StyleSheet, ScrollView, ActivityIndicator, Text, View (react-native), List, and ListItem (react-native-elements).

import React, { Component } from 'react';
import { StyleSheet, ScrollView, ActivityIndicator, Text, View  } from 'react-native';
import { List, ListItem } from 'react-native-elements';

Next, replace all render function with this React Native rendered template which the ActivityIndicator load only if the state status is loading. The list that gets from the data source displaying to the ListItem after mapping the array of the data source.

render() {
  if(this.state.isLoading){
    return(
      <View style={styles.activity}>
        <ActivityIndicator/>
      </View>
    )
  }

  return(
    <ScrollView style={styles.container}>
      <List>
        {
          this.state.dataSource.map((item, i) => (
            <ListItem
              key={i}
              title={item.name}
              leftIcon={{name: 'soccer-ball-o', type: 'font-awesome'}}
              onPress={() => {
                this.props.navigation.navigate('Details', {
                  matches: `${JSON.stringify(item.matches)}`,
                });
              }}
            />
          ))
        }
      </List>
    </ScrollView>
  );
}

Add style const before the export code.

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingBottom: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  activity: {
    flex: 1,
    padding: 20,
  }
})
Display World Cup 2018 Matchdays Details

We will display World Cup 2018 Matchdays Details in the DetailsScreen. Open and edit components/DetailsScreen.js then replace all imports with this.

import React, { Component } from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';
import { List, ListItem, Text, Card } from 'react-native-elements';

Next, replace all render function with these lines codes.

render() {
  const { navigation } = this.props;
  const matches = JSON.parse(navigation.getParam('matches', 'No matches found'));
  console.log(matches);

  return (
    <ScrollView>
      <Card style={styles.container}>
        {
          matches.map((item, key) => (
            <View key={key} style={styles.subContainer}>
              if(item.group) {
                <View>
                  <Text h3>{item.group}</Text>
                </View>
              }
              <View>
                <Text h3>{item.team1.name} vs {item.team2.name}</Text>
              </View>
              <View>
                <Text h5>{item.date}</Text>
              </View>
              <View>
                <Text h4>{item.score1} - {item.score2}</Text>
              </View>
              if(item.goals1.length > 0) {
                item.goals1.map((item2, key2) => (
                  <View key={key2}>
                    <Text h4>{item2.name} ({item2.minute})</Text>
                  </View>
                ))
              }
              if(item.goals2.length > 0) {
                item.goals2.map((item3, key3) => (
                  <View key={key3}>
                    <Text h5>{item3.name} ({item3.minute})</Text>
                  </View>
                ))
              }
            </View>
          ))
        }
      </Card>
    </ScrollView>
  );
}

Add StyleSheet const before the export code.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  }
})
Run the React Native World Cup 2018 App

To run the application in Expo App, you can find in step 1 of this article. If there's no error found, you will see the result like this.


Next, to run or build as the Native App, type this command to install React Native CLI first.

sudo npm install -g react-native-cli

Next, eject the project from the Create React Native App by type this command.

npm run eject

You will get questions like below, make it the same with the one that we choose.

? How would you like to eject from create-react-native-app? React Native: I'd like a regular React Native project.
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? React World Cup
? What should your Android Studio and Xcode projects be called? ReactWorldCupApp

Next, to run the Native iOS or Android App in the Simulator, type this command.

react-native run-ios
react-native run-android

That it's for now. Any suggestions are open for next React Native tutorial. You can find the full working source code in our GitHub.

Build an iOS and Android App using React Native

Build an iOS and Android App using React Native

A comprehensive step by step tutorial on building Android and iOS App from scratch using React Native. Build an iOS and Android app in 15 minutes using React Native. Create native apps for Android and iOS using React. React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Build an iOS and Android app in 15 minutes using React Native

A comprehensive step by step tutorial on building Android and iOS App from scratch using React Native.

The Difference Between iOS And Android App Development Using React Native

In this <a href="https://www.cmarix.com/the-difference-between-ios-and-android-app-development-using-react-native/?utm_source=SB" target="_blank">blog</a>, learn how the in-app features from design elements to testing tools, React Native development for iOS and Android mobile app platforms offer several key differences that developers need to know about.

In this blog, learn how the in-app features from design elements to testing tools, React Native development for iOS and Android mobile app platforms offer several key differences that developers need to know about.