One of the optimizations for FlatList/SectionList is to use the getItemLayout
but with varying content this becomes difficult to compute a priori. However, I was wondering can we at least capture the onLayout
event when the item is rendered and put it in a useRef<{length:number, offset:number, index:number}[]>
I think FlatList won't be as hard, but SectionList would be difficulty knowing what section is presently being rendered.
So if I look at FlatList I was thinking about something like this for FlatList
const layouts = useRef<{length:number, offset:number, index:number}[]>([]);const onLayoutFor = useCallback((index:number)=>{return ({nativeEvent}) => { layouts[index] = { index, offset: y, length: height }};},[data]);const renderItem = useCallback(({item, data, index}) => (<View onLayout={onLayoutFor(index)}>...</View>));const getItemLayout = useCallback((data, index) => layout[index], [data]);return <FlatList data={data} renderItem={renderItem} getItemLayout={getItemLayout } />
For section list I am not quite sure anymore.