MVP last read position

src/components/Timeline.tsx

@@ -1,7 +1,10 @@
 import ComponentSeparator from '@components/Separator'
 import { useScrollToTop } from '@react-navigation/native'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
-import { getInstanceActive } from '@utils/slices/instancesSlice'
+import {
+  getInstanceActive,
+  updateInstanceTimelineLookback
+} from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { RefObject, useCallback, useRef } from 'react'
@@ -10,13 +13,14 @@ import {
   FlatListProps,
   Platform,
   RefreshControl,
-  StyleSheet
+  StyleSheet,
+  ViewabilityConfigCallbackPairs
 } from 'react-native'
 import Animated, {
   useAnimatedScrollHandler,
   useSharedValue
 } from 'react-native-reanimated'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import TimelineEmpty from './Timeline/Empty'
 import TimelineFooter from './Timeline/Footer'
 import TimelineRefresh, {
@@ -31,6 +35,7 @@ export interface Props {
   queryKey: QueryKeyTimeline
   disableRefresh?: boolean
   disableInfinity?: boolean
+  lookback?: Extract<App.Pages, 'Following' | 'Local' | 'LocalPublic'>
   customProps: Partial<FlatListProps<any>> &
     Pick<FlatListProps<any>, 'renderItem'>
 }
@@ -40,6 +45,7 @@ const Timeline: React.FC<Props> = ({
   queryKey,
   disableRefresh = false,
   disableInfinity = false,
+  lookback,
   customProps
 }) => {
   // Switching account update timeline
@@ -124,6 +130,27 @@ const Timeline: React.FC<Props> = ({
     }
   })
 
+  const dispatch = useDispatch()
+  const viewabilityPairs = useRef<ViewabilityConfigCallbackPairs>([
+    {
+      viewabilityConfig: {
+        minimumViewTime: 10,
+        viewAreaCoveragePercentThreshold: 10
+      },
+      onViewableItemsChanged: ({ viewableItems }) => {
+        lookback &&
+          dispatch(
+            updateInstanceTimelineLookback({
+              [lookback]: {
+                queryKey,
+                ids: viewableItems.map(item => item.key).slice(0, 3)
+              }
+            })
+          )
+      }
+    }
+  ])
+
   useScrollToTop(flRef)
   return (
     <>
@@ -157,6 +184,9 @@ const Timeline: React.FC<Props> = ({
         maintainVisibleContentPosition={{
           minIndexForVisible: 0
         }}
+        {...(lookback && {
+          viewabilityConfigCallbackPairs: viewabilityPairs.current
+        })}
         {...androidRefreshControl}
         {...customProps}
       />

src/components/Timeline/Lookback.tsx

@@ -0,0 +1,37 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+
+const TimelineLookback = React.memo(
+  () => {
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
+
+    return (
+      <View style={[styles.base, { backgroundColor: theme.backgroundDefault }]}>
+        <Text
+          style={[StyleConstants.FontStyle.S, { color: theme.primaryDefault }]}
+        >
+          {t('lookback.message')}
+        </Text>
+      </View>
+    )
+  },
+  () => true
+)
+
+const styles = StyleSheet.create({
+  base: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: StyleConstants.Spacing.S
+  },
+  text: {
+    ...StyleConstants.FontStyle.S
+  }
+})
+
+export default TimelineLookback

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -60,11 +60,9 @@ const AttachmentVideo: React.FC<Props> = ({
 
   const appState = useRef(AppState.currentState)
   useEffect(() => {
-    AppState.addEventListener('change', _handleAppStateChange)
+    const appState = AppState.addEventListener('change', _handleAppStateChange)
 
-    return () => {
-      AppState.removeEventListener('change', _handleAppStateChange)
-    }
+    return () => appState.remove()
   }, [])
   const _handleAppStateChange = async (nextAppState: AppStateStatus) => {
     if (appState.current.match(/active/) && nextAppState.match(/inactive/)) {