[Android] SectionList stickySectionHeadersEnabled not working correctly in New Architecture when using Animated

[giovanni-caiazzo]

Description

As discovered in here, when using the SectionList component in a New Architecture React Native app together with a component that uses Animated, like some components of react-native-paper, the stickySectionHeadersEnabled doesn't seem to work. The linked github discussion has a video of the bug occurring.

Steps to reproduce

1. Checkout reproducer repo and run yarn start and install
2. SectionList stickySectionHeadersEnabled is not working
3. Remove Animated usage in App.tsx
4. SectionList stickySectionHeadersEnabled now works

React Native Version

0.74.2

Affected Platforms

Runtime - Android

Areas

Other (please specify)

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (8) arm64 Apple M1
  Memory: 68.72 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.3
    path: ~/.nvm/versions/node/v18.20.3/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v18.20.3/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v18.20.3/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "34"
    Build Tools:
      - 29.0.3
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 34.0.0
      - 34.0.0
      - 35.0.0
    System Images:
      - android-25 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11926650
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 3.1.2
    path: /Users/giovanni/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.2
    wanted: 0.74.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

No log applicable

Reproducer

https://github.com/giovanni-caiazzo/rn-sectionlist-reproducer

Screenshots and Videos

I first raised the issue in react-native-paper repo here. It has a video showing the bug from a slightly different test-repo I did: https://github.com/callstack/react-native-paper/assets/52694654/31a211fd-801e-4585-b31b-470e10dbaa53

[kunalchavhan]

@cortinico I did some debugging and found that this issue is getting reproduced with useNativeDriver enabled. When native driver is enabled this listener is not getting called. Further debugging showed that for some reason on NativeAnimatedModule all the batched operations are not getting executed. Due to this the addOperation for attaching listener on native animated value is never executed. I am super excited to fix this but due to my limited knowledge of Animated node working I would need some guidance to move ahead.