From 576cef88b550bacba26988a53c28fcc31bc9f8c5 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Wed, 31 Jul 2024 19:10:24 +0100
Subject: [PATCH] [Web] Retrigger onEndReached if needed when content height
 changes (#4859)

* Extract EdgeVisibility

* Key Visibility by container height instead of item count
---
 src/view/com/util/List.web.tsx | 35 +++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
index 12d223db..5aa69935 100644
--- a/src/view/com/util/List.web.tsx
+++ b/src/view/com/util/List.web.tsx
@@ -344,10 +344,11 @@ function ListImpl<ItemT>(
           style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
         />
         {onStartReached && !isEmpty && (
-          <Visibility
+          <EdgeVisibility
             root={disableFullWindowScroll ? nativeRef : null}
             onVisibleChange={onHeadVisibilityChange}
             topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
+            containerRef={containerRef}
           />
         )}
         {headerComponent}
@@ -368,11 +369,11 @@ function ListImpl<ItemT>(
               )
             })}
         {onEndReached && !isEmpty && (
-          <Visibility
+          <EdgeVisibility
             root={disableFullWindowScroll ? nativeRef : null}
             onVisibleChange={onTailVisibilityChange}
             bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
-            key={data?.length}
+            containerRef={containerRef}
           />
         )}
         {footerComponent}
@@ -381,6 +382,34 @@ function ListImpl<ItemT>(
   )
 }
 
+function EdgeVisibility({
+  root,
+  topMargin,
+  bottomMargin,
+  containerRef,
+  onVisibleChange,
+}: {
+  root?: React.RefObject<HTMLDivElement> | null
+  topMargin?: string
+  bottomMargin?: string
+  containerRef: React.RefObject<Element>
+  onVisibleChange: (isVisible: boolean) => void
+}) {
+  const [containerHeight, setContainerHeight] = React.useState(0)
+  useResizeObserver(containerRef, (w, h) => {
+    setContainerHeight(h)
+  })
+  return (
+    <Visibility
+      key={containerHeight}
+      root={root}
+      topMargin={topMargin}
+      bottomMargin={bottomMargin}
+      onVisibleChange={onVisibleChange}
+    />
+  )
+}
+
 function useResizeObserver(
   ref: React.RefObject<Element>,
   onResize: undefined | ((w: number, h: number) => void),