Skip to content

React Native SDK

Follow the guides below to enter the authentication credentials FlareLane needs to send push notifications.

In your terminal, navigate to your project's root directory and run the following command:

Terminal window
$ yarn add @flarelane/react-native-sdk@1.10.0

For a smooth push notification opt-in experience, set compileSdkVersion to at least 33.

android {
compileSdkVersion 33
...
defaultConfig {
...
targetSdkVersion 33
}
}

Go to your target's Signing & Capabilities, then click + Capability in the top left and select Push Notifications to add it.

Also select Background Modes and enable Remote notifications.

Xcode Signing and Capabilities tab with Push Notifications and Background Modes enabled

On iOS, you need to create a Notification Service Extension to attach media such as images.

In Xcode, go to File > New > Target and select Notification Service Extension.

Xcode new target dialog with Notification Service Extension selected

Enter an appropriate name for the Product Name. In this guide, we'll use FlareLaneNotificationServiceExtension.

Xcode new target configuration with FlareLaneNotificationServiceExtension as product name

Click Cancel so that a separate scheme is not activated.

Xcode dialog asking to activate a new scheme with Cancel highlighted

Next, set the Minimum Deployments version of the Notification Service Extension Target you just created to match the version of your main app target.

Xcode target Minimum Deployments setting for the Notification Service Extension

To synchronize data between your app and the extension, you need to configure an App Group.

Go to your target's Signing & Capabilities, then click + Capability in the top left and select App Groups to add it.

Add a group named group.bundleID.flarelane, where bundleID must match your app's Bundle Identifier.

Xcode Signing and Capabilities with App Groups capability and flarelane group added

Once it has been added successfully, enable the App Group.

Xcode App Groups capability with the flarelane group enabled

Likewise, add and enable an App Group with the same name in the extension you created earlier.

Xcode extension target App Groups capability with the flarelane group enabled

Next, close Xcode, open the Podfile in the ios directory, and add the following:

// Add the lines below at the bottom of the file.
// Set the target name to the Product Name of the extension you entered earlier.
target 'FlareLaneNotificationServiceExtension' do
pod 'FlareLane', '1.9.3'
end

Run pod install to finish installing the SDK.

  1. Add a handler method for application(:didRegisterForRemoteNotificationsWithDeviceToken:)
import FlareLane
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
// 2
FlareLaneAppDelegate.shared.application(application, didRegisterForRemoteNotificationsWithDeviceToken: deviceToken)
}
}

5-5. Add UNUserNotificationCenterDelegate methods

Section titled “5-5. Add UNUserNotificationCenterDelegate methods”
  1. Assign UNUserNotificationCenterDelegate to AppDelegate
  2. Add a handler method for userNotificationCenter(:willPresent:withCompletionHandler:)
  3. Add a handler method
import FlareLane
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// 1
UNUserNotificationCenter.current().delegate = self
}
}
extension AppDelegate: UNUserNotificationCenterDelegate {
// 2
func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
FlareLaneNotificationCenter.shared.userNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler)
}
// 3
func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
FlareLaneNotificationCenter.shared.userNotificationCenter(center, didReceive: response, withCompletionHandler: completionHandler)
}
}

5-6. Add UNNotificationServiceExtension methods

Section titled “5-6. Add UNNotificationServiceExtension methods”
  1. Add a handler method for didReceive(:withContentHandler:)
  2. Add a handler method for serviceExtensionTimeWillExpire()
import UserNotifications
import FlareLane
class NotificationService: UNNotificationServiceExtension {
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
// 1
// Branch so that only FlareLane's methods run for push notifications sent by FlareLane.
if FlareLaneNotificationServiceExtensionHelper.shared.isFlareLaneNotification(request) {
FlareLaneNotificationServiceExtensionHelper.shared.didReceive(request, withContentHandler: contentHandler)
} else {
// ...
}
}
override func serviceExtensionTimeWillExpire() {
// 2
FlareLaneNotificationServiceExtensionHelper.shared.serviceExtensionTimeWillExpire()
}
}

Add the following initialization code in your main App (e.g., App.tsx). You can find your project ID on the [Project] page in the console.

import FlareLane from '@flarelane/react-native-sdk';
// To control when the notification permission prompt appears, set the second parameter to false and call .subscribe() at the appropriate time.
FlareLane.initialize('PROJECT_ID', true);

When the app is installed, the device created in FlareLane is an "anonymous device." By linking a unique User ID that you manage separately, you can match FlareLane's device to your own User ID.

Linking a User ID offers many benefits. It lets you distinguish between registered and unregistered users, and lets you send push notifications by User ID at any time, so we recommend doing this during your initial integration.

Typically, you link the User ID through the setUserId function when a user signs up or logs in successfully.

FlareLane.setUserId("USER_ID");
  • By default, FlareLane automatically handles URLs such as https links and deep links when a push notification is clicked. If you need to implement a custom click handler, see Disabling automatic URL handling.
  • Refer to In-App Messages (Popups) and add a single line of code (displayInApp) at the point where you want the popup to appear.
<resources>
<!-- Change the notification color -->
<string name="flarelane_notification_accent_color">#BC0000</string>
</resources>
Guide
Mobile SDK Reference
React Native SDK Release Notes