Comment ajouter des analyses de suivi d'écran firebase avec React Native React Navigation lors de l'utilisation de createStackNavigator ?

Question

J'ai une application React Native et j'utilise React Navigation. J'essaie maintenant d'ajouter des analyses de suivi d'écran avec firebase.

Je suis cette documentation qui contient cet exemple de code :

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);
    }

Dans mon code, cependant, je crée ma base NavigationContainer avec une fonction comme celle-ci :

export default createStackNavigator(
  {
    Home: MainTabNavigator,
    SignIn: SignInNavigator,
  },
  {
    transitionConfig: dynamicModalTransition,
    headerMode: 'none',
    initialRouteName: 'Home',
  },
);

Quelle est la meilleure façon d'intégrer le code de l'exemple ?

Answer 1

J'utilise NavigationContainer et createStackNavigator C'est ainsi que j'ai procédé, comme dans l'exemple de suivi d'écran à la page reactnavigation.org

import * as Analytics from 'expo-firebase-analytics';
import { useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default () => {
  const navigationRef = useRef();
  const routeNameRef = 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) {
          // The line below uses the expo-firebase-analytics tracker
          // https://docs.expo.io/versions/latest/sdk/firebase-analytics/
          // Change this line to use another Mobile analytics SDK
          await analytics().logScreenView({
            screen_name: currentRouteName,
            screen_class: currentRouteName
          });
        }

        // Save the current route name for later comparison
        routeNameRef.current = currentRouteName;
      }}
    >
      {/* ... */}
    </NavigationContainer>
  );
};

Answer 2

Le problème est que vous êtes sur react-navigation v4.x.x, mais l'exemple que vous avez est pour v5.x.x.

Dans la v4, des récepteurs d'événements peuvent être ajoutés à AppContainer .

L'exemple ci-dessous concerne la version 4.

import React from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';

function getActiveRouteName(navigationState) {
    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];

    if (route.routes) {
      return getActiveRouteName(route);
    }
    return route.routeName;
}

const nav = createStackNavigator({...});

const AppContainer = createAppContainer(nav);

export default () => {
    return <AppContainer
        onNavigationStateChange={(prevState, currentState, action) => {
            const currentRouteName = getActiveRouteName(currentState);
            const previousRouteName = getActiveRouteName(prevState);

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