Skip to content

React Native SDK Install

Samuel Berthe edited this page Sep 16, 2022 · 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 21 minimum and iOS version 12 minimum.

The size of the SDK is approximately 500 KB on Android and approximately 3.2 MB on iOS.

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

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

When your survey is ready to share, we will provide a React-Native snippet to copy in the onCreate() function of the Application class.

Add Screeb as a dependency

npm install @screeb/react-native

Android

The Android SDK needs the permissions ACCESS_NETWORK_STATE and INTERNET to work well.

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

You should use MultidexApplication to avoid compilation issues.

defaultConfig {
    (...)
    multiDexEnabled true
}
(...)
dependencies {
   (...)
   implementation 'androidx.multidex:multidex:2.0.1'
}

The Android SDK requires to be notified of activities lifecycle changes to be correctly started.

It is mandatory to pass the Application context to the module in your custom Application class in the onCreate function:

override fun onCreate() {
    super.onCreate()
    ScreebModuleModule.setAppContext(this)
}

Your android app needs to use AGP minimum 7.1.3.

classpath("com.android.tools.build:gradle:7.1.3")

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

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

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