How to Handle Deep Linking in a React Native Ios App?

React Native is a JavaScript framework used for developing iOS and Android applications. It uses only JavaScript to build a mobile application. It is like React, which uses native components rather than using web components as building blocks.

Deep Linking is a technique in which a given URL is used to open a specific page or specific screen in a mobile app, providing a better experience. You may get the URL via some invitation email which can be signed up or register for any new application or simple link which can open a specific page of an application with one click.

Note: If the app is not installed on a mobile phone then the link will open in a web browser and it works as usual.
In this article, we will see how to configure incoming links in our app on various platforms. To handle incoming links, we need to handle the following scenarios:

  • Scenarios 1: If app is kill by the user or the app is not yet launched by the user
  • Scenarios 2: If app is in a background state
  • Scenarios 3: If app is in a foreground state

React Native provides a Linking to get notified of incoming links, we need to configure links using React Navigation. Will see how it works in details as follows

Check Out What It Takes To Build A Successful App Here

React Native projects setup in iOS :

Configure iOS application to open based on the mymoc:// URI scheme.

We need to link RCTLinking to the project by following the steps. Then we are able to listen to incoming app links;

DeepLinkApp/ios/DeepLinkApp/AppDelegate.m.

iOS 9.0 or newer version:

// don’t forget to import header
#import <React/RCTLinkingManager.h>

// Add below simple lines of code
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}

iOS 8.0 or older version :

// don’t forget to import header
#import <React/RCTLinkingManager.h>

// Add below simple lines of code:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}

Note : If your app is using Universal Links, then we need to also add following lines of code ;

// Add below simple lines of code:
(BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
restorationHandler:(nonnull void (^)(NSArray<id> * _Nullable))restorationHandler
{
return [RCTLinkingManager application:application
continueUserActivity:userActivity
restorationHandler:restorationHandler];
}
//

Deep LinkingDeep Linking - React Native iOS - React Native iOS

We Build Streamlining Accreditation Process For Physicians

Configuration :

In this article we will see how to handle external URIs and after that get a call back from that URIs and move to a specific page in the app.

const DeepLinkApp = createAppContainer(
createStackNavigator({
Dashboard: { screen: DashboardScreen },
Education: { screen: EducationScreen },
})
);
const DeepLinkApp = createAppContainer(
createStackNavigator({
Dashboard: { screen: DashboardScreen },
Education: {
screen: EducationScreen,
path: 'education/:user',
},
})
);

If we have a path like education/15232 to link to an Education screen with the id as input parameter. Now re-configure our Education screen with a path that tells the router what relative path to match against, This path spec would be Education/:user.

URI Prefix Setup within app :

Now configure our navigation container to extract the path from the app’s incoming URI.

const prefix = ’mymoc:// ’;

const MainApp = () => ;

Need to add the scheme to Xcode project configuration :

If you want to do it manually,

  1. Open the project at DeepLinkApp/ios/DeepLinkApp.xcodeproj in Xcode.
  2. Select the project in the sidebar & navigate to the info tab. Scroll down to “URL Types” and add one as per below image. Here in URL type, you need to set the identifier & the URL scheme to your desired URL scheme.

Deep Linking - React Native iOS

Run the following to test the URI on the iOS simulator :

xcrun simctl openurl booted mymoc://education/15132

Test the URI on a real iPhone device, then you need to open Safari and type :

mymoc://education/15132

Deep Linking - React Native iOS

Note :

React Navigation within a hybrid app – an iOS app that has both Swift/ObjC and React Native parts – you may be missing the RCTLinkingIOS subspec in your Podfile, which is installed by default in new React-Native projects. If not then you need to add this, ensure your Podfile looks like the following:

pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'

To handle the URL with the parameters, you can use Linking in your components to react to events :

componentDidMount() {
Linking.addEventListener('url', this.handleDeepLink)
}

componentWillUnmount() {
Linking.removeEventListener('url', this.handleDeepLink);
}

handleDeepLink(e) {
const linkRoute = e.url.replace(/.*?:\/\//g, '')
console.log(“linkRoute: ”, linkRoute)
// Then handle redirection to the specific page in the app
}

References:

Deep Linking

Deep Linking in React Native with Universal Links and URL Schemes

How To Handle Deep Linking in a React Native App

Universal links in iOS

How to Set Up Universal Links to Deep Link on Apple iOS

coma

Conclusion

Nowadays React-Native Developers face problems while working with deep linking. In this article, we took a good and simple implementation. I hope the above blog will help you.

Step Into the Hyper Growth Path With Our Top React Natives Developers.

Kiran

Tech Expert

Kiran is an iOS and React Native developer with over 4+ work experience with good knowledge in iOS, React Native, Firebase for developing mobile applications. He is familiar with writing blogs since the last 2 years. He loves to write blogs on technical issues faced by developers in day to day work and help them through his blogs.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks