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

import analytics 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 analytics().logScreenView({
            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 logScreenView method the Analytics library provides:

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

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

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