React Native SDK

In this article...

We'll walk you through the steps to install and use Qubit's React Native SDK.

Getting started

The React Native SDK allows you to integrate event tracking and lookup into iOS and Android mobile apps built with React Native.

INFO: To make use of this SDK, please contact your Qubit Customer Success representative.

Installing the SDK

  1. $ npm install qubit-sdk-react-native --save or $ yarn add qubit-sdk-react-native

  2. Navigate to your /ios directory and run pod install to ensure the QubitSDK CocoaPod is installed. Android should require no further installation.

  3. If you are using React Native < 0.60, you must link the library: $ react-native link qubit-sdk-react-native

Using the SDK

▸ Import the whole library in your javascript files:

import QubitSDK from 'qubit-sdk-react-native';

▸ Initialize the SDK:

QubitSDK.start("qubit");

▸ Send the first event:

QubitSDK.sendEvent("ecView", { "type": "button", "value": "click" });

API documentation

start

Initialization of the SDK. It should be called as early as possible after application start, only once, and before any other interaction with the API.

Parameters

Parameter

Type

Description

trackingId

Tracking Id (identifier of application/company etc

logLevel

Level of logs produced by native SDK (optional):
- SILENT
- ERROR
- WARN(default)
-INFO
-DEBUG
-VERBOSE

Example

QubitSDK.start("qubit", "DEBUG");
  • Returns void None

sendEvent

Sends event to the server.

Parameters

Parameter

Type

Description

eventType

Type of event, e.g. ecView

eventBody

Javascript map of any structure

Example

QubitSDK.sendEvent("ecView", { "type": "button", "value": "click" });
  • Returns void None

enable

Enables or disables receiving events.

Parameters

Parameter

Type

Description

value

true - Receive events
false - Do not receive events

Examples

QubitSDK.enable(false);
  • Returns void None

getTrackingId

Returns trackingId. Use for debug purposes.

Example

async () => {
 const trackingId = await QubitSDK.getTrackingId();
 ...
}

getDeviceId

Returns deviceId established by the SDK. Use for debug purposes.

Example

async () => {
 const deviceId = await QubitSDK.getDeviceId();
 ...
}

getLookupData

Returns current Lookup Data. Used for debug purposes.

Example

async () => {
 const lookupData = await QubitSDK.getLookupData();
 ...
}

{ viewNumber: 10,
 sessionNumber: 4,
 lastViewTs: 1863218003,
 ipLocation:
  { regionCode: '36004',
    region: 'unknown',
    longitude: 19.9612,
    latitude: 50.0495,
    countryCode: 'PL',
    country: 'poland',
    cityCode: '1803',
    city: 'krakow',
    areaCode: 'unknown',
    area: 'unknown' },
 ipAddress: '93.180.179.112',
 firstViewTs: 1696635454
}

getExperiences

Returns list of Experiences.

Parameters

Parameter

Type

Description

experienceIds

List of experiences Ids. When array is empty, returns all experiences

variation

The experience variation to return (Optional)

preview

The iteration to return (Optional):
true - Return the latest unpublished iteration for each experience
false - Return the latest published iteration for each experience

ignoreSegments

What to return in the payload (Optional):
true - Return payloads for all experiences regardless of the segment specification of the experience
false - Return payloads for all experiences taking account of the segment specification of the experience

Example

async () => {
 const experiences = await QubitSDK.getExperiences([], 0, false, false);
 experiences.forEach(e => e.shown());
 ...
}

{ variation: 852190,
   payload: {},
   isControl: false,
   id: 143640,
   callback: 'https://sse.qubit.com/v1/callback?data=igKAeyJFeHBlcmllbmNlSWQiOjE0MzY0MCwiSXRlcmF0aW9uARUsMzc2MDY3LCJWYXJpFRUUODUyNzc0HRUUTWFzdGVyATAQODUyMTkBRXBzQ29udHJvbCI6ZmFsc2UsIlRyYWZmaWNBbGxvYwVKTCI6MC40NzUsIlByb2JhYmlsaXR5ARRQODI1NjI2MTk0NTgyNDQ5MSwiUGlkVhkAGFRlbXBsYXQFvwxudWxsBWZMY2tpbmdJZCI6Im1pcXVpZG8iLCIBjQhleHQFFkQ4MmFjYzNiY2FiYmNhYzM2In0='
 },
{ variation: 855620,
   payload: { show_share: false,
     show_sale_banner: false,
     sale_banner: 'https://dd6zx4ibq538k.cloudfront.net/static/images/5010/626263d0b3d3230f4062da1e0d1395ad_1300_554.jpeg',
    free_shipping: 'Shipping is free for you!' },
   isControl: false,
   id: 144119,
   callback: 'https://sse.qubit.com/v1/callback?data=jAKAeyJFeHBlcmllbmNlSWQiOjE0NDExOSwiSXRlcmF0aW9uARUsNDUyOTEwLCJWYXJpFRUYMTAxMDcyMh0WFE1hc3RlcgExmDg1NTYyMCwiSXNDb250cm9sIjpmYWxzZSwiVHJhZmZpY0FsbG9jYQFgSCI6MC4yNSwiUHJvYmFiaWxpdHkBE2A0ODAwMTM4OTg0MjEwNjM3MywiUGlkIjowThoAGFRlbXBsYXQFwQxudWxsBWdMY2tpbmdJZCI6Im1pcXVpZG8iLCIBjghleHQFFkQ4MmFjYzNiY2FiYmNhYzM2In0='
 },
{ variation: 972984,
   payload: {},
   isControl: true,
   id: 160862,
   callback: 'https://sse.qubit.com/v1/callback?data=iQKAeyJFeHBlcmllbmNlSWQiOjE2MDg2MiwiSXRlcmF0aW9uARUsNDM0NjIzLCJWYXJpFRUUOTcyOTg0HRUUTWFzdGVyATARG3BJc0NvbnRyb2wiOnRydWUsIlRyYWZmaWNBbGxvYwVJRCI6MC41LCJQcm9iYWJpbGl0eQESVDAzNjQzMTAyMTQ3MTU5ODkyLCJQaWRaGgAYVGVtcGxhdAW-DG51bGwFZhBja2luZwGLKCJtaXF1aWRvIiwiAYwIZXh0BRZEODJhY2MzYmNhYmJjYWMzNiJ9'
 }
]
  • Returns Promise<array<Experience>>. Promise with an array of Experience objects.

Compatibility

Qubit SDK React Native is compatible with React Native 0.58 and higher.

Qubit website
Qubit Android SDK on Github
Qubit iOS SDK on Github

Last updated: September 2021
Did you find this article useful?