react-native icon indicating copy to clipboard operation
react-native copied to clipboard

android onScrollEndDrag throttled by scrollEventThrottle

Open scrungrth opened this issue 10 months ago • 4 comments

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

scrungrth avatar Apr 23 '24 17:04 scrungrth

: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.

github-actions[bot] avatar Apr 23 '24 17:04 github-actions[bot]

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.

Screenshot 2024-06-12 at 2 24 25 PM

kunalchavhan avatar Jun 12 '24 08:06 kunalchavhan

@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.

scrungrth avatar Jun 12 '24 17:06 scrungrth

Same issue after upgrading from 0.72.4 -> 0.74.1

madox2 avatar Jul 10 '24 09:07 madox2