Step-by-Step React Native 3.x to 4.0.0 Upgrade Guide

Step 1 - Requirements

This guide assumes you already have setup the react-native-onesignal 3.x.x and are migrating your app to the 4.x Major version.

❗️

Upgrade to min version React Native 0.60 for AndroidX Support

AndroidX is a now requirement to use the new react-native-onesignal 4.0+ SDK.

Learn more

Step 2 - Upgrade to Version 4

In your package.json, update the npm package version

"dependencies": {
	"react-native-onesignal": "^4.0.6"
}

In your Podfile, modify the target OneSignalNotificationServiceExtension, remove 'OneSignal' and replace with OneSignalXCFramework.

target 'OneSignalNotificationServiceExtension' do
  pod 'OneSignalXCFramework', '>= 3.11.1', '< 4.0'
end

Install

Make sure to install the npm package as well as update the Pod used in the ios directory of your project.

npm install # or yarn install
cd ios
pod install

Step 3 - Update initialization code

3.1 Open your main file (e.g: App.js)
3.2 Replace the following

// OneSignal Initialization
OneSignal.init("YOUR_ONESIGNAL_APP_ID", {kOSSettingsKeyAutoPrompt : false, kOSSettingsKeyInAppLaunchURL: false, kOSSettingsKeyInFocusDisplayOption:2});

With the new initialization:

// OneSignal Initialization
OneSignal.setAppId("YOUR_ONESIGNAL_APP_ID");

For any iOS settings you had previously, note that:

  • kOSSettingsKeyAutoPrompt is deprecated. If you omitted this previously or set it to true, you will now need to prompt the user by calling promptForPushNotificationsWithUserResponse().
  • kOSSettingsKeyInAppLaunchURL is deprecated. There is currently no replacement for it.
  • kOSSettingsKeyInFocusDisplayOption is replaced by adding a NotificationWillShowInForegroundHandler (see below).

3.3 Review your existing inFocusDisplaying() usage.

  • This was most likely set to 2 which means no additional changes need as this is the default in 4.x. Simply remove the function call.
  • If you didn't have inFocusDisplaying at all in your code or this was set to 0 the replacement for this is adding a NotificationWillShowInForegroundHandler.

Step 4 - Update Event Listeners

If you have event-listeners set up, you will need to switch to use the new handlers & observer setter functions.

See handlers & observers reference for more details.

version 3.0+ event stringversion 4.0+ event handler / observer
"received"setNotificationWillShowInForegroundHandler()

The equivalent of the "received" event listener is the new NotificationWillShowInForegroundHandler. You can use this to have better notification foreground control as well as get notification-specific data before it is displayed to the user while the app is in focus.
"opened"setNotificationOpenedHandler()
"ids"getDeviceState()
"inAppMessageClicked"setInAppMessageClickHandler()

Step 5 - Review Full List

✅ You're setup with the new SDK!
Please review the full 4.0 API Reference - React Native for a full list of new and deprecated features as well as other advanced features you may need to migrate as well.