Deep linking with React Native

Deep linking with React Native’s Linking API
componentDidMount() {    // If the app is not already open, it is opened and the url is passed in as the initialURLLinking.getInitialURL().then((url) => {this._handleOpenURL(url);}).catch((err) => {console.warn('Deep-Linking Error', err); });_handleOpenURL = (url) => {if (url) {const route = url.replace(/.*?:\/\//g, '');const id = route.match(/\/([^\/]+)\/?$/)[1];NavigationService.navigate('UserProfile', { userId: id });
}
};}
recreative://user-profile/18635740

iOS Configuration

Step 1. Add URL type to info.plist

  1. Open info.plist and at URL types add URL Schemes
  2. 2. Expand item 0 (zero) and choose URL Schemes.
  3. 3. Give item 0 the name you would like your app to be linkable as. In our case, I chose recreative as the name.

Step 2. Add the following code to AppDelegate.m

#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<NSString *,id> *)options {return [RCTLinkingManager application:application openURL:url options:options] || [[FBSDKApplicationDelegate sharedInstance] application:application openURL:url options:options] || [RNGoogleSignin application:application openURL:url options:options] || [[Twitter sharedInstance] application:application openURL:url options:options];   return YES;
}
- (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary<NSString *,id> *)options {return[RCTLinkingManager application:application openURL:url options:options];return YES;
}
recreative://user-profile/0

Android Configuration:

<intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><data android:scheme="recreative" /></intent-filter>

Test Deeplinking via Command:

For Android:

npx uri-scheme open recreative://home/user-profile —-android

For iOS:

npx uri-scheme open recreative://home/user-profile --ios

--

--

--

Software Engineer (React Native Developer)

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Install JDK SE 8.2.71 on Windows x86/x64

5 Best Chrome Extensions for Web Developers

How does the MERN stack work?

Deploying Angular To Heroku (Complete Guide)

How to Make a Typed-Text React Component

Extending three.js materials with GLSL

Static vs. Dynamic Arrays: Javascript Beauty

Node based shaders with three.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Syed Amir Ali

Syed Amir Ali

Software Engineer (React Native Developer)

More from Medium

Build an Offline-First React Native Mobile App with Expo and Realm

React-Native Push Notifications with Amazon SNS

Build CompleteAuthentication with Bottom bar navigation in React Native

Integrate Stripe Terminal Payments into your React Native application