Integrating Expo plugin

Install the plugin

Install the Pushwoosh Expo plugin using the Expo CLI

expo install pushwoosh-expo-plugin

Install Pushwoosh React Native SDK

npm install pushwoosh-react-native-plugin --save

Configure your app.json/app.config.js.

Add the plugin to the front of the plugin array.

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

Plugin prop

You can pass prop to the plugin config object to configure:

Plugin prop
`mode`	required	Used to configure APNs environment entitlement. “development” or “production”

iOS Props

The following props can be configured under the ios key:

iOS props	Required	Default	Description
`PW_API_TOKEN`	Yes	`__YOUR_DEVICE_API_TOKEN_`	Your Pushwoosh Device API token for iOS. You can get the API token in the Pushwoosh control panel. Important: Make sure the token has access to the correct application in your Pushwoosh Control Panel. Learn more
`Pushwoosh_LOG_LEVEL`	No	`INFO`	Log level for iOS. Possible values: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE`

Note: Remote notifications in Background Modes are automatically configured in the Signing & Capabilities section through the withEntitlementsPlist function. You don’t need to manually configure this in Info.plist.

Android Props

The following props can be configured under the android key:

Android props	Required	Default	Description
`apiToken`	Yes	`__YOUR_DEVICE_API_TOKEN_`	Your Pushwoosh Device API token for Android. You can get the API token in the Pushwoosh control panel. Important: Make sure the token has access to the correct application in your Pushwoosh Control Panel. Learn more
`logLevel`	No	`INFO`	Log level for Android. One of: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE`
`multiNotificationMode`	No	`true`	Can be changed to false in case you want to display only the last notification for the user
`icon`	No	-	Path to a custom notification icon for Android

Example configuration

Here’s an example of how to configure the plugin in your app.json:

{
  "expo": {
    "plugins": [
      [
        "pushwoosh-expo-plugin",
        {
          "mode": "development",
          "ios": {
            "PW_API_TOKEN": "YOUR_DEVICE_API_TOKEN",
            "Pushwoosh_LOG_LEVEL": "DEBUG"
          },
          "android": {
            "apiToken": "YOUR_DEVICE_API_TOKEN",
            "logLevel": "DEBUG",
            "icon": "./assets/notification-icon.png"
          }
        }
      ]
    ]
  }
}

Initialize Pushwoosh

import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.init({
    "pw_appid": "YOUR_PUSHWOOSH_PROJECT_ID" ,
    "project_number": "YOUR_GCM_PROJECT_NUMBER"
});
Pushwoosh.register();

See Pushwoosh React Native integration

Prebuild

Prebuilding within Expo entails the generation of native runtime code for the project, resulting in the construction of the ‘ios’ and ‘android’ directories. Through prebuilding, the native modules that utilize CocoaPods, autolinking, and other configuration plugins are automatically linked and configured. You can conceptualize prebuild as a bundler for native code.

Executing expo prebuild initiates a custom managed workflow that combines the advantages of both bare workflows and managed workflows simultaneously.

Why is prebuilding recommended?

Prebuilding locally can be beneficial for inspecting changes in config plugins and assisting in the debugging of issues.

npx expo prebuild

Running

Executing the provided commands will prebuild and run your application. It’s important to note that push notifications will not function in the iOS Simulator.

# Build and run your native iOS project
npx expo run:ios

# Build and run your native Android project
npx expo run:android