Development of Zabaan in react native is still in initial stages. We have added basic functionality of Zabaan Native in a much simpler fashion.

To add the node module for Zabaan you'll have to run below command in your terminal.

npm install zabaan-react-native

All the details related to react native package and latest version updates can be found on npmjs website https://www.npmjs.com/package/zabaan-react-native

In screen where you want to display Zabaan. you have to import following Dependency in your JS files. This will enable you to use functions from Zabaan to configure Zabaan assistant.

import Zabaan from 'zabaan-react-native';

Initialization

Zabaan needs to be initialized across the app before app can use its feature. You will have to import Zabaan in very first screen of your app. Below function needs to be called in order to initialize Zabaan assistant.

async function onInit() {
        if (!init) {
            Zabaan.setDebug(true);
            Zabaan.setStatusBarHeight(StatusBar.currentHeight);
            Zabaan.init('Access_Token_From_Zabaan_CMS',
                function (complete) {
                    setInit(true);
                    Zabaan.setDefaultFingerAnimation(3)
                }
            );
        }
    }

If Zabaan gets initialized properly, init function will return a callback. Once this callback is received it ensures that Zabaan is initialized and can we used anywhere in the application. To understand what each Zabaan function does, Please check this section.

Enabling Zabaan Assistant for Screen

After importing Zabaan module in particular file screen file where assistant is to be displayed. function Zabaan.show() must be called in order to show assistant for that screen.

Zabaan SDK uses the concept of screen and state to identify and set interactions needed to be played for a particular screen and state.

To identify a particular screen setScreenName(screen_name) must be used. Each interaction defined over the CMS should have a screen name and state defined.

Below is a wrapper functions that combines all the function that enables Zabaan assistant to identify on which screen it is loaded and play correct interactions whenever user interacts with assistant.

async function enableForScreen() {
        Zabaan.show();
        Zabaan.setScreenName('Screen_Name');
        Zabaan.setState('State');
}