Splitbee Analytics for React Native Apps

Used to track screen views & events of React Native & Expo Apps using Splitbee.

Installation

First, you need to install our SDK

yarn add @splitbee/react-native

With Expo

Install following expo dependencies:

expo add @splitbee/react-native expo-device expo-constants @react-native-async-storage/async-storage

They are required for getting the device data as well as persisting the identifier on the device.

With React Native

Install following dependencies

yarn add react-native-device-info @react-native-async-storage/async-storage
npx pod-install

Please follow the official documentation of those libraries on how to link them correctly.

Usage

Initialize Splitbee

To initialize the Splitbee SDK run the initSplitbee function with your token. This should happen only once at the top of your app.

import { initSplitbee } from '@splitbee/react-native';
initSplitbee('YOUR_TOKEN'); // Take the token from the project settings in the Splitbee dashboard

Screen Tracking

You might be using react-navigation or react-native-navigation for your app. You can use the Splitbee SDK to track page views automatically. See the examples below.

Usage with react-navigation

In this example we are using react-navigation to track screen views automatically.

import splitbee, { useTrackReactNavigation } from '@splitbee/react-native';
export default function Navigation() {
const [{ onReady, onStateChange }, navigationRef] = useTrackReactNavigation();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
onReady();
}}
onStateChange={() => {
onStateChange();
}}
>
<RootNavigator />
</NavigationContainer>
);
}

If you already have a ref set for the NavigationContainer, just pass it to useTrackReactNavigation

const navigationRef = useRef(null)
const [{ onReady, onStateChange }] = useTrackReactNavigation(navigationRef);

Usage with React Native Navigation (WIX)

To setup automated screen tracking you need to add following code to your index.js

Navigation.events().registerComponentDidAppearListener(
async ({ componentName, componentType }) => {
if (componentType === 'Component') {
await splitbee.screen(componentName);
}
}
);