# React Native

{% hint style="info" %}
Latest Version: [1.0.1](https://www.npmjs.com/package/surveysparrow-react-native-sdk/v/1.0.1)
{% endhint %}

Below are the various processes involved in setting up Spotcheck in React Native. Kindly refer example applications [here](https://github.com/surveysparrow/surveysparrow-react-native-sdk/tree/spotchecks/example)

## Installation

To install the SurveySparrowSdk, make sure you are in the root folder of your React Native project in the terminal and run the following command.

```bash
# NPM Installation
npm install surveysparrow-react-native-sdk
npm install react-native-webview # Supported Version: >= 13.7.0

# YARN Installation
yarn add surveysparrow-react-native-sdk
yarn add react-native-webview # Supported Version: >= 13.7.0
```

* The SurveySparrowSdk requires Internet access to fetch surveys and submit answers
* It also requires camera permission to attend the photo capture Questions. 
* So, add the following permissions to the `AndroidManifest.xml` file for Android

```
 <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <queries>
       <intent>
           <action android:name="android.media.action.IMAGE_CAPTURE" />
       </intent>
   </queries>
```

* Also add the camera permissions in info.plist for IoS

```
<key>NSCameraUsageDescription</key>
<string>Your-Description</string>
```

***

Also for voice **transcription support**, add the following permissions to the app.

```xml
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
```

#### IOS:

```swift
<key>NSMicrophoneUsageDescription</key>
<string>REASON</string>
        
<key>NSSpeechRecognitionUsageDescription</key>
<string>REASON</string>
```

***

## Initialization

Declare and initialize the spotcheck variable using the initializeSpotChecks().

**Anonymous users**

If you wish not to keep track of users' data, you can follow the below syntax for initialization.

```jsx
import { initializeSpotChecks } from 'surveysparrow-react-native-sdk';
//Initialize once at the root of the App
  useLayoutEffect(() => {
   initializeSpotChecks({
       domainName: ‘your-domain-name',
       targetToken: 'your-target-token’,
       // Should Not Pass userDetails as const
       userDetails: {},
       variables: {},
       customProperties: {},
   });
 },[]);
```

**Known Users**

If you wish to keep track of users' data and perform conditional Survey triggers, you can follow the below syntax for initialization.

<pre class="language-jsx"><code class="lang-jsx">import { initializeSpotChecks } from 'surveysparrow-react-native-sdk';
//Initialize once at the root of the App
<strong>useLayoutEffect(() => {
</strong>   initializeSpotChecks({
       domainName: ‘your-domain-name',
       targetToken: 'your-target-token’',
       userDetails: {
           email:"&#x3C;user_email>",
           mobile:"&#x3C;user_mobile>",
           uuid: '&#x3C;uuid_value>' // Optional
      },
      variables: {
           sparrowLang: "ta" // Eg: ta, en, 
           &#x3C;api_identifier_of_variable>:"&#x3C;variable_value>",
      },
      customProperties: {
            &#x3C;custom_property_name>: ‘&#x3C;custom_property_value>’
       },
   });
 },[]);
</code></pre>

Add Spotcheck inside the navigation container only once in the App component

```jsx
import Spotcheck from 'surveysparrow-react-native-sdk';
<NavigationContainer>
	<Stack.Navigator>
		<your-app-code>
	</Stack.Navigator>
	<Spotcheck/>
</NavigationContainer>
```

### Screen Track

It provides the ability to keep track of screens the users are visiting and to enable the survey trigger on that screen.

#### Syntax:

```jsx
import { trackScreen } from 'surveysparrow-react-native-sdk';
useEffect(()=>{
    trackScreen('<your-screen-name>  eg. ScreenName');
},[])
```

#### Example:

If a survey needs to be triggered on the payment page, the name of the ScreenName should be specified in the TrackScreen function.

<pre class="language-jsx"><code class="lang-jsx">import { trackScreen } from 'surveysparrow-react-native-sdk';
useEffect(()=>{
<strong>    spotCheck.trackScreen("paymentScreen");
</strong>},[])
</code></pre>

### Event Track

It provides the ability to keep track of events which when triggered, will enable the survey to be popped.&#x20;

#### Syntax:

```swift
import { trackEvent } from 'surveysparrow-react-native-sdk';
trackEvent(‘<your-screen-name>’, {
      "<your-events-or-functions>": {}
   }
 }
```

#### Example:

If a survey needs to be triggered when the user completes a payment, then the TrackEvent function should be called with the respective ScreenName and optional custom properties.

```jsx
import { trackEvent } from 'surveysparrow-react-native-sdk';
trackEvent(‘paymentScreen’, {
      ‘paymentComplete’: {
      email:’kalaiselvan.k@surveysparrow.com’,
       paymentStatus:true
}
   }
 }
```

{% hint style="info" %}
Make sure to have the eventName configured in the Checks section of the configure panel
{% endhint %}