React Native client library & widget

Multiplayer is a full stack session recorder that captures everything from front-end screens, user actions, backend traces, metrics, logs, to full request/response content and headers - all auto-correlated in a single session.

React Navite client library overview

The React Native client library provides full support for React Native mobile applications, including both bare React Native and Expo applications.

The in-app widget works the same as the JavaScript client library, and it allows end-users to select between two recording modes:

On-demand recording - Start/stop a recording manually
Continuous recording - Record in the background while you work

Check live examples of the in-app widget:

In the Multiplayer UI, for our users to report issues to us
In the Multiplayer free sandbox, to report issues about the sandbox project
In the Multiplayer demo app "Time Travel" that feeds data to our sandbox, as a real-world app would. This is a customized version.

⚠️ Please note that this library does NOT support React Native Web. If you need web support, consider using the browser-specific session recorder library instead.

Setup steps

Generate your API Key

Generating an API key is necessary to complete the CLI Apps setup and send frontend data to Multiplayer.

In the onboarding setup wizard:

Select "React Native Client Library"
(Optional) Rename your API key
Click "Create"

ℹ️ For a detailed step-by-step overview guide, please refer to: Multiplayer API keys setup & best practices

Installation

npm install @multiplayer-app/session-recorder-react-native
# or
yarn add @multiplayer-app/session-recorder-react-native

Recommended: Initialize with SessionRecorder.init(options) before you mount your React Native app to avoid losing any data

For all the required dependencies and specific Bare React Native and Expo instructions, check here: session-recorder-react-native

Minimal Setup (Recommended for getting started)

For Basic React Native Apps (App.tsx)

import React from 'react';
import {
  SessionRecorderProvider,
  SessionRecorder,
} from '@multiplayer-app/session-recorder-react-native';

// Initialize with minimal required options
SessionRecorder.init({
  application: 'my-react-native-app',
  version: '1.0.0',
  environment: 'production',
  apiKey: 'YOUR_MULTIPLAYER_API_KEY',
});

export default function App() {
  return (
    <SessionRecorderProvider>{/* Your app content */}</SessionRecorderProvider>
  );
}

For Expo Apps (_layout.tsx)

import React from 'react';
import { Stack } from 'expo-router';
import {
  SessionRecorderProvider,
  SessionRecorder,
} from '@multiplayer-app/session-recorder-react-native';

// Initialize with minimal required options
SessionRecorder.init({
  application: 'my-expo-app',
  version: '1.0.0',
  environment: 'production',
  apiKey: 'YOUR_MULTIPLAYER_API_KEY',
});

export default function RootLayout() {
  return (
    <SessionRecorderProvider>
      <Stack />
    </SessionRecorderProvider>
  );
}

Advanced config

‼️ Follow the steps in this GitHub readme to set up: multiplayer-session-react-native ‼️

Other languages & CLI Apps

Language specific libraries support any type of application and give full control to power users. Use your CLI to capture full-stack session replays across environments, get deeper integrations, CI/CD use cases, or backend-triggered sessions.

You did it! What’s next?

To leverage the Multiplayer full stack session recordings at their fullest, make sure to:

If you have any questions or trouble with the configuration, contact us.

React Navite client library overview​

Setup steps​

Login​

Generate your API Key​

Installation​

Minimal Setup (Recommended for getting started)​

Advanced config​

Other languages & CLI Apps​

You did it! What’s next?​