React Native
Below are the various processes involved in setting up Spotcheck in React Native. Kindly refer example applications here
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.
# 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.
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
IOS:
<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.
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.
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’',
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
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:
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.
import { trackScreen } from 'surveysparrow-react-native-sdk';
useEffect(()=>{
spotCheck.trackScreen("paymentScreen");
},[])
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
}
}
}
Last updated