@amplitude/plugin-engagement-react-native NPM

@amplitude/plugin-engagement-react-native

Amplitude Engagement plugin for React Native

Installation

To install:

Add @amplitude/analytics-react-native and @amplitude/plugin-engagement-react-native
Also, add @react-native-async-storage/async-storage
- Why? This is used by the engagement native module, but the CLI only auto links native modules which you directly depend on in your app’s package.json

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

Add the source for the AmplitudeEngagementSwift pod to your Podfile:

target '<your appname>' do
  ...

  pod "AmplitudeEngagementSwift", :git => "https://github.com/amplitude/Amplitude-Engagement-Swift"

  ...
end

Re-run pod install in the ios directory:

$ cd ios
$ bundle exec pod install

Usage

Setup code

Setup by adding the plugin and calling “init” as usual:

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

Linking setup

If you don't already have it set up, please follow this guide to enable deep-linking support in your React Native app in addition to adding the above Linking code: https://reactnative.dev/docs/linking#enabling-deep-links

Then, following the Alpha Onboarding guide to setup the "scheme" for the deep links in your Android and iOS projects.

Boot

Finally, “boot” with the user’s ID:

import {
  boot
} from '@amplitude/plugin-engagement-react-native';

export default function App() {
  useEffect(() => {
    boot('rn-test-user-1', 'test-device-1');
  }, []);