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-storageWe 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-installPlease 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 dashboardUsage 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);
}
}
);