React Native SDK - Initializing the SDK
Installation
Section titled InstallationThe 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
Section titled InitializationWhen 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
Section titled Adding the tracking codeAdd 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' // if you're using our Serverless/SaaS plan then 'https://api.openreplay.com/ingest'
);
}, [])
Adding enhanced components
Section titled Adding enhanced componentsIn 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 interactionsORTrackedInput
- wrapper around React-Native Input that sends signals whenever user is finished with inputORSanitizedView
- 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
Section titled Sanitize DataSee how to sanitize data in React Native replays for more details.
Initialization Options
Section titled Initialization OptionsBy 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.