Splitbee is joining Vercel. →
PricingBlogSign In

Splitbee Analytics for React Native Apps

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

Installation

With Expo

Install @splitbee/react-native along side the expo related 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

Make sure to link all dependencies after instillation.

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 init function with your token. This should happen only once at the top of your app.

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


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

After this step you all functionality is available to you.

Basic tracking

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


// This initiliazes Splitbee.js
splitbee.init()




// Track a views (See automatic tracking)
splitbee.screen("Home")




// Track a custom event
splitbee.track("Sign Up")




// Track an event with custom data
splitbee.track("Choose Plan", {
  plan: "Business"
})




// Attach data to the current user
splitbee.user.set({
  email: "[email protected]"
})

Automatic 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, you can pass it to useTrackReactNavigation.

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

Usage with React Native Navigation (WIX)

To setup automated screen tracking with react-native-navigation, add following code to your mainfile (index.js).

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