# React Native

## Implementing Pulse Insights in React Native

This documentation provides guidance for integrating Pulse Insights surveys into a React Native app. It includes general integration instructions, platform-specific guidance (iOS and Android), and setup for the React Native example/demo app.

***

## Overview

Pulse Insights offers a React Native SDK that bridges to our existing iOS and Android native SDKs. This allows you to easily embed surveys in your React Native app while benefiting from the full functionality of our native libraries.

Our SDK supports displaying surveys, collecting user input, and applying targeting and theming configurations. All surveys are rendered natively on each platform for optimal performance and user experience.

***

## React Native SDK Installation

For full installation instructions, refer to the[ SDK README on GitHub](https://github.com/Pulse-Insights/pi-react-native/blob/main/README.md).

To integrate the Pulse Insights SDK into your own React Native application:

#### 1. Install the Package

```
yarn add pulse-insight-react-native
```

or

```
npm install pulse-insight-react-native
```

***

## Native Project Configuration

Refer to the[ PulseInsight README](https://github.com/Pulse-Insights/pi-react-native/blob/main/PulseInsight/README.md) for complete platform-specific configuration.

### iOS:

* Navigate to the `ios` directory and install CocoaPods:

```
cd ios
pod install
cd ..
```

* Ensure the Pulse Insights host is set, otherwise surveys will not display.

### Android:

* Java 17 is required. We recommend using `jenv` or another Java version manager.
* Add the following to your root `build.gradle` file:

```
allprojects {
    repositories {
        maven {
            url "https://maven.pkg.github.com/Pulse-Insights/pi-android-sdk"
            credentials {
                username = GITHUB_USER_ID
                password = GITHUB_PERSONAL_ACCESS_TOKEN
            }
        }
    }
}
```

* Add `mavenCentral()`to your `settings.gradle`:

```
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
    }
}
```

* Update your app-level `build.gradle` to enable Java 17:

```
android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }
}
```

{% hint style="info" %}
If you run into build errors, ensure your `JAVA_HOME` is correctly set.
{% endhint %}

***

## Initialize the SDK in Your App

```
import { PulseInsights } from 'pulse-insight-react-native';

PulseInsights.getInstance().initialize("<account_id>");
```

***

## Optional Configuration (e.g. Environment Host)

To override the default production host (`survey.pulseinsights.com`), call:

```
PulseInsights.getInstance().setHost("<custom_host>");
```

***

## React Native Demo App

We provide a working example app to demonstrate how to use the SDK.

### Location

[PulseInsight/example/PIDemo](https://github.com/Pulse-Insights/pi-react-native/blob/main/PulseInsight/example/PIDemo/README.md)

### To Run the Demo

```
cd PulseInsight/example/PIDemo
yarn
cd ios && pod install && cd ..
yarn ios   # or yarn android
```

### Configuration

In `App.tsx`, update the following lines:

```
PulseInsights.getInstance().initialize("<account_id>");
PulseInsights.getInstance().setHost("<host_name>");
```

{% hint style="info" %}
By default, the host is `survey.pulseinsights.com`.
{% endhint %}

#### Notes

* You can test widget styles, theming, question routing, and targeting.

***

## Theme Support

Pulse Insights supports extensive theme customization using JSON theme objects.

* Note: Some theme properties differ across platforms (iOS, Android, React Native).

***

## Known Limitations

* Some styling behavior (e.g. padding, font rendering) differs slightly between Android and iOS.
* Not all question types are currently supported (e.g. slider, HTML in custom content).
* React Native SDK uses the native SDK at runtime. Platform-level inconsistencies may apply.

***

### Troubleshooting

* If the SDK fails to display surveys:
  * Confirm that `initialize()` has been called.
  * Verify that the hostname is valid and set.
  * Use Xcode or Android Studio logs for debugging native-level errors.
* If `yarn android` fails due to `JAVA_HOME`:
  * Ensure your Java 17 installation is valid.
  * Use `jenv` or manually configure your environment.

{% hint style="info" %}
For more help, contact <support@pulseinsights.com> or your account representative.
{% endhint %}

<br>