Deep linking with React Native

Deep linking with React Native’s Linking API

i’m assuming you already know about deep linking so lets start with the code, here i’m doing deep linking with react native’s Linking

Linking will provide for us an API that will allow us to listen for an incoming linked url, and then we can handle the url like

componentDidMount() {
    // If the app is not already open, it is opened and the url is passed in as the initialURL
Linking.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 });
         }
  };
}

When a user clicks on one of our links, we will open our app and navigate to the intended url

recreative://user-profile/18635740

this will navigate to the user-profile route of that id as shown below and if app is not installed it will send user to App Store or Google Playstore

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.

recreative will be what we use to identify the app. Once this identifier is set up, we will be able to reference it outside of the application in web browsers and other apps, like so: recreative://someurl/someotherinfo/…

Step 2. Add the following code to AppDelegate.m

Below last existing import add this import:

#import <React/RCTLinkingManager.h>

Directly below @implementation AppDelegate.m add this code:

if you are using any social login like Facebook, Twitter, Gmail you need to put an or condition for Linking like the below code:

- (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;
}

if you are not using any social login you can use it simply like the below code :

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

Now we should be able to open up safari or chrome and pass in the following url:

recreative://user-profile/0

And the app should redirect on load to the correct route, showing the correct person’s info!

Android Configuration:

First, we need to open our Manifest file and add the app name we will want to be referencing, in our case recreative.

In android/app/src/main, open AndroidManifest.xml and add the following intent filter below the last intent filter already listed, within the <activity> tag:

<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>

Here you can understandintent-filter more deeply from android’s documentation.

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

Because my parent is home , i’m coming from home into user-profile screen so i’m writing home/user-profile

That’s all, hope you all like it.