Fixed #22

src/components/Timeline.tsx

@@ -52,6 +52,7 @@ const Timeline: React.FC<Props> = ({
     ...(toot && { toot }),
     ...(account && { account })
   }
+
   const queryKey: QueryKeyTimeline = ['Timeline', queryKeyParams]
   const {
     status,
@@ -73,8 +74,9 @@ const Timeline: React.FC<Props> = ({
         firstPage.links?.prev && {
           min_id: firstPage.links.prev,
           // https://github.com/facebook/react-native/issues/25239#issuecomment-731100372
-          limit: '3'
+          limit: '8'
         },
+
       getNextPageParam: lastPage =>
         lastPage.links?.next && { max_id: lastPage.links.next }
     }
@@ -82,6 +84,7 @@ const Timeline: React.FC<Props> = ({
 
   const flattenData = data?.pages ? data.pages.flatMap(d => [...d.body]) : []
 
+  // Toot page auto scroll to selected toot
   const flRef = useRef<FlatList<any>>(null)
   const scrolled = useRef(false)
   useEffect(() => {
@@ -96,6 +99,15 @@ const Timeline: React.FC<Props> = ({
       }, 500)
     }
   }, [isSuccess, flattenData.length, scrolled])
+  const onScrollToIndexFailed = useCallback(error => {
+    const offset = error.averageItemLength * error.index
+    flRef.current?.scrollToOffset({ offset })
+    setTimeout(
+      () =>
+        flRef.current?.scrollToIndex({ index: error.index, viewOffset: 100 }),
+      350
+    )
+  }, [])
 
   const keyExtractor = useCallback(({ id }) => id, [])
   const renderItem = useCallback(
@@ -115,6 +127,7 @@ const Timeline: React.FC<Props> = ({
               item={item}
               queryKey={queryKey}
               {...(toot === item.id && { highlighted: true })}
+              // @ts-ignore
               {...(data?.pages[0].pinned && { pinned: data?.pages[0].pinned })}
             />
           )
@@ -148,28 +161,37 @@ const Timeline: React.FC<Props> = ({
     [hasNextPage]
   )
 
-  const onScrollToIndexFailed = useCallback(error => {
-    const offset = error.averageItemLength * error.index
-    flRef.current?.scrollToOffset({ offset })
-    setTimeout(
-      () =>
-        flRef.current?.scrollToIndex({ index: error.index, viewOffset: 100 }),
-      350
-    )
-  }, [])
-
   useScrollToTop(flRef)
   const queryClient = useQueryClient()
   const scrollY = useSharedValue(0)
-  const [isFetchingLatest, setIsFetchingLatest] = useState(false)
+  const [isFetchingLatest, setIsFetchingLatest] = useState(0)
   useEffect(() => {
     // https://github.com/facebook/react-native/issues/25239#issuecomment-731100372
-    if (isFetchingLatest) {
+    if (isFetchingLatest !== 0) {
       if (!isFetchingPreviousPage) {
         fetchPreviousPage()
+        setIsFetchingLatest(isFetchingLatest + 1)
+      } else {
+        if (isFetchingLatest === 8) {
+          setIsFetchingLatest(0)
+          if (data?.pages[0].body.length === 0) {
+            queryClient.setQueryData<InfiniteData<any> | undefined>(
+              queryKey,
+              data => {
+                if (data?.pages[0].body.length === 0) {
+                  return {
+                    pages: data.pages.slice(1),
+                    pageParams: data.pageParams.slice(1)
+                  }
+                } else {
+                  return data
+                }
+              }
+            )
+          }
         } else {
           if (data?.pages[0].body.length === 0) {
-          setIsFetchingLatest(false)
+            setIsFetchingLatest(0)
             queryClient.setQueryData<InfiniteData<any> | undefined>(
               queryKey,
               data => {
@@ -186,6 +208,7 @@ const Timeline: React.FC<Props> = ({
           }
         }
       }
+    }
   }, [isFetchingPreviousPage, isFetchingLatest, data?.pages[0].body])
   const onScroll = useCallback(({ nativeEvent }) => {
     scrollY.value = nativeEvent.contentOffset.y
@@ -193,11 +216,11 @@ const Timeline: React.FC<Props> = ({
   const onResponderRelease = useCallback(() => {
     if (
       scrollY.value <= -StyleConstants.Spacing.XL &&
-      !isFetchingLatest &&
+      isFetchingLatest === 0 &&
       !disableRefresh
     ) {
       haptics('Light')
-      setIsFetchingLatest(true)
+      setIsFetchingLatest(1)
       flRef.current?.scrollToOffset({
         animated: true,
         offset: 1
@@ -205,7 +228,7 @@ const Timeline: React.FC<Props> = ({
     }
   }, [scrollY.value, isFetchingLatest, disableRefresh])
   const headerPadding = useAnimatedStyle(() => {
-    if (isFetchingLatest) {
+    if (isFetchingLatest !== 0) {
       return { paddingTop: withTiming(StyleConstants.Spacing.XL) }
     } else {
       return { paddingTop: withTiming(0) }

src/screens/Compose/EditAttachment.tsx

@@ -35,8 +35,8 @@ const ComposeEditAttachment: React.FC<ScreenComposeEditAttachmentProp> = ({
     theAttachment.description
   )
   const focus = useSharedValue({
-    x: theAttachment.meta.focus.x,
-    y: theAttachment.meta.focus.y
+    x: theAttachment.meta?.focus?.x,
+    y: theAttachment.meta?.focus?.y
   })
 
   useEffect(() => {

src/utils/queryHooks/timeline.ts

@@ -379,7 +379,7 @@ const useTimelineMutation = ({
       ? { onSuccess }
       : onSuccess
       ? {
-          onSuccess: (data, params) => {
+          onSuccess: ({ body }, params) => {
             queryClient.cancelQueries(params.queryKey)
 
             haptics('Success')
@@ -387,7 +387,7 @@ const useTimelineMutation = ({
               case 'updateStatusProperty':
                 switch (params.payload.property) {
                   case 'poll':
-                    params.payload.data = (data as unknown) as Mastodon.Poll
+                    params.payload.data = (body as unknown) as Mastodon.Poll
                     updateStatusProperty({ queryClient, ...params })
                     break
                 }