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 Script ( SDK version >= 1.0.1) latest

Typescript support added
NPM
Yarn
//dependency package needed
npm install @react-native-async-storage/async-storage
npm install react-native-[email protected]1.3.2
yarn add @react-native-async-storage/async-storage
yarn add react-native-[email protected]1.2.0

NPM Script (SDK version <= 1.0.0)

NPM
Yarn
//dependency package needed
npm install @react-native-community/async-[email protected]1.2.4
npm install react-native-[email protected]1.0.0
yarn add @react-native-community/async-[email protected]1.2.4
yarn add react-native-[email protected]1.0.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.
NPM
blitz.createUser('user_id');
Create a user with a unique user_id to prevent any inconsistencies.

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
Component.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.
}
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.
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
}, ...]

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