React Native's Onscroll, Onscrollenddrag, Onscrollbegindrag Supported On Android?

I have a few simple console.log statements in onScrollBeginDrag, onScroll, and onScrollEndDrag attached to a ScrollView. I can see that they work as expected on my iOS device, but

Solution 1:

Yes, they are supported, but they have issues...

I assume you use a <FlatList /> to render your components, correct?

If so, your issue is most probably caused by the <View /> containing your <FlatList /> items being optimized away by Android. Android automatically removes 'wrapping' views that do not actually render any content, such as a background color or borders. This optimization helps to reduce the depth of the view hierarchy but can cause unexpected results in some cases (such as this)...

I've added a transparent backgroundColor to the wrapping <View /> of the items and now the onScrollBeginDrag, onScrollEndDrag and onScroll events of the <FlatList /> are firing as expected!

<FlatList
  onScrollBeginDrag={() =>console.log('begin')}
  onScrollEndDrag={() =>console.log('end')}
  onScroll={() =>console.log('end')}
  data={[{key: 'a'}, {key: 'b'}]}

  renderItem={({ item }) => (
    <Viewstyle={{backgroundColor: 'transparent' }}><Text>{item.key}</Text></View>
  )}
/>

I also removed the FlatList paddings and I added some paddings to the wrapping view, which makes the touchable area larger.

PS: Kudos to Bartol Karuza.

Solution 2:

I am using onScrollBeginDrag in a FlatList, react-native 0.59.9, and, as you say, it does't work on an android emulator (tested on genymotion, android 7).

It does work, however, on a smartphone running android 8, so there is a way to use it...