React-native: [FlatList]When use getItemLayout, onScrollBeginDrag and onScrollEndDrag not trigger on Android

[syq7970]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
Memory: 1.25 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.11.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 21, 25, 26, 27, 28
Build Tools: 25.0.1, 25.0.2, 25.0.3, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-26 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.4 => 0.57.4
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

When use getItemLayout, onScrollBeginDrag and onScrollEndDrag not trigger on Android

Reproducible Demo

https://snack.expo.io/@syqqq7970/ZmxhdG

[bartolkaruza]

From some quick testing, it looks like the scroll speed at which point the drag events are triggered is higher for the getItemLayout case, compared to the case without it. pagingEnabled is not related as both with and without it, the scroll speed seems to have the same threshold for sending drag begin/end events.

After some more digging, it is caused by the <View /> containing your text 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 background color to the wrapping view and now all events are firing as expected:

https://snack.expo.io/@bartolkaruza/flatlist-bug

@kelset close :)

[syq7970]

@bartolkaruza thanks!

[othorin]

Thank you for that wonderful answer. Transparent background solved my issue as well!