2 files changed, 29 insertions, 6 deletions
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;
+};