Log InSign Up

Expo SDK Setup

Instructions for adding the OneSignal React Native & Expo SDK to your app for iOS, Android, and derivatives like Amazon.

Suggest Edits

📘

Expo Managed Workflow

This documentation shows how to use our SDK with your Expo Managed Workflow application.

If you are using the Bare Workflow, please review the React Native + Expo SDK Setup instead.

Step 1. Requirements

iOS Requirements

Android Requirements

Amazon & Huawei Requirements

Follow these instructions if your app is distributed on the Amazon AppStore and/or the Huawei AppGallery.

Step 2. Add the OneSignal package to your app

📘

OneSignal Expo Sample App

Sample repo containing the sample app for running OneSignal with Expo.

Make sure you have the Expo CLI installed on your computer.

2.1 Install the OneSignal Expo plugin using the Expo CLI

expo install onesignal-expo-plugin

2.2 Install the SDK using Yarn or NPM

  • Yarn: yarn add react-native-onesignal
  • NPM npm install --save react-native-onesignal

2.3 Configure your app.json/app.config.js
Add the plugin to the top of the plugin array:

app.json

{
  "plugins": [
    [
      "onesignal-expo-plugin",
      {
        "mode": "development",
      }
    ]
  ]
}

or

app.config.js

export default {
  ...
  plugins: [
    [
      "onesignal-expo-plugin",
      {
        mode: "development",
      }
    ]
  ]
};

Plugin Prop
You can pass props to the plugin config object to configure:

Plugin Prop
moderequiredUsed to configure APNs environment entitlement. "development" or "production"
devTeamoptionalUsed to configure Apple Team ID. You can find your Apple Team ID by running expo credentials:manager e.g: "91SW8A37CR"
iPhoneDeploymentTargetoptionalTarget IPHONEOS_DEPLOYMENT_TARGET value to be used when adding the iOS NSE. A deployment target is nothing more than the minimum version of the operating system the application can run on. This value should match the value in your Podfile e.g: "12.0".
smallIconsoptionalAn array of local paths to small notification icons for Android. Image should be white, transparent, and 96x96 in size. Input images will be automatically scaled down and placed in the appropriate resource folders. e.g: ["./assets/ic_stat_onesignal_default.png"]. See https://documentation.onesignal.com/docs/customize-notification-icons#small-notification-icons.
largeIconsoptionalAn array of local paths to large notification icons for Android. Image should be white, transparent, and 256x256 in size. e.g: ["./assets/ic_onesignal_large_icon_default.png"]. See https://documentation.onesignal.com/docs/customize-notification-icons#large-notification-icons.
iosNSEFilePathoptionalThe local path to a custom Notification Service Extension (NSE), written in Objective-C. The NSE will typically start as a copy of the default NSE, then altered to support any custom logic required. e.g: "./assets/NotificationService.m".

**
2.4 Adding the OneSignal App ID

Add your OneSignal App ID to your Expo constants via the extra param:

{
  "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");

2.5 Run your Expo app

$ expo prebuild

# Build your native iOS project
$ expo run:ios

# Build your native Android project
$ expo run:android

Updated about 1 year ago