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

[Android] Out-of-order event delivery

Open t0maboro opened this issue 1 month ago • 2 comments

Description

When I disable coalescing explicitly:

override fun canCoalesce(): Boolean {
    return false
}

I receive all events, but the order is incorrect. For example, the event with value 914 is emitted before 3, but is received after it:

D  emitting from native 914
D  emitting from native 3
D  emitting from native 7
D  emitting from native 11
I  Received tabBarHeight on JS side 3
D  emitting from native 15
D  emitting from native 19
I  Received tabBarHeight on JS side 914
I  Received tabBarHeight on JS side 7
I  Received tabBarHeight on JS side 11
I  Received tabBarHeight on JS side 15
I  Received tabBarHeight on JS side 19
D  emitting from native 22
I  Received tabBarHeight on JS side 22
D  emitting from native 26
D  emitting from native 30
D  emitting from native 34
I  Received tabBarHeight on JS side 26
I  Received tabBarHeight on JS side 30
I  Received tabBarHeight on JS side 34
D  emitting from native 38
I  Received tabBarHeight on JS side 38

From initial investigation, it looks like when the first event (914) is emitted, the EventEmitter is not initialized yet. As a result, this line is called:

https://github.com/facebook/react-native/blob/v0.82.0-rc.5/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java#L1113-L1114

which queues the event in enqueuePendingEvent() until the emitter becomes available.

However, when the next event (3) is emitted, the EventEmitter is already initialized, so the event is dispatched immediately using:

https://github.com/facebook/react-native/blob/v0.82.0-rc.5/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java#L1132

and eventually received before the 914 value that was pending. This results in the events arriving on JS side out-of-order. Is this behavior intended? Shouldn't we ensure that mPendingEventQueue is flushed before dispatching any event directly?

Steps to reproduce

  1. Clone the repo (use the branch from the link) https://github.com/t0maboro/Screens3184/tree/%40t0maboro/issue-2
  2. Run application on android
  3. Observe logs with tag: ReactNativeJS - I used this tag to have native logs filtered together with console.log from JS

React Native Version

0.82.1

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.6.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 101.11 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.3.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 11.4.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.09.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 36.1.0
    System Images:
      - android-25 | Google APIs ARM 64 v8a
      - android-27 | Google APIs ARM 64 v8a
      - android-28 | Google APIs ARM 64 v8a
      - android-29 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2512.13840223
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 3.4.2
    path: /Users/tomaszboron/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

D  emitting from native 914
D  emitting from native 3
D  emitting from native 7
D  emitting from native 11
I  Received tabBarHeight on JS side 3
D  emitting from native 15
D  emitting from native 19
I  Received tabBarHeight on JS side 914
I  Received tabBarHeight on JS side 7
I  Received tabBarHeight on JS side 11
I  Received tabBarHeight on JS side 15
I  Received tabBarHeight on JS side 19
D  emitting from native 22
I  Received tabBarHeight on JS side 22
D  emitting from native 26
D  emitting from native 30
D  emitting from native 34
I  Received tabBarHeight on JS side 26
I  Received tabBarHeight on JS side 30
I  Received tabBarHeight on JS side 34
D  emitting from native 38
I  Received tabBarHeight on JS side 38

MANDATORY Reproducer

https://github.com/t0maboro/Screens3184/tree/%40t0maboro/issue-2

Screenshots and Videos

No response

t0maboro avatar Nov 21 '25 17:11 t0maboro