Skip to main content

Client SDK - React Native

The Notifly React Native SDK can be used to integrate Notifly with React Native applications.
It supports the following features:

  • Register device information with Notifly to receive app push notifications and in-app popups sent through Notifly in your React Native app.
    • In-app popups from Notifly are received only when the app is in the foreground state. They are ignored when in background or quit states.
  • Integrate events and user information with Notifly to be utilized in all campaigns.
  • Log events to measure the performance of campaigns.

Notifly utilizes Firebase Cloud Messaging for sending push notifications.
Please proceed with the following steps first:

  1. Integrate Firebase Project
  2. Set up iOS APNs Authentication Information

1. Notifly SDK Setup​

1-1. Installing Notifly SDK​

To install the package, please run the following:

npm install notifly-sdk@latest --save
cd ios && pod install

If you are using yarn:

yarn add notifly-sdk@latest
cd ios && pod install

The notifly-sdk will be added to your app's package.json file. (Current latest version: Npm)

1.2. iOS Configuration​

1) Capability Settings​

  1. Open {Your_Project_Name}.xcworkspace in Xcode.
  • If you open {Your_Project_Name}.xcodeproj instead of {Your_Project_Name}.xcworkspace in Xcode and build it, you will not be able to use the Notifly SDK.
  • {Your_Project_Name}.xcworkspace is located in the ios directory of the Root directory.
  1. Set the iOS Deployment Target of the target project and the Minimum Deployment iOS of the Target to 13.0 or higher.
  • Please also set the minimum version to 13.0 in the Podfile.

  1. Add the Push Notifications capability. Add Capabilities

  2. Add the Background Modes capability and select Remote notifications and Background Fetch. Add Capabilities

  3. Open the AppDelegate.mm file and add the following code:

  • The AppDelegate.mm file is located in the {ProjectName} folder of the ios directory.

  • Import the notifly_sdk framework.

#import "notifly_sdk-Swift.h"
  • In AppDelegate.h, add the UNUserNotificationCenterDelegate protocol to the AppDelegate class.
    • Please refer to the example code below.
  • Add Notifly code to the AppDelegate methods in AppDelegate.mm.
    1. (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      • Set the delegate of UNNotificationCenter to self.
    2. (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
      • Register the APNs token with Notifly.
    3. (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
      • Notify Notifly if there was a failure to register the APNs token.
    4. (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
      • Pass the app push notification click event to Notifly.
    5. (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
      • When the app is in the Foreground state, pass the data received from Notifly to the SDK.
Example Code of AppDelegate.h
#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import <UserNotifications/UNUserNotificationCenter.h>

@interface AppDelegate : RCTAppDelegate <UNUserNotificationCenterDelegate>

@end

1-3. (Optional) iOS Push Extension Setup​

SDK spec for Rich Push Notification

notifly-sdk: Version 3.0.4 or higher

  • It is recommended to set up a Notification Service Extension following Notifly's guide, as it supports the following features:
    1. You can attach images and videos to push notifications.
    2. You can verify whether a user has received a push notification, allowing for a more detailed analysis of campaign performance.

1-4. Adding Notifly SDK Initialization Code​

  • Please add the Notifly SDK initialization code in index.js or App.js.
index.js
...
import messaging from '@react-native-firebase/messaging';
import notifly from 'notifly-sdk';

/* Your Code */

notifly.initialize('myProjectId', 'myUserName', 'myPassword');

/* Your Code */

AppRegistry.registerComponent(...);

NOTIFLY_PROJECT_ID, NOTIFLY_USERNAME, and NOTIFLY_PASSWORD can be found on the settings page of the Notifly console.

2. Registering User Properties​

  • With Notifly, you can set a user's id (userId) and properties (params) to utilize them in marketing campaign executions.
    • Notifly allows user's push notification settings (permission & preferences) as a user property, enabling filtering before sending push notifications.
    • For sending Kakao Alimtalk, Friendtalk, or SMS messages, a phone number must be set as a user property.
    • For sending emails, an email address must be set as a user property.
    • The property field names for the phone number and email must be set to $phone_number and $email, respectively.
    • Start registering properties after adding the Notifly SDK initialization code.
    • (Recommendation) When logging out, call setUserId with userId as null to unregister the user's userId.
    • Calling user id unregistration will delete all user information, including user properties and campaign fatigue management data.

2-1. Set User Id​

ParameterTypeRequired
userIdStringYes
notifly.setUserId(userId);
Example Code of setUserId
const handleLogin = () => {
    ...
    notifly.setUserId('example_user_id'); // Set User Id
    ...
}

const handleLogout = () => {
    ...
    notifly.setUserId(); // Unregister User Id
    ...
}

2-2. Set User Properties​

ParameterTypeRequired
paramsObjectYes
notifly.setUserProperties(params);
Example Code of setUserProperties
const handleRejectPushNotification = () => {
    ...
    notifly.setUserProperties({
        "push_subscription_channel1": false,
        "push_subscription_channel2": false,
        "push_subscription_channel3": false,
    });
    ...
}

3. Event Logging​

  • Notifly allows tracking of user actions to utilize in targeting during campaign executions. Tracked events can be used for determining the timing of push notification delivery and setting the target audience.
    • Start implementing event logging after adding the Notifly SDK initialization code.
  • You can use segmentationEventParamKeys to utilize event parameters (eventParams) in setting the target audience, etc. For this, please specify the key value of a specific field in eventParams that will be used in setting the target audience in segmentationEventParamKeys.
    • Currently, only one segmentationEventParamKeys is supported, so the length of segmentationEventParamKeys must be a list of 1 or fewer.

3-1. Event Logging​

ParameterTypeRequired
eventNameStringYes
eventParamsObjectNo
segmentationEventParamKeysList<String>No
notifly.trackEvent(eventName, eventParams, segmentationEventParamKeys);
Example Code of trackEvent
const handlePurchaseTicket = () => {
    ...
    notifly.trackEvent("ticket_purchase", {
        "show_id": "sample_show_id",
        "performance_start_time": 1674104659
    }, ["show_id"]);
    ...
}

const handleLogin = () => {
    ...
    notifly.trackEvent("login");
    ...
}

4. Integration Testing​

Please refer to Client SDK - Integration Test.

5. (Advanced) Registering Push Notification Icons (Android) & Push Notification Consent Prompt​

Please refer to (Advanced) Client SDK - React Native.

FAQ​

  • Q. What if I am already using Firebase Cloud Messaging?
    • A. The Notifly SDK has been designed to prevent conflicts with Firebase Cloud Messaging, which may already be used in existing apps, so you can use it safely.
  • Q. I am getting errors related to the Notifly class in the AppDelegate.mm file during build.
    • A. Please add use_frameworks! :linkage => :static to your Podfile to attempt static linking. (If there's already a use_frameworks! line, just add the :linkage => :static option.)
  • Q. I am not receiving push notifications in the foreground state on iOS devices.
    • A. If you are already using Firebase Messaging, please configure your firebase.json file as instructed below.
      {
        "react-native": {
          "messaging_ios_foreground_presentation_options": [
            "badge",
            "sound",
            "list",
            "banner"
          ]
        }
      }
  • Q. I get an error saying the notifly_sdk-Swift.h file cannot be found. What should I do?
    • The notifly_sdk (iOS) is written in Swift. To expose it to the Objective-C environment, a Swift Compatibility Header named notifly_sdk-Swift.h is created during the build process. Please add "${PODS_CONFIGURATION_BUILD_DIR}" to the Header Search Paths in the Build Option of the target you wish to build.
    • Reference