How to Add In-App Messages in React Native (Expo)
Tags: webdev, mobiledev, android, reactnative
Published: 2022-06-06 19:17:16

---
title: How to Add In-App Messages in React Native (Expo)
published: true
date: 2022-05-20 21:07:27 UTC
tags: webdev,mobiledev,android,reactnative
canonical_url: https://onesignal.com/blog/how-to-add-in-app-messages-in-react-with-onesignal-expo/
---

 ![How to Add In-App Messages in React Native (Expo)](https://onesignal.com/blog/content/images/2022/05/add-in-app-messages-in-react-native-expo.jpg)

[In-app messages](https://onesignal.com/in-app) (IAM) are highly customizable pop-up interstitials that mobile app user receive inside your application. Unlike push notifications, IAM don’t require opt-in permission and they only show when the users are actively using your application.

## **OneSignal & Your Browser's Push API**

It’s no secret that in-app messages can help you engage and [retain app users](https://onesignal.com/blog/easy-strategies-to-increase-app-retention/). This tutorial will show you how to integrate with the [React Native OneSignal NPM package](https://github.com/OneSignal/onesignal-expo-plugin) to leverage IAM in your React app.

Some valuable use cases for IAM include:

- **User Onboarding:** Guide your users through getting started with your application. Use an [in-app slide carousel](https://onesignal.com/blog/new-feature-in-app-carousel/) to [build an effective onboarding process](https://onesignal.com/blog/how-to-build-an-effective-mobile-app-onboarding-process/), introduce them to key application features, and emphasize the value your app will provide.
- **Announcing New Products & Features:** Inform your users when you have added new products and features to the application to improve adoption and enhance the UX.
- **Requesting Push Permission & Location Access:** Provide users with more context to [inform their opt-in decision](https://onesignal.com/blog/how-to-create-more-compelling-opt-in-messages-for-ios-push/) or request location or other access permissions that are vital to your application.
- **Encouraging Referrals:** Allow your users to invite their friends to your application with a single click to grow your active users and build community.

This tutorial will cover how to integrate the [React Native Expo OneSignal Plugin](https://github.com/OneSignal/onesignal-expo-plugin) (managed workflow) into your app in order to gain in-app messaging functionality. Part one of this guide covers the OneSignal setup process. Part two of this guide covers how to integrate OneSignal with React using our NPM package.

### Guide Overview

- [Part 1: Set up Your OneSignal Account](#part-1-set-up-your-onesignal-account) (for free!)
- [Part 2: Push Notification Setup in React](#part-2-push-notification-setup-in-react)
- [Send an In-App Message to Your Android Device](#send-an-in-app-message-to-your-android-device)

This tutorial requires some basic knowledge of React Native (Expo). I'm using the [Expo CLI](https://docs.expo.dev/get-started/installation/#installing-expo-cli) to generate my project and **NodeJS version 14.16**.

**Additional React Setup Resources:**

- [React Native (Expo) plugin Sample Ap](https://github.com/OneSignalDevelopers/OneSignal-React-NPM-Sample)

## Part 1: Set Up Your OneSignal Account

To begin, [login](https://app.onesignal.com/login) to your OneSignal account or [create a free account](https://app.onesignal.com/signup). Then, click on the blue button entitled _ **New App/Website** _ to configure your OneSignal account to fit your app or website.

![How to Add In-App Messages in React Native (Expo)](https://lh5.googleusercontent.com/mmDxy2BLsH0r6cTYs6pBt53Wc0pWoEAePBF2XR-dXRubANxdbkfBxXd2ren0MfUGrjvbSxPoIjy6tbNDRL_g4hwxpNa_MyHSxgK817OgDtsPmxXvAS7XCJ8uProuG_yWaudEgfRM1ZffVIXigQ)

Insert the name of your app or website. Select _ **Google Android** _ as your platform.

![How to Add In-App Messages in React Native (Expo)](https://lh3.googleusercontent.com/UMgdQ0-ewQrO8JWj-NqhGp7yENRAsWZ5gJzo2zQ7nV3tBZZGjlT6qJ1nX2Gs_Cw4l7MfdPEEjMfws_O4jeKUwdtdLdk-vWsvCeCi8v11uBYY6oJcdl4IEZxsN6RBGYDt03z9-gtjJ2d9q6810g)

Click on the blue button entitled, _ **Next: Configure Your Platform** _.

### **Google Android FCM Configuration**

It’s time to configure your Android app using a Firebase Server key. All Android apps require this key and the server ID if you want to send push notifications. If you don’t have the Firebase Server Keys, take a look at our documentation to learn [how to generate a Firebase server API key](https://documentation.onesignal.com/docs/generate-a-google-server-api-key).

![How to Add In-App Messages in React Native (Expo)](https://lh5.googleusercontent.com/vL286nxIjKWeEbPDVE591BEgqJDj05Lhqvt7l9lhaZzSY9TmY94ncSsoS-LTMsMORHoqMc2vOAMLNnlP3MmszN0ZVRLfXykiaPDha3iCGbp_sB-292FqvNMo105SqyNkp3b0cOjjGlGm_dZopA)

Now select your target SDK. We'll take you through the steps to get your first user and send your first test notification.

![How to Add In-App Messages in React Native (Expo)](https://lh6.googleusercontent.com/UnAuqw-DiXoSCyQHRawunv-u4ys4IjxQWgfuDqc8rsu2cPfrZAfzqRQiPsDrMDufK9QOE9stjCecGD0EIALzuJs0Wl2l9G2cgO3OU3dgZfn7jlyqRaONUO0OOBK9VZD-_OA6Ghm1vuyrlRXamg)

On the next screen that appears, you will see your app ID — copy that app ID because you will use it inside of your Expo Application. **DO NOT** click to **_Check Subscribed Users_** or **_Done_** yet.

![How to Add In-App Messages in React Native (Expo)](https://lh6.googleusercontent.com/vm5pRv1rygAfjzghVDNa-jTy1OxOkW18g7WUUeVB38zb11PJOxJ9dMqhh-Ayfo1ZCl_ZPQBJLa9u4AuHKHyLJ1-fW6EX78pcZ52xRH2KbhagNqhvm1MBiuVQ1P_5qyXz3BXXm0ML3M7S9GXnOg)

## Part 2: Push Notification Setup In React Native Expo

### Creating Your React App

Inside of your terminal, run the following commands to create a new React project using Create   
Expo App:

```
expo init onesignal-rn-expo
```

When asked, selec any of the options under the **_Managed Workflow_**. In my case, I selected the first option, which is **_blank_**.

![How to Add In-App Messages in React Native (Expo)](https://lh4.googleusercontent.com/IYDO7EONtfeZAiLYsjnjYiej-oevyB0i4awuljvxjV6PZEZmOWqwzeY1aIe3mxRcmOJMto-3fCLhfp_5MVpZe01NKCeswoHYLb53b2azEI-SPAbLwCiR9dsk0YPXaIa3Mlidhaad7XU0IGq6sA)

```
cd onesignal-rn-expo
expo start
```

For the official Expo, documentation click [here](https://docs.expo.dev/get-started/create-a-new-app/).

### Install OneSignal Expo Plugin

Inside of your project folder, open your terminal and run the following command to install the [OneSignal Expo Plugin](https://github.com/OneSignal/onesignal-expo-plugin) package.

```
expo install onesignal-expo-plugin
```

Next, install the React Native OneSignal plugin by running the following command:

```
yarn add react-native-onesignal
```

Even though `onesignal-expo-plugin` defines `react-native-onesignal` as a dependency and it gets put into the `node_module`, it will make sure the native parts get built.

If you forgot to run the following command after you have built your project, you can fix this by running expo prebuild --clean. This should delete android and ios and do a clean native build, then run the yarn add `react-native-onesignal`.

## Configuration in app.json / app.config.js

Inside the `app.json/app.config.js` file, add the plugin to the [plugin array](https://docs.expo.dev/versions/latest/config/app/):

### App.json

```
{
  "plugins": [
    [
      "onesignal-expo-plugin",
      {
        "mode": "development",
        "devTeam": "91SW8A37CR"
      }
    ]
  ]
}

```

or

### App.config.js

```
export default {
...
plugins: [
        [
        "onesignal-expo-plugin",
            {
                mode: process.env.NODE_ENV || "development",
                devTeam: "91SW8A37CR"
            }
        ]
	]
};
```

### Plugin Options

- `mode`: used to configure [APNs environment](https://developer.apple.com/documentation/bundleresources/entitlements/aps-environment) entitlement.
- `"development"`
- `"production"`
- `devTeam`: \*optional\* used to configure Apple Team ID. You can find your Apple Team ID by running `expo credentials:manager`.

**Example:**

```
{
    "extra": {
    	"oneSignalAppId": "<YOUR APP ID HERE>"
    }
}
```

You can then access the value to pass to the `setAppId` function:

```
import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";
OneSignal.setAppId(Constants.manifest.extra.oneSignalAppId);
```

Alternatively, pass the OneSignal app ID directly to the function:

```
import OneSignal from 'react-native-onesignal';
import Constants from "expo-constants";

OneSignal.setAppId("YOUR-ONESIGNAL-APP-ID");
```

### Run & Build your Application

```
expo prebuild
# Build your native iOS project
$ expo run:ios
# Build your native Android project
expo run:android
```

## Send an In-App Message to your Android Device

I recommend you run the application on an actual Android device to test the in-app messages. To do so, you will need to connect your Android device and enable [developer mode](https://developer.android.com/studio/debug/dev-options).

Once you have connected to the device and enabled developer mode, run the application on your device by selecting your device as the target device. In my example, I’m running the app on a **Google Pixel 5**.

![How to Add In-App Messages in React Native (Expo)](https://lh4.googleusercontent.com/n4CUphIQxx3Cy3uTNuSeAbr3oVjuS8OolfjMtLnM0iEext6VprhmTqiopVKsexQFvyole6MxwlAs1TjrKaTJp5XYTsjEN3QVhoY5U4wf5QSUT98tIN_A9vkHdA1Ak3VQOLM-Uw5wzQbLnqAGvQ)

Once you have opened the application on your device, the device will be automatically be subscribed to notifications. Now, your device will be able to receive notifications sent by OneSignal.  
  
To complete the setup process, return to your OneSignal dashboard to the point at which you previously left off. Click on the _ **Check Subscribed Users** _ button and a green message will appear like the one in the image below.

![How to Add In-App Messages in React Native (Expo)](https://lh6.googleusercontent.com/hpI4isUt78oBqR30nY39oeAYV3ZcfHq_KLgNyQhKcnDHnfGjJuJm7KR6-er-qUzBWfTjrh_ogAWzVvbKECXrdibUBs6IEpJ7rqB-WUtJYKiwlAjxG8dBhqXBDlYva06fE2VLkepGwOPZEHnUCw)

Click on the _ **Done** _ button.

### Create an In-App Message

It’s time to send your first in-app message! To do so, login to your OneSignal account and navigate to the **_Dashboard_** tab. On the dashboard page, click on the tab that says **_Messages_** and you will be redirected to a new page.

![How to Add In-App Messages in React Native (Expo)](https://lh6.googleusercontent.com/4GgK6n4VfIDMlbN2AuXt5kRbjVIg64L-lcUtb7Y2sEjcwVoK-t1HCeUsSkXSGFS9r4EYq01a3PUiPibT-0oyYmJmwZ6vbYotaRO3wrLNv-V7I6UFmr1LXrGR6LzkgJv_PhD4dtgYFfBfyeMWyQ)

Select the _ **In-App** _ tab from the submenu.

![How to Add In-App Messages in React Native (Expo)](https://lh6.googleusercontent.com/xpLj2MNhOgXUdfazMqbwpCh7H_ng57drr5e22ZfdKoUDLDvuHgYFCUnxnyIXccE9PMZJW0aNR8HEs1f5lUkTfbXWMCJP6g-Jnam2A_m8tK7G_8nPniC6SXMSyV4e9PDSfURGD09VWZAdE1yGyA)

After clicking on **_In-App,  _** you will see the In-App Messages dashboard (pictured below). Click on the blue button **_New In-App_** button to create your first message.

![How to Add In-App Messages in React Native (Expo)](https://lh3.googleusercontent.com/QqYixzwUhOq2rMNCR_D9AqlNrFoLsQkmIkC6KFr4at8XTlrLFW3zsvqwhJxRXQvODMXwAqLi4KJIxSOlUN9YxoFXaUkiNAGuR1iefIOZFgBhW2dn1LZwsnyKa0E6rJ-mzlDz6OnTHf8l3dme_Q)

On this page, you customize the In-App Message, from the content to display, the position, the image, your audience, and more.

![How to Add In-App Messages in React Native (Expo)](https://lh3.googleusercontent.com/Trn46CgKJ14dgMzYRAoZZroQ-DPMW2f_ur07e-CUTXZ-0Z1u3RhLA2l4MSYPgbq6wzl4fNRlTejjhVPiJFr1DaaKE-3lTN85TA4G1elFh3vxDXZerVz3LcWNTpmZEITc2eVBadoWhe4M_9nDjg)

Once you have finishing configuring sections one and two, scroll down to the triggers section (Section three. For testing purposes, select the _ **On app open** _ option. This option will automatically trigger the in-app message to appear when the app is opened.

![How to Add In-App Messages in React Native (Expo)](https://lh5.googleusercontent.com/e1_dKkgBQMB8mCMYmrQovP-QqFYHqmRzWlzYs54a_pzyi_HQoSHgnZ5SU1oSYkntospJ-3V-UXGHE8VnlNQRtJN3MlCATxHVuP-WZOKM0HLLoOqMb3tT_bBH3kzc0JWKzUWzzAoSR7bvelBOJQ)

Lastly, in the Schedule section, make sure your configuration looks like the following:

![How to Add In-App Messages in React Native (Expo)](https://lh6.googleusercontent.com/XbawhDcDijbP67qmATndvse_VZxkuhxdJbETcYtb1E2IFYNVWKoooBLZ5wboeFDf-LoYd7FibzAwZpOLrqr43kHrTA9igtDI1bhMlJZF5rEpHQfCY_-0SgBYo1pbjv0xKKRA7BO0GmBGscBQrg)
_Under Schedule, select "Immediately," "Show forever," "Show until dismissed," and "Only once."_

This configuration will send the message immediately and only once when you open the app.

Now it's time to set your in-app message live! To do so, click on the blue button that says _ **Make Message Live** _.

## Connect With Us

Don’t forget to follow the [OneSignal Developers Twitter](https://twitter.com/onesignaldevs) and join our [Discord server](https://discord.gg/EP7gf6Uz7G) to learn more and connect with the OneSignal community of developers around the world.

Want to learn more about the OneSignal community? Visit our [official website](https://onesignal.com/onesignal-developers).