@splitbee/react-native

Splitbee Analytics for React Native Apps

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

Usage with Expo

Install following expo dependencies:

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

We need those for getting the device data & persisting the user on a device.

Usage with React Native

Install following dependencies: @react-native-async-storage/async-storage & react-native-device-info

yarn add @splitbee/react-native 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

First of all you need to initialize the Splitbee SDK. For that, run splitbee.init with your token.

import splitbee from '@splitbee/react-native';

splitbee.init('YOUR_TOKEN'); // Take the token from the project settings in the Splitbee dashboard

Screen Tracking

Usage with react-navigation

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

import splitbee, { useTrackReactNavigation } from '@splitbee/react-native';

export default function Navigation() {
  const [{ onReady, onStateChange }, navigationRef] = useTrackReactNavigation();

  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      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

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);
    }
  }
);