docs: update Screen Tracking example to remove expo-firebase-analytics (react-navigation#1183)

* docs: update Screen Tracking example to be generic

* Add mock implementation of tracker

* Apply feedback

* Update screen-tracking.md

Author: amandeepmittal

static/examples/5.x/screen-tracking-for-analytics.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { View, Button } from 'react-native';
-// import * as Analytics from 'expo-firebase-analytics';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
@@ -32,20 +31,19 @@ export default function App() {
   return (
     <NavigationContainer
       ref={navigationRef}
-      onReady={() => routeNameRef.current = navigationRef.current.getCurrentRoute().name}
+      onReady={() =>
+        (routeNameRef.current = navigationRef.current.getCurrentRoute().name)
+      }
       onStateChange={() => {
         const previousRouteName = routeNameRef.current;
-        const currentRouteName = navigationRef.current.getCurrentRoute().name
+        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
-          // Analytics.setCurrentScreen(currentRouteName, currentRouteName);
+          // Replace the line below to add the tracker from a mobile analytics SDK
           alert(`The route changed to ${currentRouteName}`);
         }
 
-        // Save the current route name for later comparision
+        // Save the current route name for later comparison
         routeNameRef.current = currentRouteName;
       }}
     >

static/examples/6.x/screen-tracking-for-analytics.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { View, Button } from 'react-native';
-// import * as Analytics from 'expo-firebase-analytics';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
@@ -40,14 +39,11 @@ export default function App() {
         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
-          // Analytics.setCurrentScreen(currentRouteName, currentRouteName);
+          // Replace the line below to add the tracker from a mobile analytics SDK
           alert(`The route changed to ${currentRouteName}`);
         }
 
-        // Save the current route name for later comparision
+        // Save the current route name for later comparison
         routeNameRef.current = currentRouteName;
       }}
     >

versioned_docs/version-5.x/screen-tracking.md

@@ -13,12 +13,11 @@ To get notified of state changes, we can use the `onStateChange` prop on `Naviga
 
 ## Example
 
-This example shows how to do screen tracking and send to Firebase Analytics using [expo-firebase-analytics](https://docs.expo.io/versions/latest/sdk/firebase-analytics/). The approach can be adapted to any other analytics SDK.
+This example shows how the approach can be adapted to any mobile analytics SDK.
 
- <samp id="screen-tracking-for-analytics" />
+<samp id="screen-tracking-for-analytics" />
 
 ```js
-import * as Analytics from 'expo-firebase-analytics';
 import { useRef } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 
@@ -35,12 +34,13 @@ export default () => {
       onStateChange={async () => {
         const previousRouteName = routeNameRef.current;
         const currentRouteName = navigationRef.current.getCurrentRoute().name;
+        const trackScreenView = () => {
+          // Your implementation of analytics goes here!
+        };
 
         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.setCurrentScreen(currentRouteName);
+          // Replace the line below to add the tracker from a mobile analytics SDK
+          await trackScreenView(currentRouteName);
         }
 
         // Save the current route name for later comparison
@@ -51,5 +51,4 @@ export default () => {
     </NavigationContainer>
   );
 };
-
 ```

versioned_docs/version-6.x/screen-tracking.md

@@ -13,12 +13,11 @@ To get notified of state changes, we can use the `onStateChange` prop on `Naviga
 
 ## Example
 
-This example shows how to do screen tracking and send to Firebase Analytics using [expo-firebase-analytics](https://docs.expo.io/versions/latest/sdk/firebase-analytics/). The approach can be adapted to any other analytics SDK.
+This example shows how the approach can be adapted to any mobile analytics SDK.
 
- <samp id="screen-tracking-for-analytics" />
+<samp id="screen-tracking-for-analytics" />
 
 ```js
-import * as Analytics from 'expo-firebase-analytics';
 import {
   NavigationContainer,
   useNavigationContainerRef,
@@ -37,15 +36,16 @@ export default () => {
       onStateChange={async () => {
         const previousRouteName = routeNameRef.current;
         const currentRouteName = navigationRef.getCurrentRoute().name;
+        const trackScreenView = () => {
+          // Your implementation of analytics goes here!
+        };
 
         if (previousRouteName !== currentRouteName) {
           // Save the current route name for later comparison
           routeNameRef.current = 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.setCurrentScreen(currentRouteName);
+          // Replace the line below to add the tracker from a mobile analytics SDK
+          await trackScreenView(currentRouteName);
         }
       }}
     >