---
title: "Integrate your application"
section: "frontend/in-app-messaging"
platforms: ["angular", "javascript", "nextjs", "react", "react-native", "vue"]
gen: 2
last-updated: "2026-03-25T17:40:00.000Z"
url: "https://docs.amplify.aws/react/frontend/in-app-messaging/integrate-application/"
---

<!-- Platform: react-native -->
## Install the Amplify React Native Package and other dependencies
Installing the `@aws-amplify/react-native` will bring in the necessary polyfills for React Native. 

<details><summary>Instructions for React Native version 0.72 and below</summary>

`@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:

```diff showLineNumbers={false}
- platform :ios, min_ios_version_supported
+ platform :ios, 13.0
```

</details>

```bash title="Terminal" showLineNumbers={false}
npm add @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.

<Callout>

Learn more about Amplify In-App Messaging UI and how to fully unlock its capabilities here: [Amplify UI for In-App Messaging](https://ui.docs.amplify.aws/react-native/connected-components/in-app-messaging)
  
</Callout>

```bash title="Terminal" showLineNumbers={false}
npm add @aws-amplify/ui-react-native react-native-safe-area-context@^4.2.5
```
<!-- /Platform -->

<!-- Platform: javascript, angular, react, vue, react-native, nextjs -->

## Install Amplify UI for React

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.

<Callout>

Learn more about Amplify In-App Messaging UI and how to fully unlock its capabilities here: [Amplify UI for In-App Messaging](https://ui.docs.amplify.aws/react/connected-components/in-app-messaging)

</Callout>

```bash title="Terminal" showLineNumbers={false}
npm add @aws-amplify/ui-react @aws-amplify/ui-react-notifications
```
<!-- /Platform -->

## 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`.

<!-- Platform: react-native -->
```js
import { withInAppMessaging } from '@aws-amplify/ui-react-native';

const App = () => (
  {/* Your application code */}
);

export default withInAppMessaging(App);
```
<!-- /Platform -->

<!-- Platform: javascript, angular, react, vue, nextjs -->

```js title="src/App.js"
import { withInAppMessaging } from '@aws-amplify/ui-react-notifications';

import '@aws-amplify/ui-react/styles.css';

const App = () => (
  {/* Your application code */}
);

export default withInAppMessaging(App);
```
<!-- /Platform -->

Below is an example of what your entry file should look like:
<!-- Platform: react-native -->
```jsx title="src/index.js"
import React, { useEffect } from 'react';
import { Button, View } from 'react-native';
import {
  initializeInAppMessaging,
  syncMessages,
  dispatchEvent
} from 'aws-amplify/in-app-messaging';
import { withInAppMessaging } from '@aws-amplify/ui-react-native';
import { record } from 'aws-amplify/analytics';
import outputs from '../amplify_outputs.json';

Amplify.configure(outputs);
initializeInAppMessaging();

// 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.
    syncMessages();
  }, []);

  return (
    <View>
      {/* This button has an example of an analytics event triggering the in-app message. */}
      <Button
        onPress={() => {
          record(myFirstEvent);
        }}
        title="Record Analytics Event"
      />

      {/* This button has an example of an In-app Messaging event triggering the in-app message.*/}
      <Button
        onPress={() => {
          dispatchEvent(myFirstEvent);
        }}
        title="Send In-App Messaging Event"
      />
    </View>
  );
};

export default withInAppMessaging(App);
```
<!-- /Platform -->

<!-- Platform: javascript, angular, react, vue, nextjs -->

```jsx title="src/index.js"
import React, { useEffect } from 'react';
import {
  initializeInAppMessaging,
  syncMessages,
  dispatchEvent
} from 'aws-amplify/in-app-messaging';
import { Button, View } from '@aws-amplify/ui-react';
import { withInAppMessaging } from '@aws-amplify/ui-react-notifications';
import { record } from 'aws-amplify/analytics';
import '@aws-amplify/ui-react/styles.css';
import outputs from '../amplify_outputs.json';

Amplify.configure(outputs);
initializeInAppMessaging();

// 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.
    syncMessages();
  }, []);

  return (
    <View>
      {/* This button has an example of an analytics event triggering the in-app message. */}
      <Button
        onClick={() => {
          record(myFirstEvent);
        }}
      >
        Record Analytics Event
      </Button>

      {/* This button has an example of an In-app Messaging event triggering the in-app message.*/}
      <Button
        onClick={() => {
          dispatchEvent(myFirstEvent);
        }}
      >
        Send In-App Messaging Event
      </Button>
    </View>
  );
};

export default withInAppMessaging(App);
```
<!-- /Platform -->

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.