# React Native Android using React Navigation

>[!NOTE]
>**Expo SDK** 41-54 using React Navigation 5+ is supported. See dedicated [Expo integration instructions](/android/pnddocs/expo_rn-android.md).

>[!IMPORTANT]
>- We support a codeless solution for React Native 0.6-0.83 using react-navigation 5+.
>- Support for React Native's New Architecture (Fabric) is available starting from version 3.7.2.

>[!IMPORTANT]
>Requirements:
>- Android Gradle Plugin `8.0` or higher
>- Kotlin version `1.9.0` or higher
>- JAVA version `11` or higher
>- minSdkVersion `21` or higher
>- compileSDKVersion `35` or higher

## Step 1. Install the Pendo SDK

1. In the **root folder of your project**, add Pendo using one of your package managers: 

    ```shell
    #example with npm
    npm install --save rn-pendo-sdk

    #example with yarn
    yarn add rn-pendo-sdk
    ```

2. In the application **android/build.gradle** file:  
- **Add the Pendo Repository to the repositories section under the allprojects section or to the settings.gradle if using dependencyResolutionManagement:**

    ```java
    allprojects { 
        repositories {
            maven {
                url = uri("https://software.mobile.pendo.io/artifactory/androidx-release")
            }
            mavenCentral()
        }
    }
    ```

- **Minimum and compile SDK versions**  
If applicable, set your app to be compiled with **compileSdkVersion 35** or higher and **minSdkVersion 21** or higher:

  ```java
  android {
      minSdkVersion 21
      compileSdkVersion 35
  }
  ```
 
3. In the application **AndroidManifest.xml** file:  
Add the following `<uses-permission>` to the manifest in the `<manifest>` tag:

    ```xml
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    ```

4. #### Modify Javascript minification

    When bundling for production, React Native minifies class and function names to reduce the size of the bundle. This means there is no access to the original component names that are used for the codeless solution.

    In the application **metro.config.js**, add the following statements in the transformer:

    ```javascript
    module.exports = {
      transformer: {
        // ...
        minifierConfig: {
            keep_classnames: true, // Preserve class names
            keep_fnames: true, // Preserve function names
            mangle: {
              keep_classnames: true, // Preserve class names
              keep_fnames: true, // Preserve function names
            }
        }
      }
    }
    ```

5.  #### Using ProGuard 
  
    If you are using **ProGuard(D8/DX only)** to perform compile-time code optimization, and have `{Android SDK Location}/tools/proguard/proguard-android-optimize.txt`, add `!code/allocation/variable` to the `-optimizations` line in your `app/proguard-rules.pro` file. The optimizations line should look like this:  
    `-optimizations *other optimizations*,!code/allocation/variable`

## Step 2. Integrate with the Pendo SDK

>[!NOTE]
>Find your API key in the Pendo UI under `Settings` > `Subscription settings` > select an app > `App Details`.

1. In the application **main file (App.js/.ts/.tsx)**, add the following code:

    ```javascript
    import { PendoSDK, NavigationLibraryType } from 'rn-pendo-sdk';

    function initPendo() {
        const navigationOptions = {library: NavigationLibraryType.ReactNavigation};
        const pendoKey = 'YOUR_API_KEY_HERE';
        //note the following API will only setup initial configuration, to start collect analytics use startSession
        PendoSDK.setup(pendoKey, navigationOptions);
    }   
    initPendo();
    ```

2. Initialize Pendo where your visitor is being identified (e.g., login, register, etc.).

    ```javascript
    const visitorId = 'VISITOR-UNIQUE-ID';
    const accountId = 'ACCOUNT-UNIQUE-ID';
    const visitorData = {'Age': '25', 'Country': 'USA'};
    const accountData = {'Tier': '1', 'Size': 'Enterprise'};

    PendoSDK.startSession(visitorId, accountId, visitorData, accountData);
    ```

3. In the file where the `NavigationContainer` is created.

   Import `WithPendoReactNavigation`:

    ```javascript
    import {WithPendoReactNavigation} from 'rn-pendo-sdk'    
    ```

   Wrap `NavigationContainer` with  `WithPendoReactNavigation` HOC:

   ```javascript
    const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer);    
    ```

   replace `NavigationContainer` tag with `PendoNavigationContainer` tag:

    ```javascript
   <PendoNavigationContainer>
   {/* Rest of your app code */}
   </PendoNavigationContainer>
   ```

    **Notes:**  

    **visitorId**: a user identifier (e.g., John Smith)  
    **visitorData**: the user metadata (e.g., email, phone, country, etc.)  
    **accountId**: an affiliation of the user to a specific company or group (e.g., Acme inc.)  
    **accountData**: the account metadata (e.g., tier, level, ARR, etc.)  

>[!TIP]
>To begin a session for an  <a href="https://support.pendo.io/hc/en-us/articles/360032202751" target="_blank">anonymous visitor</a>, pass ```null``` or an empty string ```''``` as the Visitor ID. You can call the `startSession` API more than once and transition from an anonymous session to an identified session (or even switch between multiple identified sessions). 


## Step 3. Connect mobile device for tagging and testing

>[!NOTE]
>Find your scheme ID in the Pendo UI under `Settings` > `Subscription settings` > select an app > `App Details`.

This step enables Page <a href="https://support.pendo.io/hc/en-us/articles/360033609651-Tagging-Mobile-Pages#HowtoTagaPage" target="_blank">tagging</a>
and <a href="https://support.pendo.io/hc/en-us/articles/360033487792-Creating-a-Mobile-Guide#test-guide-on-device-0-6" target="_blank">guide</a> testing capabilities.

Add the following **activity** to the application **AndroidManifest.xml** in the `<Application>` tag:

```xml
<activity android:name="sdk.pendo.io.activities.PendoGateActivity" android:launchMode="singleInstance" android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="YOUR_SCHEME_ID_HERE"/>
    </intent-filter>
</activity>
```

## Step 4. Verify installation

1. Test using Android Studio:  
Run the app while attached to the Android Studio.  
Review the Android Studio logcat and look for the following message:  
`Pendo SDK was successfully integrated and connected to the server.`
2. In the Pendo UI, go to `Settings` > `Subscription Settings`.
3. Select your application from the list.
4. Select the `Install Settings tab` and follow the instructions under `Verify Your Installation` to ensure you have successfully integrated the Pendo SDK.
5. Confirm that you can see your app as `Integrated` under <a href="https://app.pendo.io/admin" target="_blank">subscription settings</a>.

## Developer documentation

- API documentation available [here](/api-documentation/rn-apis.md).
- Sample app with Pendo SDK integrated available <a href="https://github.com/pendo-io/RN-demo-app-React-Navigation" target="_blank">here</a>.

## Troubleshooting

- For technical issues, please [review open issues](https://github.com/pendo-io/pendo-mobile-sdk/issues) or [submit a new issue](https://github.com/pendo-io/pendo-mobile-sdk/issues).
- See our [release notes](https://developers.pendo.io/category/mobile-sdk/).
- For additional documentation, visit our [Help Center](https://support.pendo.io/hc/en-us/categories/23324531103771-Mobile-implementation).