Screen Tracking

Setup Firebase Analytics to track your in-app screen flow.

Standard React Native applications run inside a single Activity/ViewController, meaning any screen changes won't be tracked by the native Firebase SDKs. There are a number of ways to implement navigation within React Native apps, therefore there is no "one fits all" solution to screen tracking.

React Navigation

The React Navigation library allows for various navigation techniques such as Stack, Tab, Native or even custom navigation. The NavigationController component which the library exposes provides access to the current navigation state when a screen changes, allowing you to use the setCurrentScreen method the Analytics library provides:

import analytics from '@react-native-firebase/analytics';
import { NavigationContainer } from '@react-navigation/native';

<NavigationContainer
  ref={navigationRef}
  onStateChange={state => {
    const previousRouteName = routeNameRef.current;
    const currentRouteName = getActiveRouteName(state);

    if (previousRouteName !== currentRouteName) {
      analytics().setCurrentScreen(currentRouteName, currentRouteName);
    }

For a full working example, view the Screen tracking for analytics documentation on the React Navigation website.

React Native Navigation

The wix/react-native-navigation provides 100% native platform navigation for React Native apps. To manually track screens, you need to setup a componentDidAppear event listener and manually call the setCurrentScreen method the Analytics library provides:

import analytics from '@react-native-firebase/analytics';
import { Navigation } from 'react-native-navigation';

Navigation.events().registerComponentDidAppearListener(({ componentName, componentType }) => {
  if (componentType === 'Component') {
    analytics().setCurrentScreen(componentName, componentName);
  }
});

To learn more, view the events documentation on the React Native Navigation website.