React Native (iOS)
Mobile apps developed using React Native can integrate the mbark SDK on iOS using the guide below. A React Native framework that supports both Android and iOS is currently in development.
mbark's Swift SDK for iOS can easily be added to a React Native iOS app using Native Modules.
Native Modules provides a bridge to the mbark framework's API. This allows a React Native app to launch user-flows and individual views from within Javacript.
Please download the companion React Native sample project to follow along with this article.

Adding the mbark SDK

A reference to the mbark CocoaPod can be added to the .Podfile found in the iOS directory of a React Native Project.
1
pod 'Mbark', '~> 1.4.5'
Copied!
The minimum iOS version should also be set to '12.0'.
1
platform :ios, '12.0'
Copied!
pod install can be run in the iOS directory to add the mbark framework as a dependency.

Native Integration

Open the sample project's iOS workspace in Xcode, and locate the Mbark-Info.plist file. This property list file contains the keys that connect an app to its remotely managed UI. When a user signs up for an mbark account, they'll receive two keys. A Partner ID and an API Key. Mbark-Info.plist contains rows for both values. REMOTE_CONFIG_ID holds the Partner ID and API_KEY the API Key.
In the sample project's Mbark-Info.plist file try adding your identifiers to connect to your account and user-flow.
Mbark-Info.plist Provides an easy way to auto-connect to the mbark platform.
Next, in the iOS workspace, open AppDelegate.m. Near the bottom of the application:didFinishLaunchingWithOptions: method there are two examples that show how the mbark SDK can be initialized. If you choose to store your keys in the Mbark-Info.plist you can call:
1
[Mbark initializeSDKWithInstanceName:@"My App Name"
2
selectedLanguage:@"en"];
Copied!
To provide the keys manually, instead of using a property list file to store them, call:
1
[Mbark initializeSDKWithInstanceName:@"My onboarding flow"
2
remoteConfigId:@"YOUR_MBARK_PARTNER_ID"
3
productionAPIKey:@"YOUR_MBARK_API_KEY"
4
developmentAPIKey: nil
5
selectedLanguage:@"en"];
Copied!
Once the mbark SDK has been initialized it's ready to display server-driven views and user-flows.

Native Modules

In the iOS sample project locate the class named RCTMbark. This class extends RCTEventEmitter and conforms to RCTBridgeModule.
By extending RCTEventEmitter events can be sent from the SDK to Javascript. This is helpful for registering tiebacks (or event handlers) which we will discuss in greater detail soon.
Conforming to RCTBridgeModule allows RCTMbark to register as a bridge between the React Native app and the mbark SDK. In RCTMbark's implementation a call is made to the RCT_EXPORT_MODULE() macro where this registration takes place. The framework's available methods are also bridged by means of the RCT_EXPORT_METHOD() macro. The following is an example of one of these methods:
1
/// A helper method used to simplify tracking new user authentication events
2
RCT_EXPORT_METHOD(trackAuthenticationForNewUser) {
3
[Mbark trackAuthenticationForNewUser];
4
}
Copied!
In the sample project, on the React Native side of this bridge, Mbark.ts wraps a common interface around these exported methods.

Embedding mbark views

In the iOS workspace locate the RCTMbarkViewManager class. This class extends RCTViewManager which bridges native UI to React Native. RCTMbarkViewManager provides an instance of MbarkControllerView which wraps a UIViewController inside a UIView. This allows for the embedding of native, mbark UI into an existing React Native view tree.
In JavaScript, MbarkView.js provides an example of how this is done. A screenId can be defined as a parameter to direct the SDK to instantiate a specific view:
1
<MbarkView screenId="screen-000" />
Copied!
Launching a complete user-flow is also an option. In the sample project, LandingScreen.js provides an example of this. Below, event-tracking is started for the new user-flow. Next, the user-flow is presented, passing in the starting screen ID.
1
Mbark.trackFlowStart();
2
Mbark.presentOnboardingWithStartingViewId("screen-000");
Copied!
Tracking will automatically end once the user-flow has completed.
User Flow An example of a mbark user-flow displayed in a React Native app.

Tiebacks

When a certain event occurs in a native user-flow we can direct mbark to call a 'tieback', or an event handler, in the React Native app. This event handler includes a closure that responds to a registered identifier. Tiebacks allow us to add many different features to a user-flow. Theycan be used to add authentication, complete in app purchases, or access an API endpoint. For a more detailed explanation as to how tiebacks work and how to use them in Screen Builder, please refer to Handling User Interactions.
A tieback can be added to a React Native app with a few simple steps. LandingScreen.js in the sample project provides the following example:
1
mbarkEmitter = new NativeEventEmitter(Mbark);
2
3
// To access Mbark action handlers we add a listener to `mbarkEvent`
4
// `MbarkActionHandler` calls will be transcribed to an event payload
5
// which can be responded to based on a registered `eventId`.
6
this.subscription = this.mbarkEmitter.addListener('mbarkEvent', (event) => {
7
console.log(event.id)
8
if (event.id === "sign_in") {
9
// handle sign in request
10
}
11
Mbark.markEventCompleteForEventId(event.id, true);
12
});
13
14
// We register the `eventId`s we will handle. These correspond to Tieback IDs
15
// in ScreenBuilder. This allows ScreenBuilder users an opportunity to remotely
16
// assign existing functionality to Mbark's UI.
17
Mbark.registerEventForId("sign_in");
Copied!
In this example a listener is added to a NativeEventEmitter for the 'mbarkEvent'. This "umbrella" event represents all possible mbark events. To listen for specific events register specific event IDs that should be handle. In the above example, "sign_in" is registered with the SDK.
Inside the event handler, an event's ID can be evaluated to determine how to handle it. Once an event is handled, markEventCompleteForEventId() should be called. This will allow the mbark SDK to proceed with any post-event actions it needs to perform.
Tieback An example of a user interaction that could trigger a tieback in the host React Native app.