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.

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 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
    }
}

If you run into build errors, ensure your JAVA_HOME is correctly set.

---

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

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>");

By default, the host is survey.pulseinsights.com.

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.

For more help, contact [email protected] or your account representative.