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.
Install Blitzllama React Native NPM package replacing
api_key with the API Key of your workspace. 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
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);
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.
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'});
You can provide Blitzllama with the user's email address. Email address is not mandatory for launching micro-surveys.
NPM
blitz.setUserEmail('user_email');
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');
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');
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.
You can call this function if you wish to stop tracking the user.
NPM
blitz.logout();
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)}/>
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');
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
});
[{
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
}, ...]
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 modified 14d ago