React Native SDK Setup

1. Requirements

Can be used with other push solutions!

To use FlareLane with other push solutions, you must follow some additional steps. Refer to iOS: Disable Swizzling for details.

• Sign up to FlareLane and create a project

---

2. Setup a Certificate

Follow this guide below:

• Android: FCM Setup (v1)

• iOS: APNS Setup

---

3. Install SDK

$ yarn add @flarelane/react-native-sdk@1.7.1

---

4. Android Setup

To ensure a smooth process for obtaining permission for push notifications from users, please set compileSdkVersion to at least 33

app/build.gradle

android {
    compileSdkVersion 33
    ...

    defaultConfig {
        ...
        targetSdkVersion 33
    }
}

---

5. iOS Setup

Go to Signing & Capabilities and click + Capability and add Push Notifications

To support iOS Rich Notifications, you need to add Notification Service Extension

In Xcode, select Notification Service Extension from File > New > Target

Enter the Product Name. In this guide, we will define it as FlareLaneNotificationServiceExtension.

Set Minimum Deployments of the Notification Service Extension Target you just created to be the same as the main app target you are currently using.

Add the following code to your Podfile

Podfile

// Enable the Dynamic Framework
use_frameworks!

// Add the name of the extension created previously.
// In this guide, FlareLaneNotificationServiceExtension.
target 'FlareLaneNotificationServiceExtension' do
  pod 'FlareLane', '1.7.1'
end

Run pod install in the terminal

Run Xcode again and edit the extension's file. Delete the pre-filled codes and only inherit FlareLaneNotificationServiceExtension.

Swift(NorificationService.swift)

import FlareLane

class NotificationService: FlareLaneNotificationServiceExtension {
}

Objective-C(NotificationService.h/.m)

// NotificationService.h
@import FlareLane;

@interface NotificationService : FLNNotificationServiceExtension
@end

// NotificationService.m
#import "NotificationService.h"

@implementation NotificationService
@end

---

6. Initialization

Add the following code to Main App(e.g. App.tsx). You can check your project ID at FlareLane console's Project.

App.tsx

import FlareLane from '@flarelane/react-native-sdk';

// To subscribe later, set the 2nd parameter to false and then run the .subscribe() later.
FlareLane.initialize('INPUT_YOUR_PROJECT_ID', true);

---

7. Test

After completing all the steps, build and run your app. Devices that subscribe to push notifications will be automatically added to FlareLane console's All Devices.

Before actual deployment, be sure to verify that the push notifications are being received properly on the device and that the statistics are accurately recorded when the push notifications are clicked.

---

8. Identify your user

FlareLane's device is 'anonymous' and you can match the device with your user based on the unique user ID that identifies your user.

Setting up User ID has many benefits. You can distinguish whether a user has signed-up, and push notifications can be sent based on the User ID.

Usually, when a user sign-up or log-in, you should execute setUserId.

JS(RN)

FlareLane.setUserId("USER_ID");

---

9. Additional Setup

Android

To set a accent color or channel name, add the following lines:

values/strings.xml

<resources>
    <!-- accent color  -->
    <string name="flarelane_notification_accent_color">#BC0000</string>
    <!-- channel name -->
    <string name="flarelane_default_channel_name">All Notifications</string>
</resources>

To customize notification icons, see below:

• Android: Notification Icons

To use Journeys or Message Personalization, integrate custom data via SDK or API:

• Data Integration

---

Resources

Mobile SDK Reference