Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Apr 29, 2024

Integrate your application

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

npm install aws-amplify

Initialize In-App Messaging

To finish setting up your application with Amplify, you need to configure it using the configure API. Next, to interact with In-App Messaging APIs, you need to first initialize In-App Messaging by calling the initializeInAppMessaging API directly imported from the in-app-messaging sub-path. This is required to be called as early as possible in the app lifecycle.

import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';
import { initializeInAppMessaging } from 'aws-amplify/in-app-messaging';

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.

Install the Amplify React Native Package and other dependencies

Installing the @aws-amplify/react-native will bring in the necessary polyfills.

Instructions for React Native version 0.72 and below

@aws-amplify/react-native requires a minimum iOS deployment target of 13.0 if you are using react-native version less than or equal to 0.72. Open the Podfile located in the ios directory and update the target value:

- platform :ios, min_ios_version_supported
+ platform :ios, 13.0
npm install @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage

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

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

Integrate Amplify UI

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.

import { withInAppMessaging } from '@aws-amplify/ui-react-native';
const App = () => (
{/* Your application */}
export default withInAppMessaging(App);

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

import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import {
} from 'aws-amplify/in-app-messaging';
import { withInAppMessaging } from '@aws-amplify/ui-react-native';
import { record } from 'aws-amplify/analytics';
import amplifyconfig from './amplifyconfiguration.json';
// To display your in-app message, make sure this event name matches one you created
// in an In-App Messaging campaign!
const myFirstEvent = { name: 'my_first_event' };
const App = () => {
useEffect(() => {
// Messages from your campaigns need to be synced from the backend before they
// can be displayed. You can trigger this anywhere in your app. Here you are
// syncing just once when this component (your app) renders for the first time.
}, []);
return (
{/* This button has an example of an analytics event triggering the in-app message. */}
onPress={() => {
title="Record Analytics Event"
{/* This button has an example of an In-app Messaging event triggering the in-app message.*/}
onPress={() => {
title="Send In-App Messaging Event"
export 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.