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;

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

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:

https://reactnavigation.org/docs/deep-linking
https://medium.com/@rossbulat/deep-linking-in-react-native-with-universal-links-and-url-schemes-7bc116e8ea8b
https://blog.jscrambler.com/how-to-handle-deep-linking-in-a-react-native-app/
https://medium.com/@abhimuralidharan/universal-links-in-ios-79c4ee038272
https://blog.branch.io/how-to-setup-universal-links-to-deep-link-on-apple-ios/

Summary:

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.

The founder's survey report on "What Matters For Startup" is released - Get your copy and learn the trends of successful companies :)

Download Free eBook Now!

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, Smiling Mind
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