How to disable Flatlist Swiping when user try to swipe page too fast

Viewed 15

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>
  );
0 Answers
Related