Integrate your application

In your application directory, you should first install the necessary dependencies for using In-App Messaging.

Install Amplify and its dependencies

1npm install aws-amplify@^5 amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill

You need to add the crypto.getRandomValues and URL polyfills to your application's entry point file (in most React Native apps this will be the top level index.js).

1// Example index.js
2import 'react-native-get-random-values';
3import 'react-native-url-polyfill/auto';
4
5import { AppRegistry } from 'react-native';
6import App from './App';
7import { name as appName } from './app.json';
8
9AppRegistry.registerComponent(appName, () => App);

Install Amplify UI for React Native and its dependencies

Although Amplify In-App Messaging can be used as a standalone JavaScript library, this guide will show you how to use it together with Amplify UI which currently supports integration with React and React Native to get started quickly.

Learn more about Amplify In-App Messaging UI and how to fully unlock its capabilities here: Amplify UI for In-App Messaging

1npm install @aws-amplify/ui-react-native react-native-safe-area-context

Configure Amplify

Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point. For example, App.js (Expo) or index.js (React Native CLI).

1import { Amplify } from 'aws-amplify';
2import awsconfig from './src/aws-exports';
3
4Amplify.configure(awsconfig);

Integrate In-App Messaging

Amplify UI provides a Higher-Order Component for ease of integrating the In-App Messaging UI with your application. Simply wrap your application root component in, for example, App.js.

1import { withInAppMessaging } from '@aws-amplify/ui-react-native';
2
3const App = () => (
4  {/* Your application */}
5);
6
7export default withInAppMessaging(App);

Now your application is set up with Amplify In-App Messaging. To interact with Amplify In-App Messaging APIs, you will first need to import the Notifications category.

1import { Notifications } from 'aws-amplify';

The In-App Messaging feature is a subcategory of Notifications. To make it easier to access throughout your application, you can de-structure it.

1const { InAppMessaging } = Notifications;

Below is an example of what your entry file should look like:

1import React, { useEffect } from 'react';
2import { Button, View } from 'react-native';
3import { Analytics, Notifications } from 'aws-amplify';
4import { withInAppMessaging } from '@aws-amplify/ui-react-native';
5
6const { InAppMessaging } = Notifications;
7
8// To display your in-app message, make sure this event name matches one you created
9// in an In-App Messaging campaign!
10const myFirstEvent = { name: 'my_first_event' };
11
12const App = () => {
13  useEffect(() => {
14    // Messages from your campaigns need to be synced from the backend before they
15    // can be displayed. You can trigger this anywhere in your app. Here you are
16    // syncing just once when this component (your app) renders for the first time.
17    InAppMessaging.syncMessages();
18  }, []);
19
20  return (
21    <View>
22      {/* This button has an example of an analytics event triggering the in-app message. */}
23      <Button
24        onPress={() => {
25          Analytics.record(myFirstEvent);
26        }}
27        title="Record Analytics Event"
28      />
29
30      {/* This button has an example of an In-app Messaging event triggering the in-app message.*/}
31      <Button
32        onPress={() => {
33          InAppMessaging.dispatchEvent(myFirstEvent);
34        }}
35        title="Send In-App Messaging Event"
36      />
37    </View>
38  );
39};
40
41export default withInAppMessaging(App);

You can now build and run your app in your terminal. If you click on one of the buttons shown in the above example, the in-app message you defined in the Pinpoint console should be displayed in your app.

Create an in-app messaging campaign

Sync messages