Okay LogoOkay Logo

React Native SDK documentation

Use our SDK for React Native apps

React Native SDK documentation
Download React Native SDK
1. Installation

1) Create folder custom_modules in your project root folder:

  • Project_Name/custom_modules


2) Add folder with library to your custom_modules folder:

  • Project_Name/custom_modules/RNOkaySDK


3) Add to package.json dependencies:

  • "react-native-okay-sdk": "file:custom_modules/RNOkaySDK"


4) Install node_modules:

Run npm install

5) Link library with react-native:

Run react-native link react-native-okay-sdk

2. Android

Configure Android project:

  • Open Project_Name/android/build.gradle
  • Set minSdkVersion in build.gradle

buildscript {

ext {

buildToolsVersion = "28.0.3"

minSdkVersion = 16

compileSdkVersion = 28

targetSdkVersion = 28

supportLibVersion = "28.0.0"

}

.....

dependencies {

classpath("com.android.tools.build:gradle:3.4.1") // update gradle to 3.4.1

...

}

.....

}

  • Add maven repository to build.gradle


allprojects {

repositories {

mavenLocal()

google()

jcenter()

maven {

// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

url "$rootDir/../node_modules/react-native/android"

}

// Begin: Add This

maven {

url 'https://dl.bintray.com/okaythis/maven'

}

// End:

}

}

Add permissions to AndroidManifest.xml:

  • Open Project_Name/android/src/main/AndroidManifest.xml
  • Add user-permissions to AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.READ_PHONE_STATE"/>

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

Add databinding and multidex for android:

  • open Project_Name/android/app/build.gradle

android {

compileSdkVersion rootProject.ext.compileSdkVersion

compileOptions {

sourceCompatibility JavaVersion.VERSION_1_8

targetCompatibility JavaVersion.VERSION_1_8

}

// Begin Add DataBinding

dataBinding {

enabled = true

}

// End

defaultConfig {

...

multiDexEnabled true // Add this line

}

...

}

3. iOS

Download PSA.framework and PSACommon.framework:

Unpack content of PSA.zip and PSACommon.zip to the RN's PROJECT_DIR/ios

Open XCode project structure

  • Right-click on Frameworks folder in Project Structure
  • Click Add files to "PROJECT_NAME"...
  • Added PSA.framework and PSACommon.framework

Open PROJECT_NAME target

  • Open Build Phases tab
  • Remove PSA.framework and PSACommon.framework from 
  • Open General tab
  • Drag and drop PSA.framework and PSACommon.framework into 
4. Usage

Allowed methods:


CompontentDidMount() {

RNOkaySdk.init("http://protdemo.demohoster.com").then(response =>

...

);

}

  • permissionRequest()

RNOkaySdk.permissionRequest().then(response => console.log(response)); // Response: Array or required permissions

  • enrollProcedure(SpaEnrollData)

firebase.iid().get()

.then(instanceID => {

RNOkaySdk.enrollProcedure({

SpaEnrollData: {

host: "http://protdemo.demohoster.com", // PSS server address

appPns: instanceID,

pubPss: pubPssBase64, // public Pss key https://github.com/Okaythis/okay-example/wiki/Mobile-Client-Settings

installationId: "9990", // installationId https://github.com/Okaythis/okay-example/wiki/Mobile-Client-Settings

pageTheme: { // Page Theme customization, if you don't want customization: pageTheme: null.

actionBarTitle: "YOUR_ACTION_BAR_TITLE",

actionBarBackgroundColor: "#ffffff",

actionBarTextColor: "#ffffff",

buttonTextColor: "#ffffff",

}

}

}).then(response => console.log(response));

})

.catch(error => console.log(error));

  • updateDeviceToken(token) // (ONLY FOR iOS). Token received from PushNotificationsIOS

// For example

CompontentDidMount() {

PushNotificationIOS.addEventListener('register', token => {

RNOkaySdk.updateDeviceToken(token);

})

...

);

}

  • isEnrolled()
  • isReadyForAuthorization()
  • authorization(SpaAuthorizationData) // Called after receive message from firebase
  • linkTenant(linkingCode, SpaStorage);
  • unlinkTenant(tenantId, SpaStorage);

firebase.messaging().onMessage(message => {

startAuthorization(message.data.sessionId);

});

startAuthorization = (sessionId) => {

firebase.iid().get()

.then(instanceID => {

RNOkaySdk.authorization({

SpaAuthorizationData: {

sessionId: sessionId, // Received from firebase messaging

appPNS: instanceID,

pageTheme: { // Page Theme customization, if you don't want customization: pageTheme: null

actionBarTitle: "YOUR_ACTION_BAR_TITLE",

actionBarBackgroundColor: 5,

actionBarTextColor: 10,

buttonTextColor: 15,

}

}

}).then(response => console.log(response));

})

.catch(error => console.log(error));

}

  • linkTenant(linkingCode, SpaStorage)
  • You should always pass appPns and externalId other parameters can be null
  • linkingCode code from SP server. It can be entered by user, or received from server (depends on your relization)
  • You should save externalId after RNOkaySdk.enrollProcedure(...).then( externalId => ...) method.

firebase.iid().get()

.then(instanceID => {

RNOkaySdk.linkTenant(

linkingCode,{

SpaStorage: {

appPns: instanceID,

pubPss: pubPssBase64,

externalId: 'YOUR_EXTERNAL_ID',

installationId: "9990",

enrollmentId: null

}

})

}

  • unlinkTenant(tenantId, SpaStorage);
  • tenantId -> Number

firebase.iid().get()

.then(instanceID => {

RNOkaySdk.unlinkTenant(

tenantId,{

SpaStorage: {

appPns: instanceID,

pubPss: pubPssBase64,

externalId: 'YOUR_EXTERNAL_ID',

installationId: "9990",

enrollmentId: null

}

})

}

6. Page Theme properies for iOS