FlatList pagingEnabled don't work all the time on Android

🐛 Bug Report

So i have an horizontal flatlist where each items use the entire width of the screen. I can swipe between the items. When i do a normal swipe, it works perfectly, the previous item slides out while the next slides in, just as expected The issue is, when i’m dragging the item and leaving the items in a state where both items are visible, the items neither go back to previous item nor to the next and just stuck in between. The pagingEnabled doesn’t work and my screen is stuck in between 2 items.

Expected Behavior

when the dragging is stopped and the user has no longer touching the screen, depends on the viewAreaCoveragePercentThreshold that has been declared or by default 50% for example: if viewAreaCoveragePercentThreshold = 50 then if 50% or more of the next item is visible it should animate to the next item otherwise to the previous item

Code Example

<FlatList
   viewabilityConfig={this.viewabilityConfig}
   ref={(flatList) => (this.flatList = flatList)}
   getItemLayout={(data, index) => ({
   	length : this.state.width,
   	offset : this.state.width * index,
   	index
   })}
   onLayout={this.onLayout}
   data={this.props.data}
   renderItem={this.renderItem}
   keyExtractor={this.keyExtractor}
   horizontal
   pagingEnabled
/>

Environment

info React Native Environment Info: System: OS: Windows 10 CPU: (4) x64 Intel® Core™ i5-3230M CPU @ 2.60GHz Memory: 2.97 GB / 7.85 GB Binaries: npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5264788

“dependencies”: { “react”: “16.8.3”, “react-native”: “0.59.3” }

[gongdao123]

Same thing happens to me too.

I can confirm that this only happens on Android.

And if I put tracking code like following:

    <FlatList
        {...this.props}
        ref={this.handleInfListRef}
        data={data}
        getItemLayout={getItemLayout}
        initialScrollIndex={initialScrollIndex}
        pagingEnabled
        renderItem={renderItem}
        onScroll={this.onScroll}
        onTouchStart={() => console.log('onTouchStart')}
        onTouchMove={() => console.log('onTouchMove')}
        onTouchEnd={() => console.log('onTouchEnd')}
        onScrollBeginDrag={() => console.log('onScrollBeginDrag')}
        onScrollEndDrag={() => console.log('onScrollEndDrag')}
        onMomentumScrollBegin={() => console.log('onMomentumScrollBegin')}
        onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}
        showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
      />

In normal case (move finger quickly), when I stop dragging the event fires in this order:

onTouchEnd
onScrollEndDrag
onMomentumScrollEnd

But when I move finger slowly only onTouchEnd will be triggered.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.