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 yoursettings.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
}
}
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
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>");
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 toJAVA_HOME
:Ensure your Java 17 installation is valid.
Use
jenv
or manually configure your environment.
Last updated
Was this helpful?