Deep Link with React Native App

While create the session ID, define the URL

We are going to support the URL (deep links) into the app:

  • pave://

You can create your custom URL, but make sure you config the same URL in native app. For example, we using the URL is pave://

Create New Session ID

POST https://openapi.paveapi.com/v1/sessions:api-key

Headers

{
    "session_key": "XXX-ABCDE12345",
    "theme": "PRO",
    "active": true,
    "status": "IDLE",
    "redirect_url": "https://www.url-to-redirect-user-to.com",
    "inspect_started_at": null,
    "inspect_ended_at": null,
    "created_at": "2021-05-25T11:50:49.000000Z",
    "updated_at": "2021-05-25T11:50:49.000000Z",
    "language": "EN",
    "capture_url": "https://demoadmin.vehiclecapture.com/TCB-123...",
    "options": {
        "client_id": "SOUTH234889",
        "sms": {
            "to": "647-455-XXXX",
            "to_name": "Jane Smith",
            "from": "647-422-XXXX",
            "by": "Steve's Test Dealer",           
        }
    },
    "vehicle": {
        "vin": "JN1CV6AR9BMXXXXXX"
    }    
}

Sample Request

{
    "vehicle": {
        "vin":"JN1CV6AR9BMXXXXXX",
        "year":"2011",
        "make":"Infiniti",
        "model":"G37",
        "body_type":"Sedan",
        "trim":"Luxury",
        "transmission":"Automatic",
        "ext_col":"Malbec Black",
        "int_col":"Wheat",
        "odom_reading":330477,
        "odom_unit":"KILOMETRES"
    },
    "session": {
        "theme": "LITE",
        "redirect_url": "https://www.url-to-redirect-user-to.com",
        "client_id": "SOUTH234889"
    },
    "sms": {
        "to": "647-455-XXXX",
        "to_name": "Jane Smith",
        "from": "647-422-XXXX",
        "by": "Steve Test Dealer"
    }
}

Please, read the Create Session's document for more information.

Setting up for iOS

Adding a URL scheme

Open up your project and go to Targets > Info > URL Types and add the following:

Change com.discoveryloft.pavejs to your project's identifier

Update AppDelegate.m

You'll need to add the following lines to your *AppDelegate.m:

// iOS 9.x or newer
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application   
  openURL:(NSURL *)url   
  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{ 
 
return [RCTLinkingManager application:application openURL:url options:options];
}

If you're targeting iOS 8.x or older, you can use the following code instead:

// iOS 8.x or older
#import <React/RCTLinkingManager.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url  
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{  
    return [RCTLinkingManager application:application openURL:url                      
            sourceApplication:sourceApplication annotation:annotation];
}

Setting up for Android

Add intent filters for incoming links

To create a link to your app content, add an intent filter that contains these elements and attribute values in your manifest:

 <application
        ...>

        <activity
            android:name=".MainActivity"
            android:label="MainActivity" >
            
             <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            
            <intent-filter android:label="PAVE Filter">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <!-- Accepts URIs that begin with "pave://...” -->
                <data android:scheme="pave" />

            </intent-filter>
        </activity>

   </application>

According to Google, the autoVerify attribute “allows your app to designate itself as the default handler of a given type of link. So when the user clicks on an Android App Link, your app opens immediately if it's installed — the disambiguation dialog doesn't appear.”

Handle URLs

There are two ways to handle URLs that open your app.

1. If the app is already open, the app is foregrounded and a Linking 'url' event is fired

You can handle these events with Linking.addEventListener('url', callback) - it calls callback({ url }) with the linked URL

2. If the app is not already open, it is opened and the url is passed in as the initialURL

You can handle these events with Linking.getInitialURL() - it returns a Promise that resolves to the URL, if there is one.

Example

App.js
/* This is the example code */
import React, {useEffect, useState} from 'react';
import {Linking} from 'react-native';

import {View, Text} from 'react-native';

const App = () => {
  const [url, setUrl] = useState('');

  useEffect(() => {
    Linking.getInitialURL()
      .then(url => handleURL({url}))
      .catch(console.error);

    Linking.addEventListener('url', handleURL);
  }, []);

  function handleURL(event) {
   /***********************************/
   /* HANDLE THE URL IN THIS FUNCTION */
   /***********************************/
    setUrl(event.url);
    console.log('url ======> ' + event.url);
  }

  return (
    <View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
      <Text>PAVE DEEP LINK: {url}</Text>
    </View>
  );
};

export default App;

Result

After PAVE Capture successfully and tap on CLOSE button, you will redirect to your app.

Test

iOS

You can try deeplinking into your app by firing up Safari in your simulator and enter URL in there (i.e. pave://).

Or an even better way is to execute deeplinks from the command line while your simulator is running with this command here:

xcrun simctl openurl booted pave://

Android

Execute deeplinks from the command line while your simulator is running with this command here:

adb shell am start -a android.intent.action.VIEW -d "pave:\\" <your-app-package-name>

Source code example:

Reference Documents:

PreviousDeep LinkingNextDeep Link Native App

Last updated