React Native SDK ⁠-⁠ Initializing the SDK

Installation

The following line will install the tracker and with it the SDK for you to take advantage of all tracker features.

npm i @openreplay/react-native

Initialization

When instantiating OpenReplay’s tracker, there are several configuration options you can provide to customize many aspects of the recording and the recording experience. You must set the projectKey option in the constructor. You can get this value from your OpenReplay dashboard under ‘Preferences > Projects’.

Adding the tracking code

Add the following code to your root file:

import Openreplay from '@openreplay/react-native';

// ...
useEffect(() => {
  Openreplay.tracker.startSession(
    'yourProjectKey',
    options, // explained below, set {} if empty
    'https://local.openreplay.instance/ingest' // not required if you're using managed version
  );
}, [])

Adding enhanced components

In order to track user interactions within the app, you will need to add the following components to your application:

ORTouchTrackingView - added at the root level to track touch interactions
ORTrackedInput - wrapper around React-Native Input that sends signals whenever user is finished with input
ORSanitizedView - blurs out the contents inside

import Openreplay from '@openreplay/react-native';

function App() {
  const start = () => {
      Openreplay.tracker.startSession(
        process.env.REACT_APP_KEY!,
        {},
        process.env.REACT_APP_INGEST
      );
      Openreplay.tracker.setMetadata('key', 'value');
      Openreplay.tracker.setUserID('user-id');
      Openreplay.patchNetwork(global, () => false, {});
  };
  
  React.useEffect(() => start(), []);
  
  return (
    // this top-level view is required to track touch interactions
    <Openreplay.ORTouchTrackingView style={styles.container}> 
          <View style={styles.container}>
             <Openreplay.ORTrackedInput
              style={styles.input}
              onChangeText={onChangeNumber}
              value={number}
              placeholder="Trackable input"
              numberOfLines={1}
            />
    
            <Openreplay.ORSanitizedView style={styles.sanitizedView}>
              <Text>Contents of this view are sanitized and invisible on the recording</Text>
            </Openreplay.ORSanitizedView>
          </View>
    </Openreplay.ORTouchTrackingView>
  )
}

Sanitize Data

See how to sanitize data in React Native replays for more details.

Initialization Options

By default, all options are marked as true:

crashes: Bool Enables crashlytics.
analytics: Bool Enables analytics tracking of marked views.
performances: Bool Enables performance listener.
logs: Bool Enables logs listener.
screen: Bool Enables screen recorder.