Kumar, Anish

mPulse SDK Integration Guide - ReactNative (iOS)

Instructions for adding the mPulse SDK to your ReactNative app for iOS.

 

Required For Setup

  • Before using the mPulse SDK, you will need to have a mPulse app configuration and an associated API Key. 
  • For information on how to set up your mPulse app config and the API key, refer our Getting started guide for Pulse.

 

Example Project

For your convenience, we've created a Sample App/project that you can use to understand the integration better and learn about using the mPulse SDK and its features with ReactNative.

 

mPulse SDK being native SDK does not directly support React Native. To overcome the challenge of adding native libraries to React Native is through bridging. We need to create an Objective-C/ Swift class, which will serve as a bridge between our React Native project and mPulse native SDK. Follow the steps as provided:

 

Add mPulse SDK Native framework

1. Create React Native project using CLI

user$ react-native init mPulseSample

2. Navigate to the SOASTA/mPulse-iOS Github repository and download the MPulse.framework.zip archive.

 

3. Unzip MPulse.framework.

4. Drag and drop the framework into your Xcode project.

5. Navigate to the Build Settings section of your target and add the following (if not already present) to the Other Linker Flags setting: -ObjC

6. Navigate to the Build Phases section of your target and add the following Libraries (if not already present) to the Link Binary With Libraries step:

img 9

7. If using mPulse from Swift, you must add the following line to the Objective-C bridging header ([project name]-Bridging-Header.h): #import <MPulse/MPulse.h>

Add bridging class

1. Open your XCode project

2. Add a new file from the project menu: File -> New -> File

3. Chose the template as iOS -> Cocoa Touch Class and click on Next

4. Name the class as you need, for this exercise we will name it as MPulseManager

5. Add RCTBridgeModule to MPulseManager class.

6. MPulseManager.h code

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

@interface MPulseManager : NSObject<RCTBridgeModule>

7. Open your MPulseManager.m

8. Your class must also include the RCT_EXPORT_MODULE() macro. This takes an optional argument that specifies the name that the module will be accessible in your JavaScript code.

RCT_EXPORT_MODULE();

9. Now we need to expose the method, in order to use mPulse services from our JavaScript code. For this example we'll be using mPulse addDimension method to add dimension. To do so, we need to use another macro provided by React Native: RCT_EXPORT_METHOD.

RCT_EXPORT_METHOD(addDimension:(NSString *)dimension )
{
  RCTLogInfo(@"MPulseManager addDimension %@", dimension);
  [[MPulse sharedInstance] setDimension:@"CardType" value:dimension];
}

10. Complete  MPulseManager.m code:

#import "MPulseManager.h"
#import <React/RCTLog.h>
#import <MPulse/MPulse.h>

@interface MPulseManager ()
@property (nonatomic, strong) NSString *mPulsetimerID;
@end

@implementation MPulseManager
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(addDimension:(NSString *)dimension )
{
  RCTLogInfo(@"MPulseManager addDimension %@", dimension);
  [[MPulse sharedInstance] setDimension:@"CardType" value:dimension];
}
@end

Call bridge from React Native code

 

1. Add

import {NativeModules} from 'react-native';

to your app.js.

2. Call addDimension bridged method:

NativeModules.MPulseManager.addDimension('Gold')