Fix: correctly identify if the screen is focused when handling soft resets on post feeds (#2100)

src/lib/routes/helpers.ts

@@ -1,5 +1,15 @@
+import {NavigationProp} from '@react-navigation/native'
 import {State, RouteParams} from './types'
 
+export function getRootNavigation<T>(
+  nav: NavigationProp<T>,
+): NavigationProp<T> {
+  while (nav.getParent()) {
+    nav = nav.getParent()
+  }
+  return nav
+}
+
 export function getCurrentRoute(state: State) {
   let node = state.routes[state.index || 0]
   while (node.state?.routes && typeof node.state?.index === 'number') {

src/state/queries/post-feed.ts

@@ -98,7 +98,7 @@ export function usePostFeedQuery(
     staleTime: STALE.INFINITY,
     queryKey: RQKEY(feedDesc, params),
     async queryFn({pageParam}: {pageParam: RQPageParam}) {
-      logger.debug('usePostFeedQuery', {feedDesc, pageParam})
+      logger.debug('usePostFeedQuery', {feedDesc, cursor: pageParam?.cursor})
 
       const {api, cursor} = pageParam
         ? pageParam

src/view/com/feeds/FeedPage.tsx

@@ -1,8 +1,9 @@
+import React from 'react'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {useIsFocused} from '@react-navigation/native'
+import {useNavigation} from '@react-navigation/native'
 import {useAnalytics} from '@segment/analytics-react-native'
 import {useQueryClient} from '@tanstack/react-query'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
@@ -12,7 +13,6 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
 import {ComposeIcon2} from 'lib/icons'
 import {colors, s} from 'lib/styles'
-import React from 'react'
 import {FlatList, View, useWindowDimensions} from 'react-native'
 import {Feed} from '../posts/Feed'
 import {TextLink} from '../util/Link'
@@ -24,6 +24,7 @@ import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {listenSoftReset, emitSoftReset} from '#/state/events'
 import {truncateAndInvalidate} from '#/state/queries/util'
+import {TabState, getTabState, getRootNavigation} from '#/lib/routes/helpers'
 
 const POLL_FREQ = 30e3 // 30sec
 
@@ -45,6 +46,7 @@ export function FeedPage({
   const {isSandbox, hasSession} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
+  const navigation = useNavigation()
   const {isDesktop} = useWebMediaQueries()
   const queryClient = useQueryClient()
   const {openComposer} = useComposerControls()
@@ -52,7 +54,6 @@ export function FeedPage({
   const {screen, track} = useAnalytics()
   const headerOffset = useHeaderOffset()
   const scrollElRef = React.useRef<FlatList>(null)
-  const isScreenFocused = useIsFocused()
   const [hasNew, setHasNew] = React.useState(false)
 
   const scrollToTop = React.useCallback(() => {
@@ -61,21 +62,24 @@ export function FeedPage({
   }, [headerOffset, resetMainScroll])
 
   const onSoftReset = React.useCallback(() => {
-    if (isPageFocused) {
+    const isScreenFocused =
+      getTabState(getRootNavigation(navigation).getState(), 'Home') ===
+      TabState.InsideAtRoot
+    if (isScreenFocused && isPageFocused) {
       scrollToTop()
       truncateAndInvalidate(queryClient, FEED_RQKEY(feed))
       setHasNew(false)
     }
-  }, [isPageFocused, scrollToTop, queryClient, feed, setHasNew])
+  }, [navigation, isPageFocused, scrollToTop, queryClient, feed, setHasNew])
 
   // fires when page within screen is activated/deactivated
   React.useEffect(() => {
-    if (!isPageFocused || !isScreenFocused) {
+    if (!isPageFocused) {
       return
     }
     screen('Feed')
     return listenSoftReset(onSoftReset)
-  }, [onSoftReset, screen, isPageFocused, isScreenFocused])
+  }, [onSoftReset, screen, isPageFocused])
 
   const onPressCompose = React.useCallback(() => {
     track('HomeScreen:PressCompose')

src/view/screens/Home.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {View, ActivityIndicator, StyleSheet} from 'react-native'
-import {useFocusEffect, useIsFocused} from '@react-navigation/native'
+import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types'
 import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed'
 import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
@@ -65,7 +65,6 @@ function HomeScreenReady({
   const {hasSession} = useSession()
   const setMinimalShellMode = useSetMinimalShellMode()
   const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
-  const isPageFocused = useIsFocused()
   const [selectedPage, setSelectedPage] = React.useState<string>(initialPage)
 
   /**
@@ -175,7 +174,7 @@ function HomeScreenReady({
       <FeedPage
         key="1"
         testID="followingFeedPage"
-        isPageFocused={selectedPageIndex === 0 && isPageFocused}
+        isPageFocused={selectedPageIndex === 0}
         feed={homeFeedParams.mergeFeedEnabled ? 'home' : 'following'}
         feedParams={homeFeedParams}
         renderEmptyState={renderFollowingEmptyState}
@@ -186,7 +185,7 @@ function HomeScreenReady({
           <FeedPage
             key={f}
             testID="customFeedPage"
-            isPageFocused={selectedPageIndex === 1 + index && isPageFocused}
+            isPageFocused={selectedPageIndex === 1 + index}
             feed={f}
             renderEmptyState={renderCustomFeedEmptyState}
           />
@@ -202,7 +201,7 @@ function HomeScreenReady({
       tabBarPosition="top">
       <FeedPage
         testID="customFeedPage"
-        isPageFocused={isPageFocused}
+        isPageFocused={true}
         feed={`feedgen|at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot`}
         renderEmptyState={renderCustomFeedEmptyState}
       />