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://
Create New Session ID
POST
https://openapi.paveapi.com/v1/sessions:api-key
Headers
Accept*
String
application/json
Content-type*
String
application/json
API-Timestamp*
String
UTC Datetime
API-Token*
String
Your Generated Access Token
API-Key*
String
Your API Key
{
"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"
}
}
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
/* 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:
Last updated