OneSignal ReactNative Expo

The OneSignal Expo plugin allows you to use OneSignal without leaving the managed workflow. Developed in collaboration with SweetGreen.

• 📄 Docs
• 🖤 npm

Overview

This plugin is an Expo Config Plugin. It extends the Expo config to allow customizing the prebuild phase of managed workflow builds (no need to eject to a bare workflow). For the purposes of OneSignal integration, the plugin facilitates automatically generating/configuring the necessary native code files needed to get the OneSignal React-Native SDK to work. You can think of adding a plugin as adding custom native code.

More information:

• The official OneSignal Expo Plugin repo

---

Install

expo install onesignal-expo-plugin

Note: Even though onesignal-expo-plugin defines react-native-onesignal as a dependency and it gets put into the node_modules it seems the native parts don't get built into the app for some reason.

After installing the onseignal-expo-plugin, install now the react-native-onesignal plugin by running the following command.

yarn add react-native-onesignal

If you frogot 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

Plugin

Add the plugin to the plugin array:

app.json

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

or

app.config.js

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

Plugin Options

• mode: used to configure APNs environment entitlement.
  • "development"
  • "production"

OneSignal App ID

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

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

//This is what will trigger the In-App Message when the component loads
OneSignal.addTrigger("level", 5);

Run

$ expo prebuild

# Build your native iOS project
$ expo run:ios

# Build your native Android project
$ expo run:android

---

Show Your Support

Give a ⭐️ if this project helped you!

Join the OneSignal Developers Community

• Website: https://onesignal.com/onesignal-developers
• Twitter: @OneSignalDevs
• Github: @OneSignalDevelopers
• Discord: @onesignal