React Native installation

Add the SDK to your app, start it, and see the first session in the console.

Requirements

• React Native 0.71 or later, and React 18 or later.
• Android 7.0 (API 24) or later, and iOS 13.4 or later.
• A client token, an application ID and the intake URL of your DataPork server. The console shows them in Token and SDK. The console is invite-only for now: request access.

1. Install the package

npm install @datapork/react-native
# or
yarn add @datapork/react-native

The SDK has native code for Android and iOS, and React Native links it by itself (autolinking). On iOS, install the pods:

cd ios && bundle exec pod install && cd ..
# without Bundler: cd ios && pod install

Then rebuild the app. A JavaScript reload is not enough, because the native module has to be part of the binary. On Android the SDK adds the INTERNET and ACCESS_NETWORK_STATE permissions to your manifest.

2. Start the SDK

Call DataPork.initialize once, at the top of your entry file and before the app is registered, so that it sees everything from the start.

import { AppRegistry } from 'react-native';
import { DataPork } from '@datapork/react-native';

import App from './App';
import { name as appName } from './app.json';

DataPork.initialize({
  clientToken: '<client token>',
  applicationId: '<application ID>',
  env: 'prod',
  intakeUrl: 'https://<your DataPork intake>/v1/ingest',
});

AppRegistry.registerComponent(appName, () => App);

These four options are required. Everything else has a default; the configuration page lists them all.

Once started, the SDK records taps, network requests, uncaught errors, app start and performance without more code.

3. Track screens

Screens are recorded as views. Pick the package that matches your navigation library; it starts and ends a view for every screen the user opens.

React Navigation

npm install @datapork/react-navigation

It needs @react-navigation/native 5.6 or later, and the same version as @datapork/react-native.

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { ReactNavigationViews } from '@datapork/react-navigation';

export default function App() {
  const navigationRef = useNavigationContainerRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => ReactNavigationViews.attach(navigationRef)}
    >
      {/* your navigators */}
    </NavigationContainer>
  );
}

Optional filters decide which routes are recorded and under what name:

ReactNavigationViews.attach(navigationRef, {
  // Rename a view, or return null to skip it.
  nameFor: (route, trackedName) => (route.name === 'Splash' ? null : trackedName),
  // Return false to skip a route.
  shouldTrack: (route) => route.name !== 'DebugMenu',
  // Attributes to attach to the view.
  paramsFor: (route) => ({ screen: route.name }),
});

react-native-navigation

npm install @datapork/react-native-navigation

import { Navigation } from 'react-native-navigation';
import { ReactNativeNavigationViews } from '@datapork/react-native-navigation';

Navigation.events().registerAppLaunchedListener(() => {
  ReactNativeNavigationViews.attach(Navigation);
  // your Navigation.setRoot(...)
});

A second argument, (componentName) => string | null, renames a view or skips it by returning null.

Another navigation library

Open and close views yourself:

import { Rum } from '@datapork/react-native';

Rum.beginView('checkout', 'Checkout');   // key, name
// ...
Rum.endView('checkout');

4. Check that data arrives

Turn on the SDK log, run the app on a device or emulator, tap around, and call DataPork.flush() to upload right away. Without it, the SDK uploads every 10 seconds.

import { DataPork, LogLevel } from '@datapork/react-native';

DataPork.initialize({
  // ...the same values as before
  logLevel: LogLevel.DEBUG,
});

// anywhere, for example from a debug button: upload now instead of waiting
DataPork.flush();

Messages start with [DataPork] in the Metro log. Then open your application in the console: the session shows up in the Explorer with its views, actions and requests.

If nothing arrives

• The intake URL. It must be the full URL, ending in /v1/ingest. A missing or non-http(s) value makes initialize reject, and the log says so.
• Token and application ID belong to the same application, copied from Token and SDK.
• The device cannot reach the server. An Android emulator reaches your computer at 10.0.2.2, not localhost. From Android 9, plain http:// is blocked unless your app allows cleartext traffic, so use https://.
• Sampling. A sessionSampleRate below 100 leaves some sessions out; while testing, leave it unset.
• Consent. With consent: ConsentState.UNDECIDED nothing is sent until DataPork.updateConsent(ConsentState.ALLOWED).