Skip to main content

React Native

React

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

OpenBack React Native Module

The OpenBack React Native module makes it possible for your React Native application to interact with the OpenBack library. The module is avilable for iOS and Android.

info

A sample application is available on Github here. The module source code is available on Github here.

Getting started

Install the module in your package:

npm install react-native-openback --save

Link the native module to your iOS and Android applications:

react-native link react-native-openback

Before building the application, some minimal platform specific integration steps are needed.

iOS Integration

Create a Cocoapods Podfile in the /ios with pod init, then edit the Podfile adding pod OpenBack as well as enabling the dynamic framework feature use_frameworks!. Install OpenBack using pod update.

Follow the iOS Integration Documentation to add your App Code and fully configure OpenBack.

For best results, make sure to configure and start OpenBack from the application delegate didFinishLaunchingWithOptions:.

Android Integration

Edit the application /android/app/build.gradle to include the OpenBack library repository location and dependency.

repositories {
maven { url 'https://maven.openback.com/public' }
}

dependencies {
...
implementation "com.openback:OpenBack:4.+"
}
note

OpenBack library uses a few android support libraries at version 28. You might need to use the gradle resolutionStrategy if you want to use lower versions.

Follow the Android Integration Documentation to add your App Code and fully configure OpenBack.

API

The OpenBack React Native library contains 2 modules:

  • OpenBack (alias for RNOpenBack in NativeModules)
  • OpenBackAppInbox (alias for RNOpenBackppInbox in NativeModules)

To import OpenBack modules in your javascript application, use the following:

import { OpenBack, OpenBackAppInbox } from "react-native-openback";

Configuration

sdkVersion

sdkVersion(Callback callback)

Returns the current OpenBack SDK version.

setDebugLogLevel

setDebugLogLevel(int logLevel)

Sets the DebugLogLevel.

List of constants

LOG_LEVEL_VERBOSE
LOG_LEVEL_DEBUG
LOG_LEVEL_INFO
LOG_LEVEL_WARN
LOG_LEVEL_ERROR
LOG_LEVEL_NONE

getDebugLogLevel

getDebugLogLevel(Callback callback)

Gets the DebugLogLevel.

getAppCode

getAppCode(Callback callback)

Get the OpenBack app code.

setAutoStart

setAutoStart(Boolean autostart)

Set if the OpenBack SDK starts automatically.

isAutoStartEnabled

isAutoStartEnabled(Callback callback)

Check if the autostart is enabled.

setGDPRForgetUser

setGDPRForgetUser(Boolean forgetUser)

When your user requests that all the data should be erased, set this value to true. It will inform the OpenBack server to remove all logs for the current user. All future logs will be erased after processing. If you wish to be fully GDPR complient, you also need to enable GDPR in your application settings on the OpenBack Dashboard.

isGDPRForgetUserEnabled

isGDPRForgetUserEnabled(Callback callback)

Get isGDPRForgetUserEnabled.

setCOPPACompliant

setCOPPACompliant(Boolean compliant)

If your application needs COPPA to be enabled, set the COPPA compliant status with this function. If COPPA is enabled, messages will not run unless compliant is set to true.

isCOPPACompliant

isCOPPACompliant(Callback callback)

Return isCOPPACompliant value.

setHIPAACompliant

setHIPAACompliant(Boolean compliant)

Set HIPAACompliant value.

isHIPAACompliant

isHIPAACompliant(Callback callback)

Set HIPAACompliant value.

Runtime

start

start(Callback callback)

Start the OpenBack SDK.

stop

stop(Callback callback)

Stop the OpenBack SDK.

isStarted

isStarted(Callback callback)

Has the OpenBack SDK started.

resetAll

resetAll()

Reset all the current settings and user data. A new user will be created, and the library will behave as it would on fresh startup (using meta-dat, etc...).

Custom Segments

setCustomSegmentString

setCustomSegmentString(int segment, string value, Callback callback)

Set Custom Segment as a String.

setCustomSegmentLong

setCustomSegmentLong(int segment, long value, Callback callback)

Set Custom Segment as a Long.

setCustomSegmentDouble

setCustomSegmentDouble(int segment, double value, Callback callback)

Set Custom Segment as a Double.

setCustomSegmentArray

setCustomSegmentArray(int segment, ReadableArray value, Callback callback)

Set Custom Segment as an Array.

getCustomSegmentAsString

getCustomSegmentAsString(int segment, Callback callback)

Get Custom Segment as a String.

getCustomSegmentAsLong

getCustomSegmentAsLong(int segment, Callback callback)

Get Custom Segment as a Long.

getCustomSegmentAsDouble

getCustomSegmentAsDouble(int segment, Callback callback)

Get Custom Segment as a Double.

getCustomSegmentAsArray

getCustomSegmentAsArray(int segment, Callback callback)

Get Custom Segment as an Array.

removeAllCustomSegments

removeAllCustomSegments()

Remove all Custom Segment values.

Attributes

setAttributeString

setAttributeString(String attributeKey, String value)

Set Attribute as a String.

setAttributeLong

setAttributeLong(String attributeKey, Long value)

Set Attribute as a Long.

setAttributeDouble

setAttributeDouble(String attributeKey, Double value)

Set Attribute as a Double.

setAttributeMap

setAttributeMap(String attributeKey, ReadableMap value)

Set Attribute as a map.

setAttributeArray

setAttributeArray(String attributeKey, ReadableArray value)

Set Attribute as an Array.

setAttributes

setAttributes(ReadableMap attributes)

Set multiple Attributes.

getAttributeAsString

getAttributeAsString(String attributeKey, String value)

Get Attribute as a String.

getAttributeAsLong

getAttributeAsLong(String attributeKey, Long value)

Get Attribute as a Long.

getAttributeAsDouble

getAttributeAsDouble(String attributeKey, Double value)

Get Attribute as a Double.

getAttributeAsArray

getAttributeAsArray(String attributeKey, Callback callback)

Get Attribute as an Array.

getAttributeAsMap

getAttributeAsMap(String attributeKey, Callback callback)

Get Attribute as a Map.

getAllAttributes

getAllAttributes(Callback callback)

Get all Attributes.

removeAllAttributes

removeAllAttributes()

Remove all Attributes.

Logging Goals

logGoal(string goal, int step, double value, string currency, Callback callback)

You can log a goal that is associated with a message. Make sure to use the Goal code, not the Goal name.

Custom Events

signalEvent

signalEvent(String event, long delay)

You can signal an event based on in-app actions that will deliver a message.

cancelEvent

cancelEvent(String event)

You can cancel an event before the message is delivered.

logEvent

logEvent(String event, ReadableMap data)

Developer Tools

checkMessagesNow

checkMessagesNow()

Run the message checker.

reloadMessagesNow

reloadMessagesNow()

Reload the messages now.

areMessagesLoaded

areMessagesLoaded(Callback callback)

Checks if the messages are loaded on the device.

Constants

The application can pass some extra attributes using a simple dictionary object by setting the following fields:

NameTypeDescription
USER_ADDRESS_LINE_1stringAddress line 1
USER_ADDRESS_LINE_2stringAddress line 2
USER_ADVERTISING_IDstringAdvertising identifier set by the application
USER_AGEstringAge
USER_CITYstringCity
USER_COUNTRYstringCountry
USER_COUNTRY_CODEstringISO-2 country code
USER_DATE_OF_BIRTHstringDate of birth YYYY-MM-DD
USER_EMAILstringEmail Address
USER_FIRST_NAMEstringFirst name
USER_GENDERstringGender
USER_OPT_IN_UPDATESstringOpting in for message updates "true"/"false"
USER_PHONE_NUMBERstringPhone Number (international format)
USER_POST_CODEstringPostal code
USER_PROFESSIONstringProfession
USER_STATEstringState
USER_SURNAMEstringSurname
USER_TITLEstringTitle
USER_IDstringUser ID for using the API
USER_IDENTITY_1stringCustom user identifier 1
USER_IDENTITY_2stringCustom user identifier 2
USER_IDENTITY_3stringCustom user identifier 3
USER_IDENTITY_4stringCustom user identifier 4
USER_IDENTITY_5stringCustom user identifier 5

App Inbox API

App Inbox is available on iOS since version 1.8.7 and Android since version 2.4.6.

Inbox Messages

App Inbox messages are simple javascript objects with the following keys:

NameTypeDescription
readbooleanMessage read state
actionablebooleanMessage can be executed if true
displayTimeintegerDisplay time in epoch seconds
expirationTimeintegerExpiration time in epoch seconds
titlestringMessage title
contentstringMessage content
payloadstringMessage payload
thumbnailstringMessage thumbnail path
warning

Do not modify actionable, displayTime or _id when passing a message back to the API to remove, mark as read or execute it. Those values are used to retrieve the message on the native library side.

getMessageCount

async getMessageCount()

Total number of messages in inbox.

Example:

var count = await OpenBackAppInbox.getMessageCount();

getUnreadMessageCount

async getUnreadMessageCount()

Total number of unread messages in inbox.

Example:

var count = await OpenBackAppInbox.getUnreadMessageCount();

getAllMessages

async getAllMessages()

Retrieve all Inbox messages. Messages are sorted by display time, from newest to oldest.

Example:

var messages = await OpenBackAppInbox.getAllMessages();

getReadMessages

async getReadMessages()

Retrieve all Inbox read messages. Messages are sorted by display time, from newest to oldest.

Example:

var messages = await OpenBackAppInbox.getReadMessages();

getUnreadMessages

async getUnreadMessages()

Retrieve all Inbox unread messages. Messages are sorted by display time, from newest to oldest.

Example:

var messages = await OpenBackAppInbox.getUnreadMessages();

markMessageAsRead

async markMessageAsRead(message)

Mark an Inbox message as read. Returns true if successful.

Example:

await OpenBackAppInbox.markMessageAsRead(message);

markMessagesAsRead

async markMessagesAsRead(messages)

Mark Inbox messages as read. Returns true if successful.

Example:

await OpenBackAppInbox.markMessagesAsRead(messages);

markAllMessagesAsRead

async markAllMessagesAsRead()

Mark all Inbox messages as read. Returns true if successful.

Example:

await OpenBackAppInbox.markAllMessagesAsRead();

removeMessage

async removeMessage(message)

Remove message from the Inbox. Returns true if successful.

Example:

await OpenBackAppInbox.removeMessage(message);

removeMessages

async removeMessages(messages)

Remove messages from the Inbox. Returns true if successful.

Example:

await OpenBackAppInbox.removeMessages(messages);

removeAllMessages

async removeAllMessages()

Remove all message from the Inbox. Returns true if successful.

Example:

aait OpenBackAppInbox.removeAllMessages();

executeMessage

async executeMessage(message)

If a message is actionable, call this method to execute the associated action. Messages can have an actionable URL, deep-link, video, image, custom HTML. Executing a message will set the read status to true. Returns true if successful.

Example:

await OpenBackAppInbox.executeMessage(message);

Listen for App Inbox Changes

Create a NativeEventEmitter from the OpenBackInbox and add listener for the following events:

  • OBKAppInboxMessageAdded: A message was added
  • OBKAppInboxMessageRead: A message was read
  • OBKAppInboxMessageExpired: A message has expired

Example:

this.openBackAppInboxEmitter = new NativeEventEmitter(OpenBackAppInbox);

this.openBackAppInboxEmitter.addListener(
"OBKAppInboxMessageAdded",
(message) => {
console.log("Message added: " + JSON.stringify(message));
// Refresh message list...
}
);

this.openBackAppInboxEmitter.addListener(
"OBKAppInboxMessageRead",
(message) => {
console.log("Message read: " + JSON.stringify(message));
// Refresh message list...
}
);

this.openBackAppInboxEmitter.addListener(
"OBKAppInboxMessageExpired",
(message) => {
console.log("Message expired: " + JSON.stringify(message));
// Refresh message list...
}
);