# 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://api.paveapi.com/v1/generate-session-id/:api-key`

#### Path Parameters

| Name    | Type   | Description |
| ------- | ------ | ----------- |
| api-key | string | API - Key   |

#### Request Body

| Name          | Type   | Description                 |
| ------------- | ------ | --------------------------- |
| redirect\_url | string | The url you want to return. |

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

```
{
    "session_key": "TOA-3DFDC8Z64V",
    "status": "IDLE",
    "active": true,
    "redirect_url": "pave://",
    "start_date": "September 17th, 2021"
}
```

{% endtab %}
{% endtabs %}

## Setting up for iOS

### Adding a URL scheme

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

![](/files/-MgtKdGLsC6bTyMIY2rw)

{% 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>
```

## 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="left"><img src="/files/-Mk2Q9QVlOsHR6Lx1ins" alt=""></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="left"><img src="/files/-Mk20sauauz2sfBvFhYS" alt=""></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)

<br>


---

# 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://deeplinkdoc.paveapi.com/setting-up/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.