1. Home
  2. Developer Guides
  3. React Native
  4. React Native Integration Reference

React Native Integration Reference

Getting started

For most React Native apps, installation should be as simple as installing the apptentive-react-native module.

npm install apptentive-react-native --save


Create one app for each supported platform in your Apptentive Dashboard (i.e. one Android app and one iOS app if you support both platforms that Apptentive supports). Then navigate to the API & Development section under the Settings tab for each of your apps, and note the Apptentive App Key and Apptentive App Signature.

Then in your App.js file, add code to register the Apptentive SDK:

import { Apptentive, ApptentiveConfiguration } from "apptentive-react-native";

const credentials = Platform.select({
  ios: {
    apptentiveKey: "<YOUR_IOS_APP_KEY>",
    apptentiveSignature: "<YOUR_IOS_APP_SIGNATURE>"
  android: {
    apptentiveKey: "<YOUR_ANDROID_APP_KEY>",
    apptentiveSignature: "<YOUR_ANDROID_APP_SIGNATURE>"

export default class App extends Component {
  componentDidMount() {
    const configuration = new ApptentiveConfiguration(
    // Override log level for debugging (optional)
    configuration.logLevel = 'verbose';

Again, be sure to use separate credentials for each platform, as supporting both platforms with one set of credentials is not supported.


The React Native plugin for both iOS and Android includes the native SDKs for the respective platforms as transitive dependencies that exist outside of the npm ecosystem (i.e. they are not listed in package.json)

The native Android SDK dependency is typically specified down to a particular patch version, for example 5.8.3 (in android/build.gradle).

The native iOS SDK is typically specified as some minimum version, up to but not including the next minor version, for example ~> 6.0.2 (in apptentive-react-native.podspec).

This means that customers can update the iOS native SDK dependency by running:

cd ios
pod update ApptentiveKit

…in their project directory.

Message Center

See: How to Use Message Center

Showing Message Center

With the Apptentive Message Center your customers can send feedback, and you can reply, all without making them leave the app. Handling support inside the app will increase the number of support messages received and ensure a better customer experience.

Message Center lets customers see all the messages they have send you, read all of your replies, and even send screenshots that may help debug issues.

Add Message Center to talk to your customers.

Find a place in your app where you can add a button that opens Message Center. Your setings page is a good place.

  onPress={() => {
      .then((presented) => console.log(`Message center presented: ${presented}`));
  title="Show Message Center"

Unread Message Count Callback

You can receive a callback when a new unread message comes in. You can use this callback to notify your customer, and display a badge letting them know how many unread messages are waiting for them. Because this listener could be called at any time, you should store the value returned from this method, and then perform any user interaction you desire at the appropriate time.

Apptentive.onUnreadMessageChange = (count) => {
  console.log(`Unread message count changed: ${count}`)


Events record user interaction. You can use them to determine if and when your dashboard Interactions will be shown to your customer. In your app, trigger an Event with the Engage() method. This will record the Event, and then check to see if any Interactions targeted to that Event are allowed to be displayed, based on the logic you set up in the Apptentive Dashboard.

Apptentive.engage(this.state.eventName).then((engaged) => console.log(`Event engaged: ${engaged}`))

You can add an Event almost anywhere in your app, just remember that if you want to show an Interaction at that Event, it needs to be a place where launching an Activity will not cause a problem in your app. Some places that may cause problems are right before an Activity change or when your app is in the background.

Now that you have your Events, to test Interactions such as the Love Dialog or Rating Dialog, follow the steps outlined in our native testing guides: Android | iOS 

Custom Data

You can send Custom Data associated with either the device, or the person using the app. This is useful for sending user IDs, user attributes (e.g., loyalty status,  and other information that helps you support your users better. Custom Data can also be used for configuring when Interactions will run. The calls return a Promise and are `then`-able. You can add custom data of type String, Number, and Boolean.

Apptentive.addCustomDeviceData('debug', true);
Apptentive.addCustomDeviceData('build', 1);
Apptentive.addCustomDeviceData('version', 'v1.34');
// Remove a key/value pair

Apptentive.addCustomPersonData('paid', true);
Apptentive.addCustomPersonData('level', 3);
Apptentive.addCustomPersonData('status', 'PRO');
// Remove a key/value pair

Push Notifications

Apptentive can send push notifications to ensure your customers see your replies to their feedback in Message Center.


On iOS, you’ll need to follow Apple’s instructions on adding Push capability to your app.

You will need to export your push certificate and key in .p12 format and upload it to the Integrations section of the Settings tab in your Apptentive dashboard under “Apptentive Push”. You can find more information on this process in the Push Notifications section of our iOS Integration Reference.

You will then edit your AppDelegate.m file. First import the Apptentive SDK at the top level of this file:

@import Apptentive;

Then add the following methods to your App Delegate class:

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
    // Register for Apptentive's push service:
    [Apptentive.shared setPushNotificationIntegration:ApptentivePushProviderApptentive withDeviceToken:deviceToken];

    // Uncomment if using PushNotificationsIOS module:
    //[RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
    // Forward the notification to the Apptentive SDK:
    BOOL handledByApptentive = [Apptentive.shared didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];

    // Be sure your code calls the completion handler if you expect to receive non-Apptentive push notifications.
    if (!handledByApptentive) {
        // ...handle the push notification
        // ...and call the completion handler:

        // Uncomment if using PushNotificationIOS module (and remove the above call to `completionHandler`):
        //[RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
    // Forward the notification to the Apptentive SDK:
    BOOL handledByApptentive = [Apptentive.shared didReceiveLocalNotification:notification fromViewController:self.window.rootViewController];

    // Uncomment if using PushNotificationIOS module:
    //if (!handledByApptentive) {
    //    [RCTPushNotificationManager didReceiveLocalNotification:notification];

Apptentive’s push services work well alongside other push notification services, such as those handled by the PushNotificationIOS React Native module . Note that you will have to implement the handful of additional methods listed in the documentation in your App Delegate to support this module.

Updated on November 4, 2022

Was this article helpful?

Related Articles