Merge pull request #366 from IvanIFChen/tma778-add-analytics

[TMA-778] Add Analytics

5 files changed, 43 insertions, 6 deletions

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index a8cadf22..961d650a 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -402,6 +402,10 @@ PODS:
     - React
   - RNDeviceInfo (7.4.0):
     - React-Core
+  - RNFBAnalytics (11.2.0):
+    - Firebase/Analytics (~> 7.6.0)
+    - React-Core
+    - RNFBApp
   - RNFBApp (10.8.1):
     - Firebase/CoreOnly (~> 7.6.0)
     - React-Core
@@ -530,6 +534,7 @@ DEPENDENCIES:
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
+  - "RNFBAnalytics (from `../node_modules/@react-native-firebase/analytics`)"
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNFS (from `../node_modules/react-native-fs`)
@@ -651,6 +656,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/masked-view"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
+  RNFBAnalytics:
+    :path: "../node_modules/@react-native-firebase/analytics"
   RNFBApp:
     :path: "../node_modules/@react-native-firebase/app"
   RNFBMessaging:
@@ -741,6 +748,7 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNDeviceInfo: 9538a884f862fe4aa0d7cead9f34e292d41ba8f6
+  RNFBAnalytics: 4b0a503b1c3b4c8175ca444e10fc12b9df6fd946
   RNFBApp: 02bde3edecf2e9694b908a5d3504e03449980f20
   RNFBMessaging: 1823217d31e942531cc3f51fb5367dcbc69c1e10
   RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
diff --git a/package.json b/package.json
index 658ed62c..07407eff 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@react-native-community/cameraroll": "^4.0.4",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/netinfo": "^6.0.0",
+    "@react-native-firebase/analytics": "^11.2.0",
     "@react-native-firebase/app": "^10.0.0",
     "@react-native-firebase/messaging": "^10.0.0",
     "@react-navigation/bottom-tabs": "^5.7.2",
diff --git a/src/App.tsx b/src/App.tsx
index 8d823e1f..64f40bae 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,11 @@
+import analytics from '@react-native-firebase/analytics';
 import {NavigationContainer} from '@react-navigation/native';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {Provider} from 'react-redux';
 import {StreamChat} from 'stream-chat';
 import {OverlayProvider} from 'stream-chat-react-native';
 import {STREAM_CHAT_API} from './constants';
+import {getActiveRouteName} from './RootNavigation';
 import {navigationRef} from './RootNavigation';
 import Routes from './routes';
 import store from './store/configureStore';
@@ -23,6 +25,7 @@ import {isIPhoneX} from './utils';
 export const ChatContext = React.createContext({} as ChatContextType);
 
 const App = () => {
+  const routeNameRef = useRef();
   const [channel, setChannel] = useState<ChannelGroupedType>();
   const chatClient = StreamChat.getInstance<
     LocalAttachmentType,
@@ -34,11 +37,20 @@ const App = () => {
     LocalUserType
   >(STREAM_CHAT_API);
   return (
-    /**
-     * This is the provider from the redux store, it acts as the root provider for our application
-     */
     <Provider store={store}>
-      <NavigationContainer ref={navigationRef}>
+      <NavigationContainer
+        ref={navigationRef}
+        onStateChange={async (state) => {
+          const previousRouteName = routeNameRef.current;
+          const currentRouteName = getActiveRouteName(state);
+          if (previousRouteName !== currentRouteName) {
+            await analytics().logScreenView({
+              screen_name: currentRouteName,
+              screen_class: currentRouteName,
+            });
+          }
+          routeNameRef.current = currentRouteName;
+        }}>
         <OverlayProvider bottomInset={isIPhoneX() ? 80 : 50}>
           <ChatContext.Provider value={{channel, setChannel, chatClient}}>
             <Routes />
diff --git a/src/RootNavigation.ts b/src/RootNavigation.ts
index 827177a3..56ccfca4 100644
--- a/src/RootNavigation.ts
+++ b/src/RootNavigation.ts
@@ -1,5 +1,5 @@
 import {NavigationContainerRef} from '@react-navigation/native';
-import * as React from 'react';
+import React from 'react';
 
 export const navigationRef: React.RefObject<NavigationContainerRef> = React.createRef();
 
@@ -13,3 +13,14 @@ export function navigate(name: string) {
     // Ignore this, or add these actions to a queue you can call later
   }
 }
+
+export const getActiveRouteName = (state) => {
+  const route = state.routes[state?.index || 0];
+
+  if (route.state) {
+    // Dive into nested navigators
+    return getActiveRouteName(route.state);
+  }
+
+  return route.name;
+};
diff --git a/yarn.lock b/yarn.lock
index 2e9f711a..ce906f2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1039,6 +1039,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-6.0.0.tgz#2a4d7190b508dd0c2293656c9c1aa068f6f60a71"
   integrity sha512-Z9M8VGcF2IZVOo2x+oUStvpCW/8HjIRi4+iQCu5n+PhC7OqCQX58KYAzdBr///alIfRXiu6oMb+lK+rXQH1FvQ==
 
+"@react-native-firebase/analytics@^11.2.0":
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/@react-native-firebase/analytics/-/analytics-11.2.0.tgz#f94dd039539a41507e222d5deb4777934c0b0305"
+  integrity sha512-/vCywT0i+E2xPLq5LADcYF07f1yn52zRBIbiR3W54837Izx/7ns3Sg6AXIz1CEUf1nrUmZqTLK6QAGrZZDwPLg==
+
 "@react-native-firebase/app@^10.0.0":
   version "10.8.1"
   resolved "https://registry.yarnpkg.com/@react-native-firebase/app/-/app-10.8.1.tgz#3455f491a5fc3d91677fd69e70b006a68fb7ca5c"