ScrollView sticky header does not show on scroll up with props stickyHeaderOnScroll and contentInset

[RayKay91]

Description

When a ScrollView is used with the stickyHeaderHiddenOnScroll prop AND a contentInset is passed in with a { top: number } value the sticky header scrolls away and hides as usual, but when scrolling up it does not reveal itself.

Steps to reproduce

1. Open a fresh project with the latest version of RN
2. Copy and paste the following code for the ScrollView

<ScrollView
        stickyHeaderIndices={[1]} // <--------
        stickyHeaderHiddenOnScroll // <--------
        contentInset={{ bottom: 200 }} // <-------
        contentOffset={{ y: 200, x: 0 }} // <-------
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View style={{ height: 200, backgroundColor: 'red' }} /> // <---------
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>

3. Scroll down and the header disappears as expected.
4. Scroll up but the header does not reappear. It behaves as if it were a normal ScrollView (i.e. non sticky header).

React Native Version

0.74.2

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M2 Pro
  Memory: 70.77 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.7.0
    path: ~/.asdf/installs/nodejs/20.7.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.asdf/shims/yarn
  npm:
    version: 10.1.0
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2024.06.24.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/ray/.asdf/shims/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"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 32.0.0
      - 33.0.0
      - 33.0.1
      - 33.0.2
      - 34.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
    Android NDK: 25.1.8937393
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11255304
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /Users/ray/.asdf/shims/javac
  Ruby:
    version: 3.2.2
    path: /Users/ray/.asdf/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: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

The issue has been isolated to the constructor of the `ScrollView` class in `ScrollView.js`


  constructor(props: Props) {
    super(props);

    this._scrollAnimatedValue = new AnimatedImplementation.Value(
      this.props.contentOffset?.y ?? 0,
    );
    this._scrollAnimatedValue.setOffset(this.props.contentInset?.top ?? 0); // Commenting this line out seems to make it work for some reason...
  }

Reproducer

https://github.com/RayKay91/rn-scrollview-bug

Screenshots and Videos

Without commenting that line of code in ScrollView.js

output.mp4

When commenting out that line of code:

output.mp4