React Native SDK Installation

Important

• React Native versions earlier than 0.64 are not supported.
• 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 that require native code to execute. Hence, Clarity SDK will not operate if you're running through Expo GO. To run the SDK locally, you can use the EAS Build system.
• Currently, React Native package offers full support for Android. iOS functionality is currently in an experimental phase and requires enabling a feature flag.

ReactNative plugin allows integrating Clarity with your application.

Installation

Step 1

Run this command to add the package.

npm install react-native-clarity

Step 2

Add this code to start Clarity.

import { initialize } from 'react-native-clarity';

initialize("<ProjectId>");

Refer to the available APIs and how to use them here.

Note

For iOS, data collection and upload is currently an experimental feature. To activate it, set the enableIOS_experimental config to true during initialization.

Step 3

After integrating Clarity with your application, if you'd like to test it on a device or an emulator, ensure the following steps:

1. Your device/emulator is connected to the internet.
2. Your device/emulator OS version is within the supported range:
   • Android: 29-34 inclusive.
   • iOS: 15-17 inclusive.
3. Your first run might require setting the log level to Verbose to obtain the Clarity logs. These logs can help identify initialization errors, if any.

Then give it around 2 hours for the data to show up in your Clarity project on the Clarity website.

Known Issues

• For react-native-svg Users: A known bug in react-native-svg version 13.x that affects user interaction and playback when used with Clarity. We recommend upgrading to react-native-svg version 14 or later for proper behavior and compatibility with Clarity.

FAQ

For more answers, refer to FAQ.

Visit Clarity

Demo

Sign in

Blog

:::column-end:::