onContentSizeChange

This commit is contained in:
Dan Abramov
2023-12-22 20:12:10 +00:00
parent 7ec80fbd8f
commit 57782eb54d
+24 -1
View File
@@ -34,7 +34,8 @@ function ListImpl<ItemT>(
onEndReached, onEndReached,
onEndReachedThreshold = 0, onEndReachedThreshold = 0,
onRefresh: _unsupportedOnRefresh, onRefresh: _unsupportedOnRefresh,
onScrolledDownChange, // TODO onScrolledDownChange,
onContentSizeChange,
renderItem, renderItem,
extraData, extraData,
style, style,
@@ -137,6 +138,9 @@ function ListImpl<ItemT>(
} }
} }
const containerRef = useRef(null)
useResizeObserver(containerRef, onContentSizeChange)
return ( return (
<View {...props} style={style} ref={nativeRef}> <View {...props} style={style} ref={nativeRef}>
<Visibility <Visibility
@@ -144,6 +148,7 @@ function ListImpl<ItemT>(
style={styles.parentTreeVisibilityDetector} style={styles.parentTreeVisibilityDetector}
/> />
<View <View
ref={containerRef}
style={[ style={[
styles.contentContainer, styles.contentContainer,
contentContainerStyle, 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>({ let Row = function RowImpl<ItemT>({
item, item,
index, index,