From 57782eb54de2d982e79e686ef35aba56313b964a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 22 Dec 2023 20:12:10 +0000
Subject: [PATCH] onContentSizeChange

---
 src/view/com/util/List.web.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx
index 595a6feee4..d5e21c088e 100644
--- a/src/view/com/util/List.web.tsx
+++ b/src/view/com/util/List.web.tsx
@@ -34,7 +34,8 @@ function ListImpl<ItemT>(
     onEndReached,
     onEndReachedThreshold = 0,
     onRefresh: _unsupportedOnRefresh,
-    onScrolledDownChange, // TODO
+    onScrolledDownChange,
+    onContentSizeChange,
     renderItem,
     extraData,
     style,
@@ -137,6 +138,9 @@ function ListImpl<ItemT>(
     }
   }
 
+  const containerRef = useRef(null)
+  useResizeObserver(containerRef, onContentSizeChange)
+
   return (
     <View {...props} style={style} ref={nativeRef}>
       <Visibility
@@ -144,6 +148,7 @@ function ListImpl<ItemT>(
         style={styles.parentTreeVisibilityDetector}
       />
       <View
+        ref={containerRef}
         style={[
           styles.contentContainer,
           contentContainerStyle,
@@ -182,6 +187,24 @@ function ListImpl<ItemT>(
   )
 }
 
+function useResizeObserver(ref, onResize) {
+  const handleResize = useNonReactiveCallback(onResize ?? (() => {}))
+  const isActive = !!onResize
+  React.useEffect(() => {
+    if (!isActive) {
+      return
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize()
+    })
+    const node = ref.current
+    resizeObserver.observe(node)
+    return () => {
+      resizeObserver.unobserve(node)
+    }
+  }, [handleResize, isActive, ref])
+}
+
 let Row = function RowImpl<ItemT>({
   item,
   index,