# 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://`

{% hint style="info" %}
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://`*** 
{% endhint %}

## Create New Session ID

<mark style="color:green;">`POST`</mark> `https://openapi.paveapi.com/v1/sessions:api-key`

#### Headers

| Name                                            | Type   | Description                 |
| ----------------------------------------------- | ------ | --------------------------- |
| Accept<mark style="color:red;">\*</mark>        | String | application/json            |
| Content-type<mark style="color:red;">\*</mark>  | String | application/json            |
| API-Timestamp<mark style="color:red;">\*</mark> | String | UTC Datetime                |
| API-Token<mark style="color:red;">\*</mark>     | String | Your Generated Access Token |
| API-Key<mark style="color:red;">\*</mark>       | String | Your API Key                |

{% tabs %}
{% tab title="200: OK " %}

```json
{
    "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"
    }    
}
```

{% endtab %}

{% tab title="400: Bad Request " %}

```json
{
    "message": "Required fields are missing or invalid.",
    "errors": {
        "session.redirect_url": [
            "Invalid redirect url"
        ],
        "sms.to": [
            "Invalid phone number"
        ],
        "vehicle.vin": [
            "VIN is too short, it must be 17 characters"
        ]
    }
}
```

{% endtab %}
{% endtabs %}

#### Sample Request

```json
{
    "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"
    }
}
```

{% hint style="info" %}
Please, read the [Create Session's document](https://docs.paveapi.com/integrations/developer-docs/sessions-1/post-create-new-session) for more information.
{% endhint %}

## Setting up for iOS

### Adding a URL scheme

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

<figure><img src="https://3056819394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIMmt4CHr5aRB2VBMvpEQ%2Fuploads%2FiyLLCRogBEZKFxhH1KGd%2F1.png?alt=media&#x26;token=a1320b37-436d-4972-8e90-55661512829a" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Change **`com.discoveryloft.pavejs`** to **your project's identifier**
{% endhint %}

### Update AppDelegate.m

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

```objectivec
// 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:

```objectivec
// 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:

```markup
 <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](https://developer.android.com/training/app-links/index.html#android-app-links), 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

{% code title="App.js" %}

```javascript
/* 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;
```

{% endcode %}

## Result

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

<div align="center"><figure><img src="https://3056819394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIMmt4CHr5aRB2VBMvpEQ%2Fuploads%2Fzx33qd88s97CeTbtTLiT%2F2.gif?alt=media&#x26;token=31a88c72-1e09-4c2b-b5d5-012a8137f88a" alt=""><figcaption></figcaption></figure></div>

## Test

### iOS

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

<div align="center"><figure><img src="https://3056819394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIMmt4CHr5aRB2VBMvpEQ%2Fuploads%2F92Mpinpwyp3FnlmdrkMx%2F3.gif?alt=media&#x26;token=b6e3d5c8-78a7-4357-bbb4-d3ddb5c062cc" alt=""><figcaption></figcaption></figure></div>

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:***&#x20;

* [***https://github.com/DiscoveryLoft/PAVE-Deep-Link***](https://github.com/DiscoveryLoft/PAVE-Deep-Link)

***Reference Documents:***

* [***https://reactnative.dev/docs/linking#handling-deep-links***](https://reactnative.dev/docs/linking#handling-deep-links)
* [***https://developer.android.com/training/app-links/deep-linking***](https://developer.android.com/training/app-links/deep-linking)