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.

//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

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 in Connections > React Native

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.

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".

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.

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.

 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.

 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.

 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';


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.

 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.

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.
}

Advanced Options

Set Custom Fonts (optional)

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

 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

 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

 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

Last updated