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

Related Read: How To Implement React Native Deep Linking In Mobile Apps

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.

Keep Reading

Keep Reading

  • Service
  • Career
  • Let's create something together!

  • We’re looking for the best. Are you in?