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 NavigationContainer component which the library exposes provides access to the current navigation state when a screen changes, allowing you to use the logEvent method the Analytics library provides:

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

const App = () => {
  const routeNameRef = React.useRef();
  const navigationRef = React.useRef();
  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.current.getCurrentRoute().name;
      }}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          await logEvent(getAnalytics(), 'screen_view', {
            screen_name: currentRouteName,
            screen_class: currentRouteName,
          });
        }
        routeNameRef.current = currentRouteName;
      }}
    >
      ...
    </NavigationContainer>
  );
};

export default App;

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 logEvent method the Analytics library provides:

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

Navigation.events().registerComponentDidAppearListener(async ({ componentName, componentType }) => {
  if (componentType === 'Component') {
    await logEvent(getAnalytics(), 'screen_view', {
      screen_name: componentName,
      screen_class: componentName,
    });
  }
});

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