Guides and Surveys React Native SDK | Amplitude Guides and Surveys

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

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

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

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

Async storage

Explicitly adding @react-native-async-storage/async-storage ensures the native module links correctly, since the engagement native module uses it.

Run pod install in the ios directory.

cd ios
bundle exec pod install

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

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

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

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

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.

Boot the plugin

When you "boot" the plugin with a user ID, Guides and Surveys are

import {
  track,
  setDeviceId,
  setUserId,
} from '@amplitude/analytics-react-native';
import { useEffect } from 'react';
 
export default function App() {
  useEffect(() => {
    //
    // setting the User ID in @amplitude/analytics-react-native
    // --and-- passing it to boot() is necessary
    //
    setUserId('rn-test-user-1');
    setDeviceId('test-device-1');
    getPlugin().boot('rn-test-user-1', 'test-device-1');
  }, []);
}

import {
  track,
  setDeviceId,
  setUserId,
} from '@amplitude/analytics-react-native';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
//
// setting the User ID in @amplitude/analytics-react-native
// --and-- passing it to boot() is necessary
//
setUserId('rn-test-user-1');
setDeviceId('test-device-1');
getPlugin().boot('rn-test-user-1', 'test-device-1');
}, []);
}