React Native Quick Start

Get session recording working in your React Native app in under 5 minutes.

Prerequisites

React Native 0.68+ or Expo SDK 47+
iOS deployment target 12.0+ / Android minSdkVersion 21+
A UXCam account with an app key

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Success

Negative potential consequences of an action.

Step 1: Install the Package

# npm
npm install react-native-ux-cam

# yarn
yarn add react-native-ux-cam

For iOS, install pods:

cd ios && pod install

Step 2: Initialize UXCam

In your App.js or entry file:

import RNUxcam from 'react-native-ux-cam';

// Enable video recording (required)
RNUxcam.optIntoVideoRecordings();

// Start UXCam
RNUxcam.startWithConfiguration({
  userAppKey: 'YOUR_APP_KEY',
  enableAutomaticScreenNameTagging: false,
  enableImprovedScreenCapture: true,
});

TypeScript version

import RNUxcam from 'react-native-ux-cam';

interface UXCamConfig {
  userAppKey: string;
  enableAutomaticScreenNameTagging?: boolean;
  enableImprovedScreenCapture?: boolean;
}

const config: UXCamConfig = {
  userAppKey: 'YOUR_APP_KEY',
  enableAutomaticScreenNameTagging: false,
  enableImprovedScreenCapture: true,
};

RNUxcam.optIntoVideoRecordings();
RNUxcam.startWithConfiguration(config);

Step 3: Verify It Works

Run your app on a device or emulator
Navigate through a few screens
Send the app to background
Check your UXCam Dashboard - your session should appear within 30 seconds

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Success

Negative potential consequences of an action.

Next Steps

You're recording sessions! Now customize your integration:

Full React Native Guide

Complete setup with all configuration options

Tag Screens

Enable heatmaps and screen analytics

Mask Sensitive Data

Protect passwords and PII

Track Events

Capture custom user actions