Skip to main content

React Native client library & widget

The Multiplayer React Native client Library is ideal for on-demand, in-app reporting of bugs and unexpected feature behaviours. End-users can use the (optional and customizable) widget to manually start/stop recordings, adding their notes and feedback before saving the replay.

To automatically detect and record bugs in your application, we recommend to use the Multiplayer debugging agent CLI.

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: Manually start/stop recordings to capture bugs or unexpected behaviors
  • Continuous: Manually enable/disable a rolling capture of your work. Recordings for errors and exceptions are auto-saved. You can also manually save recordings for your last 2 minutes of work

Check live examples of the in-app widget:

⚠️ 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​

Login​

Login into your Multiplayer account. If you don't already have one, create a free trial at go.multiplayer.app.

Generate your API Key​

Navigate to:

  • "Agents" tab > "API keys" or "Settings" to open the project settings
  • In "API keys" create an API key to authenticate the Multiplayer CLI. Copy the key immediately. For security reasons, you won’t be able to view it again later. If you lose it, you’ll need to generate a new one.
  • In "Session Recorder" create an API key to authenticate your application when sending session data to Multiplayer. Copy the key immediately. For security reasons, you won’t be able to view it again later. If you lose it, you’ll need to generate a new one.

ℹ️ 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

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?​

🚀 If you’re ready to trial Multiplayer with your own app, you can follow the steps in the quickstart.

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