React Native SDK Installation

Artículo
12/02/2024

Overview

A React Native plugin that allows integrating Clarity with your application.

Important

React Native versions earlier than 0.64 are not supported.
Platform Support: Android and iOS.
iOS support was experimental before version 4.0.0 and required enabling the enableIOS_experimental feature flag.
The Clarity package depends on native code to run. Therefore, you've to ship a new build after integrating the package.
Expo Go does not support plugins requiring native code to execute. Hence, Clarity SDK doesn't operate if you're running through Expo GO. To run the SDK locally, use the EAS Build system.

Installation

Step 1: Add package dependency

To add the package, run the following command.

npm install @microsoft/react-native-clarity

Step 2: Initialize Clarity

Initialize Clarity by adding the following.

import * as Clarity from '@microsoft/react-native-clarity';

Clarity.initialize('<project-id>', {
  /* logLevel: Clarity.LogLevel.Verbose, */
});

Step 3: Testing

After integrating Clarity with your application, ensure these steps for testing on a device or a simulator:

Your device or simulator should be connected to the internet.
The OS version on your device or simulator should be within the supported range specified at Platform/Framework Support Matrix.
For initial setup, consider setting the log level to Verbose. This provides detailed logs that can help identify any initialization issues.

Allow approximately 2 hours for complete sessions to appear in your Clarity project on the Clarity website. However, in-progress sessions can still be viewed in real time. See Clarity Recordings in Real Time.

Known issues

For react-native-svg Users: A known issue in react-native-svg version 13.x affects user interaction and playback when used with Clarity. Upgrade to react-native-svg version 14 or later for proper behavior and compatibility.