I trying to create video feed screen when user can view the video one by one to swipe the flatlist.
I have used all the Flatlist properties which restrict the fast swiping like,
disableIntervalMomentum={true}
decelerationRate={0.8}
pagingEnabled
But the still user can swipe too many item if they swipe flatlist too fast.
And as I am using video on every item so I have used initialNumToRender is 3. To load video at a time.
Now I am trying to disable user intraction for one second if user swiped one page, it works if I wait for some milliseconds, if I quickly touch to flatlist for swiping then still it swipe to next index where blank screen may appear as I have used initialNumToRender 3.
Please help me I have stuck from last couple of days.
Here is the code for flatlist I am using.
return (
<View style={{ flex: 1 }}
pointerEvents={enableIntraction?'auto':'none'}
>
<FlatList
ref={flatListRef}
data={activities}
style={{ flex: 1 }}
horizontal
extraData={inViewPort}
initialScrollIndex={initialIndex}
initialNumToRender={3}
maxToRenderPerBatch={3}
windowSize={5}
removeClippedSubviews={true}
onEndReachedThreshold={0.1}
renderItem={renderItem}
keyExtractor={(item, index) => item._id + index.toString()}
snapToAlignment="start"
disableIntervalMomentum={true}
decelerationRate={0.8}
snapToInterval={width}
pagingEnabled
onViewableItemsChanged={onViewableItemsChanged.current}
viewabilityConfig={viewabilityConfig.current}
getItemLayout={(data, index) => ({
length: width,
offset: width * index,
index,
})}
onScroll={(e)=>{
setImmediate(()=>{
setEnableIntraction(false)
})
setTimeout(() => {
setEnableIntraction(true)
}, 1000);
}}
onScrollToIndexFailed={info => {
setTimeout(() => {
scrollListTo(info.index, false);
}, 500);
}}
/></View>
);