From 8bfbfd2c07ebf981f19f4bc2890c8184706b7e31 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 7 Dec 2023 03:59:40 +0000
Subject: [PATCH] onEndReached

---
 src/view/com/util/Views.web.tsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 12bafdc027..a6a74890ff 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -58,6 +58,8 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     renderItem,
     style,
     contentContainerStyle,
+    onEndReached,
+    onEndReachedThreshold,
     ...props
   }: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
   ref: React.Ref<Animated.FlatList<ItemT>>,
@@ -121,11 +123,42 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
         {data.map(item => (
           <View key={keyExtractor(item)}>{renderItem({item})}</View>
         ))}
+        {onEndReached && (
+          <Tail threshold={onEndReachedThreshold} onVisible={onEndReached} />
+        )}
       </View>
     </Animated.ScrollView>
   )
 })
 
+function Tail({onVisible}) {
+  const tailRef = React.useRef(null)
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            onVisible()
+          }
+        })
+      },
+      {
+        rootMargin: '200%',
+      },
+    )
+
+    const tail = tailRef.current
+    observer.observe(tail)
+
+    return () => {
+      observer.unobserve(tail)
+    }
+  }, [onVisible])
+
+  return <div ref={tailRef} />
+}
+
 export const FlatListOld = React.forwardRef(function FlatListImpl<ItemT>(
   {
     contentContainerStyle,