Skip to main content
Version: React Native SDK

Install

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-nativeLicense: MITCocoapodsMaven Central

Screeb SDK Usage in CI Environments​

Please note that if you are utilizing a Continuous Integration (CI) system, it is advisable to deactivate the Screeb SDK during CI execution. This precaution helps prevent the creation of numerous new anonymous users and potential exceedance of your MTU limit.

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​

The SDK 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, closeSdk, trackScreen, trackEvent, setProperties, setIdentity, resetIdentity, assignGroup, startSurvey } from "@screeb/react-native";

Setup the SDK​

tip

You can find your channel id in your workspace settings.

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

About SDK lifecycle​

At any time, you can disable the Screeb SDK with the following command:

import { closeSdk } from "@screeb/react-native";

closeSdk();

To enable the Screeb In-App Message editor on your React Native app, you need to configure deep links on both platforms.

iOS​

Add the following to your Info.plist file, replacing <channel-id> with your channel ID:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Viewer</string>
    <key>CFBundleURLName</key>
    <string>screeb</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>screeb-<channel-id></string>
    </array>
  </dict>
</array>

If using AppDelegate, add this code:

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any]) -> Bool {
        Screeb.handleDeepLink(url: url)
        return true
    }
}

Or if using SceneDelegate:

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        Screeb.handleDeepLink(url: URLContexts.first?.url)
    }
}

Android​

Add the following intent filter to your main Activity in AndroidManifest.xml, replacing <channel-id> with your channel ID:

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="screeb-<channel-id>" />
</intent-filter>

Then handle deep links in your MainActivity.kt:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    Screeb.handleDeepLink(intent)
}

override fun onNewIntent(intent: Intent?) {
    super.onNewIntent(intent)
    Screeb.handleDeepLink(intent)
}