Building the infinite list with items based on VirtualizedList components and have one issue with that. When user scrolls down I'm removing top items what are not viewable(visible), in this moment scroll randomly changes position, as a result user can't see exactly item he/she scrolled to before item(s) was removed.
What properties or methods I could use to get user stays on the same scroll position until he/she keep scrolling manually ?
My list code:
<VirtualizedList
ref={ref => { this.listRef = ref }}
initialNumToRender={2}
viewabilityConfig={this.viewabilityConfig}
onViewableItemsChanged={this.onViewableItemsChanged}
getItemCount={this.getItemCount}
bounces={true}
getItem={(data, index) => {
return data[index]
}}
data={list || []}
scrollEnabled={true}
onScroll={({ nativeEvent: { contentOffset } }) => {
console.log('contentOffset.y=====', contentOffset.y)
this.setState({
currentOffset: contentOffset.y
})
}}
onContentSizeChange={(w, h) => {
console.log('w=====', w)
console.log('h=====', h)
}}
keyExtractor={(item, idx) => `${idx}`}
getItemLayout={(data, index) => ({
length: ITEM_HEIGHT + size(24),
offset: (ITEM_HEIGHT + size(24)) * index,
index
})}
renderItem={({ item, index }) => (
<View style={{ height: ITEM_HEIGHT, marginBottom: size(24) }}>
<Item item={item} />
</View>)}
initialScrollIndex={0}
scrollsToTop={false}
onEndReached={fetch}
onEndReachedThreshold={2}
ListFooterComponent={<ListEnd loading={loading} />}
/>
I'm items removing on onViewableItemsChanged:
onViewableItemsChanged = async ({ viewableItems }) => {
const { removeToIndex } = this.props
if (viewableItems.length) {
const { index } = viewableItems[0]
if (index) {
await removeToIndex(index - 1)
// this.listRef.scrollToOffset({ offset: this.state.currentOffset, animated: false })
}
}
};
removeToIndex removes all elements till index and updates state variable with list.
When fetch happens it adds 2 new items to the end of list.
Faced the same with FlatList
I tried to disable scroll when waited for items removing, but it wasn't helpful. Could u recommend something to try ?
Or maybe there's other option, if I could disable scroll for user after some offset, to hide items he/she shouldn't be able to see.
RN version: 0.63.2