Skip to main content

React Native

React Native Latest Version: 1.0.8
GitHub Example App: View Example

Below are the various processes involved in setting up Spotcheck in React Native.

Installation​

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

# NPM Installation
npm install surveysparrow-react-native-sdk
npm install react-native-webview //Supported Version: >= 13.7.0
npm install react-native-safe-area-context
npm install react-native-svg // For supporting SpotChecks Buttons

# YARN Installation
yarn add surveysparrow-react-native-sdk
yarn add react-native-webview //Supported Version: >= 13.7.0
yarn add react-native-safe-area-context
yarn add react-native-svg // For supporting SpotChecks Buttons

  • 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>

Note: To use voice transcription features, add the following lines in your app's Info.plist file:

Voice Transcription Support​

<key>NSMicrophoneUsageDescription</key>
<string>Your-Description</string>

<key>NSSpeechRecognitionUsageDescription</key>
<string>Your-Description</string>

Initialization​

Declare and initialize the spotcheck with the help of the initializeSpotChecks() function.

Anonymous users​

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

import { initializeSpotChecks, Spotcheck } from 'surveysparrow-react-native-sdk';
import { useLayoutEffect } from 'react';

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.

import { initializeSpotChecks, Spotcheck } from 'surveysparrow-react-native-sdk';
import { useLayoutEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

//Initialize once at the root of the App
useLayoutEffect(() => {
   initializeSpotChecks({
      domainName: 'your-domain-name',
      targetToken: 'your-target-token',
      userDetails: {
        email:"<user_email>",
        mobile:"<user_mobile>",
        uuid: '<uuid_value>' // Optional
      },
      variables: {
        sparrowLang: "ta" // Eg: ta, en,
        <api_identifier_of_variable>:"<variable_value>",
      },
      customProperties: {
        <custom_property_name>: '<custom_property_value>'
       },
   });
},[]);

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

 <SafeAreaProvider> // Spotcheck component needed to be enclose within SafeAreaProvider
<NavigationContainer>
	<Stack.Navigator>
		<your-app-code>
	</Stack.Navigator>
	<Spotcheck/>
</NavigationContainer>
 </SafeAreaProvider>

Screen Track​

It provides the ability to keep track of screens the users are visiting and to enable the survey trigger on that screen. Also user can able to pass the dynamic variables in the screen tracking function.

Syntax:​

import { trackScreen } from 'surveysparrow-react-native-sdk';
import { useEffect } from 'react';

useEffect(() => {
  trackScreen('<your-screen-name>', {
    userDetails: {
      email: '<user_email>',
      mobile: '<user_mobile>',
      uuid: '<uuid_value>' // Optional
    } // optional,
    variables: {
      sparrowLang: 'ta', // Language code (e.g., 'ta', 'en')
      <api_identifier_of_variable>: '<variable_value>',
    } // optional,
    customProperties: {
      <custom_property_name>: '<custom_property_value>'
    } // optional
  });
}, []);

Example:​

If a survey needs to be triggered on the payment page, the name of the ScreenName should be specified in the TrackScreen function. Also we can pass the dynamic variables as shown below.

import { trackScreen } from 'surveysparrow-react-native-sdk';
import { useEffect } from 'react';

useEffect(() => {
  trackScreen("paymentScreen",
  {
    userDetails: {
      email: 'kalaiselvan.k@surveysparrow.com',
      mobile: '9449988099',
    }, // optional
    variables: {
      sparrowLang: 'ta', // Language code (e.g., 'ta', 'en')
    }, //optional
    customProperties: {
      customerCount: 10
    }, // optional
  });
}, []);

Event Track​

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

Syntax:​

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.

import { trackEvent } from 'surveysparrow-react-native-sdk';

trackEvent('paymentScreen', {
  'paymentComplete': {
    email:'kalaiselvan.k@surveysparrow.com',
    paymentStatus:true
  }
});
Make sure to have the eventName configured in the Checks section of the configure panel

Callbacks (Optional)​

Callbacks are used to listen to events that are part of the SpotChecks. All callback functions are optional — you can implement only the ones you need. The available callbacks include:

  • Survey Response - triggers when the user submits a response.

  • Survey Loaded - triggers when the SpotChecks is loaded on the user's page.

  • Survey Close - triggers when the SpotChecks is closed by the user.

  • Partial Submission - triggers when the PartialSubmission is enabled and received.

Syntax:​

import { initializeSpotChecks } from 'surveysparrow-react-native-sdk';
import { useLayoutEffect } from 'react';

// Step 1: Add callbacks to the SpotChecks Initialization

useLayoutEffect(() => {
  initializeSpotChecks({
    //...
    listener: listener
  });
}, []);

// Step 2: Listen to the SpotChecks events
const listener = {
  onSurveyLoaded: async (response: Record<string, any>) => {},

  onSurveyResponse: async (response: Record<string, any>) => {},

  onCloseButtonTap: async () => {},

  onPartialSubmission: async (response: Record<string, any>) => {}
}