Skip to content

React Native SDK Install

Alexis Rouillard edited this page Sep 11, 2023 · 21 revisions

How to install the React-Native SDK in your app?

See the example to install the last version of the Screeb SDK dependency in a React-Native app.

npm screeb/react-native License: MIT Cocoapods Maven Central

Technical requirements

The Screeb SDK is configured to work with Android SDK version 19 minimum and iOS version 11.0 minimum.

The Swift version is >= v5.5.2 and XCode version >= 13.2.1.

The size of the SDK is approximately 27 KB on Android and approximately 198 KB on iOS.

How to configure the React-Native SDK in your app?

First, log in to the Screeb application, then create your first survey.

Add Screeb as a dependency

npm install @screeb/react-native

Android

The Android SDK needs the permissions INTERNET to work well.

<uses-permission android:name="android.permission.INTERNET" />

The SDK also need theses permissions if you want to use the Screeb Audio/Video feature.

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.MICROPHONE" />
<uses-feature android:name="android.hardware.camera" android:required="true"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

iOS

Your Podfile needs the instruction use_frameworks! to correctly import Screeb dependencies.

Then you should set IOS target build configuration BUILD_LIBRARY_FOR_DISTRIBUTION to YES in your Podfile to avoid runtime crash:

use_frameworks!

[...]

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

The SDK also need theses permissions if you want to use the Screeb Audio/Video feature.

<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to take photos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone to record audio.</string>
<key>UISupportedInterfaceOrientations</key>

Update

When upgrading the React-Native SDK version, you may need to run in ios/ directory:

cd ios/
pod update Screeb

Import Screeb SDK into your package

import { initSdk, trackScreen, trackEvent, setProperties, setIdentity } from "@screeb/react-native";

Setup the SDK

// Init the sdk at app start (useEffect hook used here, but componentDidMount is fine)
React.useEffect(() => {
   initSdk(
      "<android-channel-id>",
      "<ios-channel-id>",
      "<user-id>",
      {
         'example-prop1': false,
         'example-prop2': 29,
         'example-prop3' : 'iPhone 13',
      }
   );
}, []);

Next steps

1- Identify visitors

See here.

2- Event tracking

See here.

3- Screen tracking

See here.

4- Start the survey programmatically

See here.

Clone this wiki locally