Used to track screen views & events of React Native & Expo Apps using Splitbee.
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.
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.
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
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); } } );