To setup push notification support with your React Native project, follow the below steps depending on what mobile platform you run your project on.

📘
The Leanplum ReactNative SDK package does not include any push notifications packages and dependencies by default. This guide will follow you through the process of setting up and enabling notifications.

iOS React Native Push Setup

Below are steps to set up iOS push in Leanplum. Follow the below steps to add your certificates to the dashboard, then add the source code to receive a push with the Leanplum SDK.

STEP 1.

Login to the iOS provisioning portal.

STEP 2.

In the Identifiers > App IDs, select your app, click Edit, and enable Push Notifications.

STEP 3.

Click Create Certificate for each of the Development and Production certificates and follow the onscreen instructions. You should not reuse existing certificates so that we can track delivery failures properly.

STEP 4.

Download your new certificate files from your browser. Open the files on your computer, which will launch Keychain.

STEP 5.

In Keychain, select the new certificates, expand them to view the private key, and then right click to export them as .p12 files. You must enter a password.

STEP 6.

In Leanplum, go to your app's Keys & Settings (App Settings > {Your app} > Keys & Settings). Under Push Notifications, upload your .p12 files to Leanplum and enter your passphrase from step 5 above.

STEP 7.

Configure your app to use push notifications in your app delegate's applicationDidFinishLaunching method.

AppDelegate.m

If Push Notifications package is used, update the AppDelegate implementation to call the Push Notifications package methods. This enables the native iOS delegates to communicate with React Native code.

#import <RNCPushNotificationIOS.h>

// Required to register for notifications
- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
  [RNCPushNotificationIOS didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
    [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
    // Needs to be called if swizzling is disabled in Info.plist otherwise it won’t affect SDK if swizzling is enabled.
    [Leanplum didReceiveRemoteNotification:userInfo

fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
    // Needs to be called if swizzling is disabled in Info.plist otherwise it won’t affect SDK if swizzling is enabled.
    [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
    [Leanplum didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
    [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
    // Needs to be called if swizzling is disabled in Info.plist otherwise it won’t affect SDK if swizzling is enabled.
    [Leanplum didFailToRegisterForRemoteNotificationsWithError:error];
}

// Required for the localNotification event.
- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
  [RNCPushNotificationIOS didReceiveLocalNotification:notification];
}

STEP 8.

Request permissions for Push notifications.

A. Using ReactNative SDK 1.1.2+, you can call directly:

Leanplum.registerForRemoteNotifications()

B. For older versions, request through the community package:

Install @react-native-community/push-notification-ios

//Install
yarn add @react-native-community/push-notification-ios

🚧
Installation Changes Depending on React Native Version
For React-Native 0.60 or newer (react-native >= 0.60) run:
cd ios && pod install
For React-Native 0.60 or older (react-native <= 0.59) run:
react-native link @react-native-community/push-notification-ios

Grant permission for the notifications after response from Leanplum SDK as shown below

import {Alert,Platform} from 'react-native';
import PushNotificationIOS from "@react-native-community/push-notification-ios";

Leanplum.onStartResponse((success: boolean) => {
  const alertTitle = success
  ? 'Leanplum session started'
  : 'Leanplum session not started';
  Alert.alert(alertTitle);
  Platform.OS === 'ios' ? PushNotificationIOS.requestPermissions() : null;
});

❗️
Important iOS Setup Notes
For iOS push notifications to work with Leanplum, you'll also need to upload your .p12 certificates to Leanplum. Refer to the iOS SDK docs for instructions how to do that.
Also, we use swizzling to collect push tokens. If your app has other SDKs installed that also use method swizzling it may cause conflicts. See here for manual instructions.

Android React Native Setup

Below are steps to set up Android push in Leanplum. Follow the below steps to add activate push in the Leanplum dashboard and in your app.

STEP 1.

To enable Push Notifications, you need to add the Leanplum FCM library in addition to the Firebase library to your project.
By default, only Leanplum core package is included (com.leanplum:leanplum-core:5.6.1). In order to use FCM, the core package needs to be replaced with the FCM package (com.leanplum:leanplum-fcm). Use the same version that comes with the Leanplum React Native SDK.

STEP 2.

Modify the generated build.gradle file located in your android project directory. Ensure you have applied the com.google.gms.google-services plugin.

dependencies {
    ...
    // Use the Leanplum version that comes with the Leanplum RN SDK
    // remove the leanplum-core dependency, leanplum-fcm includes it 
    implementation 'com.leanplum:leanplum-fcm:5.3.3'
    implementation 'com.google.firebase:firebase-messaging:20.1.4'
    ...
}
apply plugin: 'com.google.gms.google-services'

STEP 3.

Ensure the classpath 'com.google.gms:google-services:4.3.3' is set properly in the build.gradle's dependencies as shown in the example below:

...
dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        classpath 'com.google.gms:google-services:4.3.3'
}
...

STEP 4.

Include the Google Services JSON config. Add the google-services.json file in your <react_native_project>/android/app folder.

Troubleshooting

Ensure you have followed the above steps for each platform you want to enable notifications on.

The ReactNative SDK uses the iOS and Android SDKs under the hood. Troubleshooting and configuration articles for those SDKs are also valid for the ReactNative SDK.

Android

If the following error is raised: Plugin with id 'com.google.gms.google-services' not found, go back to STEP 3 and check whether the classpath 'com.google.gms:google-services:4.3.3' is set properly.

Ensure you have also defined a Notification Channel in Leanplum. Follow the documentation article.

iOS

Ensure the correct certificates are uploaded to the Leanplum Dashboard:

Validate Sandbox and Prod certificates are uploaded to the corresponding fields on the Dashboard
Validate the bundle identifier matches exactly the app one.

Sending a Preview requires a registered test device with push enabled. The preview uses the Sandbox APNS certificate.
Sending an immediate, scheduled, triggered, or manual push, requires the user to be push enabled and to be running a Production built of the app - Ad Hoc, TestFlight, or App Store distribution. This uses the Production APNS certificate.