DocumentationDeveloper PortalAPI EndpointsProduct Updates
Contact Us

React Native bridge for iOS

This article provides information on how to set up the React Native bridge for our SDK. Once you set up the bridge, you can use the methods of our SDK in the react native code of your iOS app.

Suggest Edits

Note: The Blueshift React Native plugin is now available for the Blueshift iOS and Android SDK. We recommend that you migrate to using the React Native plugin to receive the best possible experience.

📘

Wait. Are you ready for this part?

Before you create a bridge for your React Native project, it's important that you set up our SDK in your Xcode project. In addition, you have to initialize the SDK.

Once you've done that, come back to this document and create the bridge.

It'll all be a breeze. Trust us. :blush:

React Native is a mobile application development framework, that you can use to produce cross platform apps. Though our SDKs are written using the programming language specific to the platform, you can create a React Native bridge to invoke methods of our SDK into your app.

Perform the following steps to create the React Native bridge.

Create BlueshiftBridge class

In your Xcode project, create a new swift file called BlueshiftBridge.swift. When you click the create bridging header button, Xcode prompts you to create a bridging header.

📘

Note

The bridging header provides functionality to communicate between the Swift and Objective-C classes.

However, you can have only one bridging header against a target. So if you already have a bridging header, there is no need to create a new one.

Open the bridging header SampleApp-Bridging-Header.h file and add the following code.

#import "React/RCTBridgeModule.h"
#import <BlueShift-iOS-SDK/BlueShift.h>

RCTBridgeModule.h provides an interface to register a bridge module while BlueShift.h provides access to the SDK code in Swift.

Now, open the BlueshiftBridge.swift file and add the following code in it.

//
//  BlueshiftBridge.swift
//  SampleApp
//
//  Created by Ketan Shikhare on 20/11/20.
//

import UIKit
import Foundation

@objc(BlueshiftBridge)
class BlueshiftBridge: NSObject {
  @objc static func requiresMainQueueSetup() -> Bool {return true}
  let screenViewed = "screen_viewed"
  
  // MARK: Track Events
  @objc func identifyWithDetails(_ details: Dictionary<AnyHashable, Any>) {
    BlueShift.sharedInstance()?.identifyUser(withDetails: details, canBatchThisEvent: false)
  }
  
  @objc func trackCustomEvent(_ eventName: String, details: Dictionary<AnyHashable, Any> ,canBatchThisEvent: Bool) {
      BlueShift.sharedInstance()?.trackEvent(forEventName: eventName, andParameters: details, canBatchThisEvent: canBatchThisEvent)
  }
  
  @objc func trackScreenView(_ screenName: String, details: Dictionary<AnyHashable, Any> ,canBatchThisEvent: Bool) {
      var params = details
      params[screenViewed] = screenName
      BlueShift.sharedInstance()?.trackEvent(forEventName: kEventPageLoad, andParameters: params, canBatchThisEvent: canBatchThisEvent)
  }

  // MARK: Set user info
  @objc func setUserInfoEmailId(_ emailId: String) {
    BlueShiftUserInfo.sharedInstance()?.email = emailId
    BlueShiftUserInfo.sharedInstance()?.save()
  }
  
  @objc func setUserInfoCustomerId(_ customerId: String) {
    BlueShiftUserInfo.sharedInstance()?.retailerCustomerID = customerId
    BlueShiftUserInfo.sharedInstance()?.save()
  }
  
  @objc func removeUserInfo() {
    BlueShiftUserInfo.removeCurrentUserInfo()
  }
  
  // MARK: Push notifications
  @objc func registerForRemoteNotification() {
    BlueShift.sharedInstance()?.appDelegate.registerForNotification()
  }
  
  @objc func setEnablePush(_ isEnabled: Bool) {
    BlueShiftAppData.current()?.enablePush = isEnabled
  }
  
  // MARK: Set location for tracking
  @objc func setCurrentLocation(_ lat: Double, long:Double) {
    let location = CLLocation(latitude: lat, longitude: long)
    BlueShiftDeviceData.current()?.currentLocation = location
  }

  //MARK: In-app notificatins
  @objc func fetchInAppNotification() {
    BlueShift.sharedInstance()?.fetchInAppNotification(fromAPI: (() -> Void)? {}, failure: ((Error?) -> Void)?{_ in
    })
  }
  
  @objc func displayInAppNotification() {
    DispatchQueue.main.async {
      BlueShift.sharedInstance()?.displayInAppNotification()
    }
  }
    
}

Here, we have created wrapper functions for the SDK functionality, that you can access from your JavaScript code. In this example, we have covered basic functionality for demonstration, you can add more functions according to your requirement to access the SDK features.

Now, create an Objective-C file (using File > New > File > Objective-C option in the menu bar). Specify the name of the file as Blueshift.m.

Add the following code in the Blueshift.m file that you create:

#import <Foundation/Foundation.h>
#import "React/RCTBridgeModule.h"

@interface RCT_EXTERN_MODULE(BlueshiftBridge, NSObject)
RCT_EXTERN_METHOD(identifyWithDetails:(NSDictionary *)details)
RCT_EXTERN_METHOD(trackCustomEvent:(NSString *)eventName details:(NSDictionary *) details canBatchThisEvent:(BOOL)canBatchThisEvent)
RCT_EXTERN_METHOD(trackScreenView:(NSString *)screenName details: (NSDictionary *)details canBatchThisEvent:(BOOL)canBatchThisEvent)
RCT_EXTERN_METHOD(setUserInfoEmailId:(NSString *)emailId)
RCT_EXTERN_METHOD(setUserInfoCustomerId:(NSString *)customerId)
RCT_EXTERN_METHOD(removeUserInfo)
RCT_EXTERN_METHOD(registerForRemoteNotification)
RCT_EXTERN_METHOD(setEnablePush:(BOOL)isEnabled)
RCT_EXTERN_METHOD(setCurrentLocation:(Double)lat long:(Double)long)
RCT_EXTERN_METHOD(fetchInAppNotification)
RCT_EXTERN_METHOD(displayInAppNotification)
@end

Blueshift.m works as an abstraction layer. Only the methods that are mentioned in the above Blueshift.m file and correspond to the BlueshiftBridge.swift get exposed to the React Native framework.

Once the above files are placed correctly, we can import the js module in any js class and call its methods directly. For example:

// save user attributes with Blueshift
NativeModules.BlueshiftBridge.setUserInfoEmailId("Set email id here")
NativeModules.BlueshiftBridge.setUserInfoCustomerId("Set customer id here")
NativeModules.BlueshiftBridge.removeUserInfo()

// send identify event
NativeModules.BlueshiftBridge.identifyWithDetails({})

// sending events
NativeModules.BlueshiftBridge.trackCustomEvent("Set event name here",{},false)
NativeModules.BlueshiftBridge.trackScreenView("Set screen name here",{},false)

// Register for remote notifications (iOS)
NativeModules.BlueshiftBridge.registerForRemoteNotification()

// Set push as enabled/disabled on app level. Accepts boolean value.
NativeModules.BlueshiftBridge.setEnablePush(true)

// Fetch in-app messages from the API
NativeModules.BlueshiftBridge.fetchInAppNotification()

// Show in-app message
NativeModules.BlueshiftBridge.displayInAppNotification()

📘

Note

To support rich push notifications from Blueshift, set up notification service and content extensions as mentioned in this document.

For more information on the methods that are available in our SDK, you can take a look at the following docs:

Updated 11 months ago