android onScrollEndDrag throttled by scrollEventThrottle

scrungrth commented 4 months ago

Description

on android, onScrollEndDrag can be prevented by a non-zero scrollEventThrottle value.

Steps to reproduce

using below code, scroll/fling with any kind of velocity and notice the onScrollEndDrag message is not logged.

repeat without flinging/no velocity (hold same scroll position for >250ms before releasing), notice the onScrollEndDrag message is logged.

<FlatList
data={[1,2,3,4]}
onScrollEndDrag={() => console.log('onScrollEndDrag')}
renderItem={() => <View style={{height: 400}} />}
scrollEventThrottle={250}
/>

React Native Version

0.73.6

Affected Platforms

Runtime - Android

Output of `npx react-native info`

info Fetching system and libraries information...
System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 264.94 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.1
    path: ~/.nvm/versions/node/v18.20.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.yarn/bin/yarn
  npm:
    version: 7.24.2
    path: ~/code/react-native-sydney-components/node_modules/.bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/AG63864/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "33"
      - "34"
    Build Tools:
      - 33.0.1
      - 34.0.0
    System Images:
      - android-34 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /Users/AG63864/.jenv/shims/javac
  Ruby:
    version: 3.1.1
    path: /Users/AG63864/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.74.0 is now available (your project is running on v0.73.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.74.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

n/a

Reproducer

https://github.com/scrungrth/android-scroll-throttle-reproducer

Screenshots and Videos

No response

github-actions[bot] commented 4 months ago

:warning:	Newer Version of React Native is Available!
:information_source:	You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

kunalchavhan commented 2 months ago

I have debugged this and here are my observations

scrollEventThrottle throttles all scroll events which includes onScroll, onScrollEndDrag, onScrollMomentumBegin, onMomentumScrollEnd etc.
For every successful event fired from one of these events a timestamp lastScrollDispatchTime is set in ReactScrollView. Before firing next event a condition is checked if scrollEventThrottle > currentTimeStamp - lastScrollDispatchTime.
Further debugging showed that most of the times onScroll event was getting fired with above condition as false and hence a lastDispatchTimestamp is set to currentTimeStamp, any event coming after this gets throttled in this case it was onScrollEndDrag

I think this behaviour is by design as per the documentation. @cortinico can clarify more on this.

scrungrth commented 2 months ago

@kunalchavhan that's some great insight;

I think this behaviour is by design as per the documentation.

It seems strange to me that one time per-scroll type of events would be throttled here though even if there was a shared event throttle.

madox2 commented 2 months ago

Same issue after upgrading from 0.72.4 -> 0.74.1

facebook / react-native