How To Add Android Push Notifications to a React Native Expo App
Tags: react, mobile, android, reactnative
Published: 2022-02-02 21:59:14

---
title: How To Add Android Push Notifications to a React Native Expo App
published: true
date: 2021-12-22 21:32:10 UTC
tags: #react, #mobile, #android, #reactnative
canonical_url: https://onesignal.com/blog/how-to-add-android-push-notifications-to-your-react-native-expo-app/
---

 ![How To Add Android Push Notifications to a React Native Expo App](https://onesignal.com/blog/content/images/2021/12/add-android-push-notifications-to-react-native-expo-app.jpg)

It’s no secret that push notifications can help you engage and retain app users. In this tutorial, we'll show you how to integrate with the React-OneSignal NPM package to leverage push notifications in your React app for free.

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

A mobile push API gives mobile applications the ability to receive messages from a server whether or not the app is in the foreground. This lets you deliver asynchronous notifications and updates to users who opt-in, resulting in better engagement with timely new content.

This tutorial will cover how to integrate the new [React Native Expo OneSignal Plugin](https://github.com/OneSignal/onesignal-expo-plugin) to add mobile push notifications into your application using our typical setup process. 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)**
- [Google Android FCM Configuration](#google-android-fcm-configuration)
- **[Part 2: Set Up Push Notifications in React Native Expo](#part-2-set-up-push-notifications-in-react-native-expo)**
- [Create Your React Native App](#create-your-react-native-app)
- [Install the OneSignal Expo Plugin](#install-the-onesignal-expo-plugin)
- [Configure the Plugin](#configure-the-plugin)
- [Run and Build Your Application](#run-and-build-your-application)
- **[Send Push Notifications to Android Devices](#send-push-notifications-to-android-devices)**
- [Connect With Our Developer Community](#connect-with-our-developer-community)

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**

### Additional 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, [log in](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 Android Push Notifications to a React Native Expo App](https://lh6.googleusercontent.com/30rSEw3USzJOb2Xt7gr_AH9M7dWQQBYBWOOfCwT4oVNJAowzpvDhbeKThTIpSp-zrzjUd7lFxotlCujJ4MFKBZeULraqvVF9Wg4_5Mr-EW6FgpUoTl8nLgw619zbROKes39Pa2DH)

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

![How To Add Android Push Notifications to a React Native Expo App](https://lh6.googleusercontent.com/c7nrKHFzPjeo7bJkfz4N2z8wH7XaatQdV-RHbSq9u46HvvDrSsKnAJYghrvgkziCMVY_HFre5rXVjCyRkhmNGnRTi1FpzXG-bzF2w9tJzdFWwAupgbTFPxhAIToS4FRlAM66TG2y)

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 in order to send push notifications. If you don’t have the Firebase Server API 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 Android Push Notifications to a React Native Expo App](https://lh6.googleusercontent.com/THZKoWNEWC9QlbD-Ghnhf7yvk-9c8bVqVgyaHDp9z2ZE_ddBjo9Nng0DSEqxK7Qy85AJvr7THK_8ebhXvSUQKnlaDd9VhgsGy9t1BPtck662YZmXaik01IovQfoSOKl3T74_JAHs)

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

![How To Add Android Push Notifications to a React Native Expo App](https://lh6.googleusercontent.com/fJ6kweiFQFLPI2w1t1YzmwlWIChFgxCIIde7nVRzhEWdNEgZ2c5ItuktUaEiqI4HS7Px8fJMMPOOVWdTEn9_ihUS_yLcqML42WKRVy8Wm25O-74-N85vl4ba-f6hRppmpAm02osX)

In 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 Android Push Notifications to a React Native Expo App](https://lh3.googleusercontent.com/b7naSr2_MDfnGERBjK0zuu9-CScalOsxkSSKe32bwLvaVk4foIaalrCNWu0M-6AR2QmblGworiUnw2M9Qbjs2kMXm1cexTAoKJxC0Zh1dSmBjp0QiXf3Im93YJOY98POngnBRWXJ)

## Part 2: Set Up Push Notification in React Native Expo

### Create Your React Native 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, select any of the options under the **_Managed Workflow_**. In my case, I selected the first option, which is blank **.**

![How To Add Android Push Notifications to a React Native Expo App](https://lh3.googleusercontent.com/iZTo7mTkCNBrnmTD8cBAAH1DGIJvGzX5ct9VMmCULaG7EheSEZdJvdtOooJCrEc1CMEUmOcOe2ncUTa695Py49orFLqD9GAEiObBg7EMMDnkIh9OPtVdd3Ef83E1-Awe96oYKL-y)

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

For additional guidance, check out Expo's official documentation on [how to create a new Expo App](https://docs.expo.dev/get-started/create-a-new-app/).

### Install the 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
```

After installing the signal-expo-plugin, install now 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`.

### Configure the Plugin

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:

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

### Run and Build your Application

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

## Send Push Notifications to Android Devices

I recommend you run the application on an actual Android device to test the notifications. 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 Android Push Notifications to a React Native Expo App](https://lh6.googleusercontent.com/BTnNNWuxdRVv8fQYvuwVA7psLZRYGtX-M5QcV9yQui37dEnNQXJy36rn9jx6mJKI9SF6n5uZnUP4Z3-WxdKxdvqWvNNc_ne4ue3Yv_3qWzyGr7j5uWTDXZ0NNmucEy2W8KBdfjef)

Once you have opened the application on your device, the device will be automatically subscribed to the notification. 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** _ and a green message will appear like the one in the image below.

![How To Add Android Push Notifications to a React Native Expo App](https://lh3.googleusercontent.com/xlDL-bdjyC5zGltl2QJM1GRaTrCqKsOynV0P-3hsnOy3AqrRewBs8QzD9w1gvPu-0oQDoTp98uNvEBn2sk91-WtpIdsff3S0wlpjDH0q69fyjX2USfHYKtWm8yX4VU-8XOnToJJL)

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

### Send Your First Notification

It’s time to send your first push notification! To do so, log in to your OneSignal account and navigate to the _ **Dashboard** _ tab. On the dashboard page, click on the blue button that says _ **New Push** _.  
  
**Note:** Notifications are enabled on Android devices by default if you have disabled your notifications, make sure you [enable them again](https://support.google.com/android/answer/9079661?hl=en#zippy=%2Coption-show-all-notifications).

![How To Add Android Push Notifications to a React Native Expo App](https://lh6.googleusercontent.com/ry_XclmRp64E3pMBK6AJF3nPgBxJ17hTTAL2WZH4np3Rp42FquanSFSrOzE9aFLlrVoA5w5Eal8EkP2T2fHNRAnGCf_vcVWVVkJE7MOqMPBDdqcygwT1TQkSNSPwprmO2VGJ5kLC)

You will be redirected to a new window that will allow you to customize your push notification. Under _ **Audience** _, make sure that _ **Send to Subscribed Users** _ is selected. Then, create your message by adding your message title, content, and image. Because this is the first notification your subscribers will receive, you may choose to craft a simple welcome message to confirm that they've been subscribed and reinforce the value that notifications will provide.

Under the _ **Delivery Schedule** _ section, select _ **Immediately** _ and _ **Send to everyone at the same time** _ to send to all your current push **subscribers**. If you have just finished setting up your OneSignal account, chances are you're the first and only **subscriber**. If your app or website is heavily trafficked and other users have already opted in to receive push notifications, you may want to select _**Send to a particular segment(s)**_ to test your message out on a specific audience. When you're ready to send your message, click on the blue _ **Review and Send** _ button at the bottom of the screen.

![How To Add Android Push Notifications to a React Native Expo App](https://lh5.googleusercontent.com/gxcVZhczYuEkW_iKYfqDpUtliEH9lXKYpX_weRmFdyEaLpZq7mOYKILJFg4droUpNSsIYrGN8oY46QX7aKS_0QqRwoaGKkPfW8rNnT_R1f-pLSKE1LNEvyAZEr5NEZpchjAZCvFU)

A small popup will appear for you to review your message. Once you are satisfied, click on the blue _ **Send Message** _ button. You should receive a push notification on your device! 🚀

![How To Add Android Push Notifications to a React Native Expo App](https://onesignal.com/blog/content/images/2021/12/add-android-push-notifications-to-react-native-expo-app-1.jpg)

Now, you can keep expanding your code to make use of different features of the OneSignal SDK across your Expo app bypassing the `OneSignal` variable to different components.

To learn more about the OneSignal Expo plugin, visit our [React Native (Expo)  push SDK documentation](https://documentation.onesignal.com/docs/react-native-sdk-setup).

## Connect with Our Developer Community

To stay in the loop with the latest product updates and innovations, follow the [OneSignal Developers Twitter](https://twitter.com/onesignaldevs) and join our [Discord server](https://discord.gg/EP7gf6Uz7G). Learn more about the OneSignal developer community and how to stay connected by following the link below.

### >> [Learn About the OneSignal Developer Community](https://onesignal.com/onesignal-developers)