# React Native

## Overview

The Blitzllama React Native SDK allows you to embed short in-app surveys directly into your React Native application (on both Android and iOS). By integrating the SDK, you can collect real-time user feedback at key points in the user’s journey.

#### Key Features:

* Quickly display micro-surveys using triggers you define.
* Ensure unique user identification to avoid repeated surveys.
* Add optional user attributes and event properties for better targeting.
* Localize surveys by specifying language codes.

#### Requirements:

* Android API level 21 (Android 5.0) or higher for Android.
* iOS 11 and above for iOS.
* Access to the Blitzllama dashboard to retrieve your `API Key` and manage triggers.

## Getting Started

### Before You Begin

**Obtain Your API Key:**

* Log in to the Blitzllama dashboard.
* Navigate to the **Connections** tab.
* Select **React Native** and find your `api_key`.

**Confirm Minimum Requirements:**\
For Android, ensure that your minimum SDK version is at least 21. For iOS and React Native setup, confirm that your environment meets standard React Native requirements.

## Quick Start (About 15 Minutes)

### 1. Install the SDK

Install the Blitzllama React Native package and necessary dependencies. Replace `api_key` with your workspace’s API\_KEY.

{% tabs %}
{% tab title="NPM" %}

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

{% endtab %}

{% tab title="Yarn" %}

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

yarn add react-native-blitzllama@1.5.0
```

{% endtab %}
{% endtabs %}

### 2. Initialize the SDK

Initialize the Blitzllama SDK as early as possible in your app—ideally in your main application file.

```javascript
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` on the Blitzllama dashboard under **Connections > React Native**.

### 3. Create a User

Before launching any survey, ensure that a unique user is created. The `user_id` should be unique and a string.

{% tabs %}
{% tab title="NPM" %}

```javascript
blitz.createUser('user_id'); 
```

{% endtab %}
{% endtabs %}

**Why Create a User?**\
This ensures consistent survey experiences and avoids repeated surveying of the same individual. If switching projects or user contexts, call `blitz.logout()` to clear stored data.

### 4. Trigger a Survey

Use triggers to display surveys at critical moments in your application. Set `showSurvey` to `true` when you want to present the survey and provide a `trigger_name` that matches one configured in the dashboard.

{% tabs %}
{% tab title="NPM" %}

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

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

{% endtab %}
{% endtabs %}

Once the user completes or dismisses the survey, the `closeSurvey` callback is executed to hide it.

You’re now ready to collect targeted user feedback with Blitzllama's in-app surveys! 🚀  Read further to check other capabilities of Blitzllama and customize to your requirement.

***

## Triggers and Trigger Properties

**What are Triggers?**\
Triggers are events defined in your app that determine when a survey should display. They are managed and configured in the Blitzllama dashboard.

**Attaching Trigger Properties (Optional):**\
Pass additional properties with a trigger to refine targeting.

```tsx
 <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.

![](https://713176431-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MagfF5JPg-8vm99iTd9%2Fuploads%2FJFVinyFxj3YupHRvgZJB%2Fimage.png?alt=media\&token=983225e2-fa1b-4476-8788-72016865f05c)

{% hint style="success" %}
You can also use **backend events** to launch in-app surveys. Check out <https://documentation.blitzllama.com/connections/backend-trigger> for more details.
{% endhint %}

## Personalizing and Localizing Surveys

### Setting User Attributes

You can provide Blitzllama with additional user information. This helps with refining targeting and personalizing the survey experience.&#x20;

**Set a Single Attribute:**

{% tabs %}
{% tab title="NPM" %}

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

//Allowed values for data_type are "string", "number", "date", "boolean".
```

{% endtab %}
{% endtabs %}

**Set Multiple Attributes at Once:**

{% tabs %}
{% tab title="NPM" %}

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

{% endtab %}
{% endtabs %}

**Set User Email and Name (Optional):**

{% tabs %}
{% tab title="NPM" %}

```javascript
blitz.setUserEmail('user_email');  
blitz.setUserName('user_name'); 
```

{% endtab %}
{% endtabs %}

### Setting Survey Language

You can provide Blitzllama with the language you wish to survey your user. It is not mandatory to launch surveys. Language code should be in [ISO 639-1 codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes).&#x20;

{% tabs %}
{% tab title="NPM" %}

```javascript
 blitz.setSurveyLanguage('language_code');
```

{% endtab %}
{% endtabs %}

## User Management

#### Logout

If you need to reset user tracking, for example when a user logs out of your app, call:

{% tabs %}
{% tab title="NPM" %}

```javascript
 blitz.logout();
```

{% endtab %}
{% endtabs %}

This ensures subsequent surveys are not tied to the previous user’s data.

## Advanced Usage and Best Practices

### Survey Completion Callback

Blitzllama can notify you when a survey completes, allowing you to trigger app-specific logic.

{% tabs %}
{% tab title="NPM" %}

```javascript
 blitz.subscribeEvent('survey_completed',(data) => { 
                          // data is an array of question/response objects
                          //add you custom logic here
                     });  
```

{% endtab %}
{% endtabs %}

Sample Data Format:

```json
[{
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

You can also subscribe to survey display events:

{% tabs %}
{% tab title="NPM" %}

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

{% endtab %}
{% endtabs %}

### Custom Fonts

Customize your survey’s look and feel by specifying custom fonts:

{% tabs %}
{% tab title="NPM" %}

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

{% endtab %}
{% endtabs %}

### Initializing Blitzllama Early

Make sure `blitz.init()` runs before mounting components that might trigger surveys. Ideally, run it in your main entry file (`App.js` or similar).

{% tabs %}
{% tab title="App.jsx" %}

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

const blitzSetup = async() => {
    await blitz.init('api_key');
    
    // call createUser once in the app’s lifetime for each unique user
    await blitz.createUser('user_id'); 
    
    // optionally set user attribute or set survey language here
};

// Call blitzSetup() at a high point in the app lifecycle. 
// Ensure blitzSetup() loads before a component is mounted. 
```

{% endtab %}

{% tab title="Component.jsx" %}

```javascript

import Blitzllama from 'react-native-blitzllama';

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

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

{% endtab %}
{% endtabs %}

### Performance Impact

The Blitzllama React Native SDK is designed to have a minimal footprint. Calls are asynchronous, so app performance is generally not affected. Surveys will briefly increase CPU usage when displayed, but the effect is negligible.

## FAQ & Troubleshooting

**Survey not showing up?**

* Verify that `blitz.createUser()` was called before showing the survey.
* Confirm that the trigger name used in your code matches exactly with the one configured on the Blitzllama dashboard.

**Survey not appearing on initial load?**\
This could be a timing issue. Make sure `blitz.init()` and `blitz.createUser()` are called early. If needed, you can trigger events only after the user creation callback completes.

**Switching Users?**\
If you need to track a different user, call `blitz.logout()` before creating a new one.

**Need more assistance?**\
Contact support via chat or email at <tech@blitzllama.com>.

## Next Steps

* Add a few triggers for critical actions within your app.
* Create and customize your first survey on the Blitzllama dashboard.
* Personalize the survey experience by adding attributes, setting languages, and customizing fonts.