Section sticky header in wrong place after list header change until scroll

[Bardiamist]

Description

I migrating to the New Architecture. I have component which worked fine 7 years on the "old architecture". It uses Animated.SectionList and can hide content in ListHeaderComponent. In the New architecture on ListHeaderComponent change: section header (renderSectionHeader) goes to the wrong place until manually scroll a little.

Steps to reproduce

1. Clone and run https://github.com/Bardiamist/diff/tree/section-list-header

2. Scroll util red header will stick

3. Press Hide top content after 1 sec button

4. Wait 1 second Expected result: red header should be in same place

5. Scroll a little

6. Press Show content after 1 sec button

7. Wait 1 second Expected result: red header should be in same place

React Native Version

0.78.1

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

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

System:
  OS: macOS 15.3.2
  CPU: (10) arm64 Apple M1 Max
  Memory: 11.71 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.10.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.22562.218.2431.13114758
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /Users/bardiamist/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.78.1
    wanted: 0.78.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

No crash

Reproducer

https://github.com/Bardiamist/diff/tree/section-list-header

Screenshots and Videos

Works with problem on the New Architecture:

https://github.com/user-attachments/assets/ceef7a7d-3e8e-49c9-83ba-2c402c8ce269

Worked as expected on the "old architecture":

https://github.com/user-attachments/assets/ea9ac31c-c424-494c-9a89-1e09b08b220c

[cortinico]

Feels really related to https://github.com/facebook/react-native/issues/45229

Perhaps this is something that @j-piasecki can help us with since he originally sent out the first fix for Animated + sticky header?

[j-piasecki]

@cortinico Sure, I can take a look into this.

[j-piasecki]

This problem is caused by connectAnimatedNodeToView marking the animated props as needing an update, while the execution of the update happens in didMountComponentsWithRootTag, which runs before the update is requested.

Enabling the feature flag added in https://github.com/facebook/react-native/pull/49908, which causes operations to be flushed after the batch is finished, fixes this.

https://github.com/user-attachments/assets/29887bf3-a276-4c9b-bb4d-8cc1657c1f76

cc @cortinico I'm not sure whether this issue should be closed or not, given that the solution is behind a feature flag at the moment.

[cortinico]

Thanks for investigating this @j-piasecki

cc @cortinico I'm not sure whether this issue should be closed or not, given that the solution is behind a feature flag at the moment.

@rozele what's the status of this feature flag? When are we planning to enable it? If we're planning to enable it in the immediate future, we can close this as fixed as soon as we turn it on

[yandadaFreedom]

+1, same problem

[rozele]

We're still in the middle of experimentation with the ReactNativeFeatureFlags.animatedShouldSignalBatch feature flag.

[oleksandr-dziuban]

Seems like a huge blocker for our app to go live with New Architecture :(

@cortinico do you know when it can be patched? or at least reviewed by RN team?

Seems like a huge blocker to go PROD with New Arch :

[cortinico]

@rozele is owning this so can provide further updates

[rozele]

The animatedShouldSignalBatch flag was removed in https://github.com/facebook/react-native/pull/52521. It is being superseded by cxxNativeAnimatedEnabled, but this hasn't been evaluated for open source readiness yet.

[oleksandr-dziuban]

is this animatedShouldSignalBatch affects the sticky header behaviour?

CC: @rozele

[rozele]

is this animatedShouldSignalBatch affects the sticky header behaviour?

CC: @rozele

Only in the sense that @j-piasecki mentioned enabling it solved the issue.

[gaodeng]

any news?