# 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="/files/sGGH1zxvJa7hTStWhnUd" 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="/files/C7cut10R1ptxJZu8A2rf" 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="/files/Kl7EQwtqcjzAWi8Bxshr" 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paveapi.com/integrations/developer-docs/deep-linking/deep-link-with-react-native-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.