React Native

Blitzllama's React Native SDK works with both Android and iOS applications. The complete SDK integration into the React Native app takes an average of 15 mins. There are three main sections here:

• Integrating the SDK: installing and initializing the SDK.

• Managing users: creating users and adding user attributes.

• Launching a survey

Android minimum SDK version is API level 21.

1. Integrating the SDK

Install Blitzllama React Native NPM package replacing api_key with the API Key of your workspace.

NPM

//dependency package needed
npm install @react-native-async-storage/async-storage @react-native-community/checkbox react-native-webview

npm install react-native-blitzllama@1.5.0

Yarn

yarn add @react-native-async-storage/async-storage @react-native-community/checkbox react-native-webview

yarn add react-native-blitzllama@1.5.0

Then, in your application, initialize Blitzllama

import { blitz } from 'react-native-blitzllama';

//initialize blitzllama SDK. Place this as higher in your app as possible
blitz.init(api_key);

You can find your API_KEY by navigating to Connections tab > React Native on Blitzllama's dashboard.

2. Managing users

Create User

It is mandatory to create users using unique user_ids. Not only does it provide a consistent experience across platforms, but also prevents users from being surveyed multiple times. user_id has to be a string.

NPM

blitz.createUser('user_id'); 

Create a user with a unique user_id to prevent any inconsistencies.

Call the logout function or clear storage, if you are switching between projects in the same device.

Update User Attributes (optional)

Attributes are additional data points about users, that are used for creating targeted user cohorts on the Blitzllama dashboard. Attributes are optional and not required to launch a micro-survey.

Allowed data_type values are "string", "number", "date", "boolean".

NPM

blitz.setUserAttribute('attribute_name','attribute_value', 'data_type');  

Bulk Update

You can update multiple user attributes in key-value pairs (javascript object). It is suggested that user attributes must be updated too frequently or all at once.

NPM

blitz.setUserProperties({'property_name': 'value', age: 25, place: 'chennai'}); 

Update User Email (optional)

You can provide Blitzllama with the user's email address. Email address is not mandatory for launching micro-surveys.

NPM

 blitz.setUserEmail('user_email');  

Update User Name (optional)

You can also provide Blitzllama with the user's name. It can be used to make the questions more personalised. The user name is, again, not mandatory to launch surveys.

NPM

 blitz.setUserName('user_name'); 

Set User Language (optional)

You can provide Blitzllama with the language you wish to survey your user. It is not mandatory to launch surveys.

NPM

 blitz.setSurveyLanguage('language_code');

Language code should be in ISO 639-1 codes.

3. Launching Survey

You should provide Blitzllama with the event name you wish to survey your user. closeSurvey callback function to be called once the survey is dismissed/completed. showSurvey variable when set true, displays the survey for the userimport Blitzllama from 'react-native-blitzllama';

NPM

const [show, setShow] = React.useState(false);

<Blitzllama showSurvey={show} trigger="trigger_name" closeSurvey={() => setShow(false)}/>

You can also use backend events to launch in-app surveys. Check out https://documentation.blitzllama.com/connections/backend-trigger for more details.

You can also attach properties to each event. Event schemas can be changed on the dashboard. This is an optional feature.

 <Blitzllama event_properties={event_property object} trigger="trigger_name"   />

You can use these properties to more filter users in the survey, as shown in the below screenshot.

Logout User (optional)

You can call this function if you wish to stop tracking the user.

NPM

 blitz.logout();

Best practices

Ensure blitzSetup() loads before a component is mounted. Place the function as high up in the app execution order as possible. For reference, check the example below.

App.jsx

import { blitz } from 'react-native-blitzllama';

const blitzSetup = async() => {
    await blitz.init('api_key');
    
    //createUser function will be executed only once in the app lifetime.  
    await blitz.createUser('user_id'); 
    
    //other functions like user attribute set survey language etc.
}

Component.jsx

import Blitzllama from 'react-native-blitzllama';

const [show, setShow] = React.useState(false);

<Blitzllama showSurvey={show} trigger="trigger_name" closeSurvey={() => setShow(false)}/>

Advanced Options

Set Custom Fonts (optional)

You can provide Blitzllama with the user's custom Fonts. bold_font_family is optional.

NPM

 import { blitz } from 'react-native-blitzllama';
 
 blitz.setCustomFont('regular_font_family', 'bold_font_family');  

Frontend Callback

Blitzllama provides a survey complete event that you might find useful to trigger certain actions in your application.

Survey Completion Event

NPM

 blitz.subscribeEvent('survey_completed',(data) => { 
                          // do stuff 
                     });  

Sample Callback data

[{
question_order: 1,
question_text: "How well do you expect Blitz Demo to meet your needs?",
question_type: "single_select_feedback",
response: ['One'] //array value for select questions & string for other question types
}, ...]

Survey Display Event

NPM

 blitz.subscribeEvent('survey_displayed',(data) => { 
      console.log('data', data); 
      //{trigger: triggerName, can_display_survey: false | true}
 });  

Release Notes

New features and changes

Version 1.3.2 - 14 May 2023

• Added frontend event properties

Version 1.1.0 - 28 March 2023

• Added support for right-to-left languages like Arabic