Flatlist scroll one item at maximum per one swipe gesture

user_7307274 0
Viewed 2536

I have FlatList element:

<FlatList
    ref={listRef}
    data={data}
    onLayout={_onLayoutDimensionsChanged}
    keyExtractor={_keyExtractor}
    renderItem={_renderItem}
    initialScrollIndex={initialScrollIndex}
    onViewableItemsChanged={onViewableItemsChanged}
    viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
    ItemSeparatorComponent={ItemSeparator}
    snapToInterval={totalItemWidth}
    decelerationRate={0.0}
    getItemLayout={(data, index) => ({
      length: totalItemWidth,
      offset: totalItemWidth * index,
      index
    })}
    initialNumToRender={2}
    showsHorizontalScrollIndicator={false}
    removeClippedSubviews
    bounces
    horizontal
  />

Where totalItemWidth is:

totalItemWidth = itemsWidth + SEPARATOR_SIZE;

I would like to achieve that swipe gesture will move one item at maximum but even with deceleration rate set to decelerationRate={0.0} my list is swiping even 2 items if I swipe with my fingers little bit faster than normal swipe's speed is.

Is there any way to prevent double-swipe there? I'm implementing Image Gallery so it is not very user-friendly when a user can swipe two photos at once.

Thank you so much!

react-native
1 Answers

Use disableIntervalMomentum={ true } in your FlatList. This will only allow the user to scroll one page at a time horizontally:

<AnimatedFlatList
                    disableIntervalMomentum={true} // use this
                    contentInset={{right: wp('20%')}}
                    showsHorizontalScrollIndicator={false}
                    ItemSeparatorComponent={separatorComponent}
                    decelerationRate={0.0}
                    snapToInterval={ITEM_SIZE}
                    horizontal={true}
                    scrollEventThrottle={1}
                    onScroll={onScrollEvent}
                    data={filteredData.filteredData}
                    renderItem={renderItem}
                    keyExtractor={keyExtractor}
                />
user_154252720
Related