added logic to log screen views

1 files changed, 17 insertions, 5 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 />