Test Firebase analytics

src/Index.tsx

@@ -5,6 +5,7 @@ import {
   NavigationContainerRef
 } from '@react-navigation/native'
 
+import * as Analytics from 'expo-firebase-analytics'
 import React, { useEffect, useRef, useState } from 'react'
 import { StatusBar } from 'react-native'
 import Toast from 'react-native-toast-message'
@@ -46,7 +47,7 @@ export interface Props {
   localCorrupt: boolean
 }
 
-export const Index: React.FC<Props> = ({ localCorrupt }) => {
+const Index: React.FC<Props> = ({ localCorrupt }) => {
   const dispatch = useDispatch()
   const localInstance = useSelector(getLocalUrl)
   const { i18n } = useTranslation()
@@ -98,14 +99,14 @@ export const Index: React.FC<Props> = ({ localCorrupt }) => {
             })
           }
         })
-        .catch(() => {})
+        .catch(() => null)
   }, [])
 
   // On launch check if there is any unread noficiations
   const queryNotification = useInfiniteQuery(
-    ['Notifications', {}] as QueryKey.Timeline,
+    ['Notifications', {}],
     timelineFetch,
-    { enabled: localInstance ? true : false, cacheTime: 1000 * 30 }
+    { enabled: localInstance ? true : false }
   )
   const prevNotification = useSelector(getLocalNotification)
   useEffect(() => {
@@ -151,6 +152,9 @@ export const Index: React.FC<Props> = ({ localCorrupt }) => {
         ref={navigationRef}
         theme={themes[mode]}
         key={i18n.language}
+        onStateChange={state => {
+          Analytics.setCurrentScreen(state?.routes[state.index].name)
+        }}
       >
         <Tab.Navigator
           initialRouteName={localInstance ? 'Screen-Local' : 'Screen-Public'}
@@ -243,3 +247,5 @@ export const Index: React.FC<Props> = ({ localCorrupt }) => {
     </>
   )
 }
+
+export default React.memo(Index, () => true)

src/components/Timelines/Timeline.tsx

@@ -11,6 +11,8 @@ import TimelineEmpty from '@components/Timelines/Timeline/Empty'
 import TimelineEnd from '@components/Timelines/Timeline/Shared/End'
 import { useScrollToTop } from '@react-navigation/native'
 import { FlatList } from 'react-native-gesture-handler'
+import { useDispatch } from 'react-redux'
+import { updateNotification } from '@root/utils/slices/instancesSlice'
 
 export type TimelineData =
   | InfiniteData<{
@@ -83,6 +85,19 @@ const Timeline: React.FC<Props> = ({
     ? data.pages.flatMap(d => [d?.pinnedLength])
     : []
 
+  // Clear unread notification badge
+  const dispatch = useDispatch()
+  useEffect(() => {
+    if (page === 'Notifications' && flattenData.length) {
+      dispatch(
+        updateNotification({
+          unread: false,
+          latestTime: flattenData[0].created_at
+        })
+      )
+    }
+  }, [flattenData])
+
   const flRef = useRef<FlatList<any>>(null)
   useEffect(() => {
     if (toot && isSuccess) {

src/screens/Notifications.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 
 import Timeline from '@components/Timelines/Timeline'
 import sharedScreens from '@screens/Shared/sharedScreens'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { RootState } from '@root/store'
 import { useTranslation } from 'react-i18next'
-import { updateNotification } from '@root/utils/slices/instancesSlice'
 
 const Stack = createNativeStackNavigator()
 
@@ -16,12 +15,6 @@ const ScreenNotifications: React.FC = () => {
     (state: RootState) => state.instances.local.url
   )
 
-  // Clear notification unread, but keep the time
-  const dispatch = useDispatch()
-  useEffect(() => {
-    dispatch(updateNotification({ unread: false }))
-  }, [])
-
   return (
     <Stack.Navigator
       screenOptions={{