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

![](/files/yFfwVi3cufc0xRrZDJHA)

{% 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.blitzllama.com/sdk/react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.