Guides and Surveys React Native SDK

Amplitude's Guides and Surveys SDK enables you to deploy Guides and Surveys on your website or application.

Requirements

The Guides and Surveys React Native SDK requires:

• The "new" React Native architecture
• React Native 0.79.2+
• Android Gradle 8.7.2+
• Gradle 8+
• iOS 15+
• Swift 5.9+

Install the SDK

Install the Guides and Surveys React Native SDK as a package with npm or Yarn.

npm install @amplitude/plugin-engagement-react-native
npm install @react-native-async-storage/async-storage

yarn add @amplitude/plugin-engagement-react-native
yarn add @react-native-async-storage/async-storage

Run pod install in the ios directory.

cd ios
bundle exec pod install

Initialize the SDK

//index.js
import {Linking} from 'react-native';

import { init, add } from '@amplitude/analytics-react-native';
import { getPlugin, handleURL } from '@amplitude/plugin-engagement-react-native';

init('<<< YOUR API KEY HERE >>>'); 
add(getPlugin());

Linking.getInitialURL().then(async (url) => {
    if (url) {
    const didHandleURL = await handleURL(url);
    if (didHandleURL) { return; }

    // Handle a non-Amplitude SDK URL
    }
});

Linking.addEventListener('url', async ({ url }) => {
    const didHandleURL = await handleURL(url);
    if (didHandleURL) { return; }

    // Handle a non-Amplitude SDK URL
});

Element targeting

Pin and tooltip guides require the ability for the SDK to target specific views on screen. The Engagement SDK uses the "testID" property on an element in the React Native DOM.

In the example component below, "welcome-banner" is the element targeting string that should be used in the Guides and Surveys dashboard.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

/**
 * A simple component with a testID that can be targeted
 * by the Amplitude Guides & Surveys SDK.
 */
export default function WelcomeBanner() {
  return (
    <View
      testID="welcome-banner"   // Element targeting via testID
      style={styles.banner}
    >
      <Text style={styles.bannerText}>
        Welcome to the App!
      </Text>
    </View>
  );
}

Configure linking

If your app doesn't have deep linking enabled, follow the React Native instructions to add support for deep linking. Previewing Guides and Surveys on a device requires this support.

Locate the mobile URL scheme

In Amplitude, navigate to your Project's settings.

On the General tab, locate the URL scheme (mobile) field. Copy its value, for example, amp-abc123.

Changelog

You can access the changelog here.