How to add Deep-linking to an iOS React-Native app

This tutorial will explain how to add deep links to a React-Native app in iOS. I will be doing a separate article for Android to save the article getting too long.

What is deep linking?

A deep link is basically a link on the internet that takes you to a website, however, website urls do not play very nice with mobile apps, if you were to open a link regarding 50% off JD trainers on your mobile the link would open on your phones default browser which is ok but not the best user experience because of the wasted space on the page and those pesky ads! (maybe), so a solution was invented to be able to open these links within an app as long as you have the relevant app on your phone, this is the reason on when you receive a YouTube link in a whatsapp conversion it will ask you prior to opening the link whether you want to open it in your browser or the YouTube app.

Types of Deep Linking

There are a multitude of deep linking methods the first one being a traditional deep linking method where you are redirected to the app if you have the app installed.

A second type of deep linking is the “deferred deep linking”, where if you don’t have the required app installed then when you click the link you will be redirected to the install page of the app on the app store of your phone.

However, we will be focusing on the traditional deep linking method in this tutorial.

First create a react native project with the below command.

react-native init deeplinkreactnative

Once the project has finished creating open it in your preferred code editor and within the root of the project create a folder called “components” and within this create a javascript file named “Movie” and another javascript file called “Song”.

Our next process is to install the package “react-navigation”, since this is the most popular package to create/develop navigation within a react-native I thought it suitable to use this.

Install react-navigation using the command below.

npm install react-navigation

Once this has finished installing we will now need to install the other dependencies for react-navigation. You can do this with the below command.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Once all of those have been installed we will need to add the pod dependencies for the ios folder, run the below in the terminal to do this.

cd ios; pod install; cd ..

To finish the installation of react-native-gesture-handler we need to add some extra code to the “MainActivity.java” file found in our Android project. Although we won’t be doing Android in this project I thought it good to mention it for next time.

You will first need to add the below 3 lines of imports to the top of “MainActivity.java” which is found in the android/app/src/main/java folder.

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

We then need to add an additional method to the “MainActivity.java” too.

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}

Once you have done this you should restart your metro bundler that opens a terminal for your simulator as well as restart your simulator also as sometimes.

Now open the Movie.js file you created earlier and paste the below code into the file.

import React from 'react';
import { Text } from 'react-native';
class Movie extends React.Component {
render() {
return <Text>This is a movie page - One of my favourite movies is the Dark Knight!</Text>;
}
}
export default Movie;

Now open the Song.js file and paste the below into it.

import React from 'react';
import { Text } from 'react-native';
class Song extends React.Component {
render() {
return <Text>One of my favourite songs is Working Man by Rush!</Text>;
}
}
export default Song;

Now we will need to install another package for our stack navigator named “react-navigation-stack” which will be used for our navigation. Install the package below.

npm install react-navigation-stack

Now change your App class or function in “App.js” to the below.

class App extends React.Component{
render(){
return(
<View>
<View>
<Text>
Hello there and welcome to my app!
</Text>
</View>
</View>
)
}
}

After you have done this we need to import the “Song.js” and “Movie.js” components to our “App.js” file to use in our stack navigator.

import Movie from './components/Movie';
import Song from './components/Song';

We also need to import the “createStackNavigator” from “react-navigation-stack” and import “createAppContainer” from “react-navigation” at the top of “App.js”.

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

We now need to add the components we imported “Movie” and “Song” to our stack navigator using the below.

const MyStackNavigagtor = createStackNavigator({
Home: { screen: App },
Movie: { screen: Movie },
Song: { screen: Song }
},
{
initialRouteName: "Home"
}
);

We also set our App component to the Home screen and set our initial/default route to be the “Home” route.

We now need to create our App container and export the app container from the “App.js” file using the below code.

const MyAppNavigator = createAppContainer(MyStackNavigator)
export default MyAppNavigator;

Remember to remove the initial “export default App” as you cannot export 2 default components.

You will now need to run your app, use the command below.

react-native run-ios

You should see a screen like the below.

We will now need to add our deep linking method for iOS. We will need to open the “xcworkspace” file from our iOS folder in our project in Xcode and when you have this open make sure you click on the project name on the left hand menu then on the menu that appears click on the word “info” this will show another menu.

Now on this menu there will be a label with the text “URL types”, within this there are textboxes labelled as “URL schemes” and “identifier”, enter the value you wish to use for URL scheme and identifier, make sure they are short and the same though.

We now need to open the “AppDelegate.m” file and import a header.

#import <React/RCTLinkingManager.h>

You will also need to add the below code to the “AppDelegate.m” file just above the “@end” tag.

- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}

The above code is only used if you are targeting iOS 9 or newer, however, if you are targeting an iOS lower than 9 you will need to use the below code instead.

// Add this 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];
}

In addition, if you want to use universal links in your app you will also have to add the below code too.

// Add this above `@end`:
- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}

That is it for adding deep links to iOS, we will now to test this on our simulator.

In your iOS simulator open the Safari browser, you will now need to enter the identifier you entered in Xcode, so since mine was deeplinkapp I will first enter that as a url we then need to add a “:” and 2 “/”, afterwards we need to type in the name of the component we want to visit for this example we will open the “Movie” component.

So now my full url in the browser looks like the below.

When you click enter on your keyboard you will be greeted by an alert asking if you want to open the url using the app project we have created. Click Open.

Voila! As you can see we have been redirected to our app by manually entering a URL into our safari web browser and that is the purpose of Deep linking as the designated URL will provide a much better user experience than a URL in the browser.

In the next article I will be explaining how to do the exact same on an Android device, i Just didn’t want the reading time of the article getting too long.

Thank you for reading and don’t forget to share and clap the article if you liked it!

Check out my blog — https://simplyreact.uk/