Sticky headers don't work on new architecture

[chrisglein]

Problem Description

This was implemented in old architecture: https://github.com/microsoft/react-native-windows/issues/7554 But there doesn't seem to be support in the new arch. Note that this scenario was not covered by the Paper Gallery.

https://reactnative.dev/docs/scrollview#stickyheaderindices https://reactnative.dev/docs/scrollview#stickyheadercomponent

https://github.com/user-attachments/assets/c21b77e4-c10d-4fc9-b179-b58c69ed9ff7

Steps To Reproduce

import {View, ScrollView, Text, Pressable} from 'react-native';

const App = () => {
  return (
      <View style={{flex: 1}}>
        {/* Static header section at the top of the screen */}
        <View
          style={{
            height: 50,
            width: '100%',
            paddingTop: 15,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'lightgray',
          }}>
          <Text>Header</Text>
        </View>

        <View style={{flex: 1}}>
          {/* Scrollable content with a sticky section */}
          <ScrollView stickyHeaderIndices={[1]}>
            {/* First scrollable content section */}
            <View
              style={{
                backgroundColor: 'gray',
                alignItems: 'center',
                paddingVertical: 10,
                paddingHorizontal: 20,
              }}>
              <Text>
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown printer took a galley
                of type and scrambled it to make a type specimen book.
              </Text>
            </View>

            {/* Sticky section: remains visible at the top during scroll */}
            <View
              style={{
                backgroundColor: '#f93',
                height: 50,
                width: '100%',
                paddingVertical: 17,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{color: 'white', textTransform: 'uppercase'}}>
                Sticky section
              </Text>
            </View>

            {/* Second scrollable content section */}
            <View style={{padding: 20, gap: 10}}>
              {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15].map((item) =>
                <Pressable key={item}>
                  <Text>
                    {/* Placeholder content for demonstration */}
                    Lorem Ipsum is simply dummy text of the printing and typesetting
                    industry. It has survived not only five centuries, but also the
                    leap into electronic typesetting, remaining essentially
                    unchanged.
                  </Text>
                </Pressable>
              )}
            </View>
          </ScrollView>
        </View>
      </View>
  );
};

export default App;

Expected Results

https://github.com/user-attachments/assets/a94ef5be-50de-435a-bbce-7f61d7d5b89c

CLI version

19.1.1

Environment

System:
  OS: Windows 11 10.0.27944
  CPU: "(24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores     "
  Memory: 36.79 GB / 63.86 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.14.36408.4 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-windows:
    installed: 0.80.0-preview.6
    wanted: 0.80.0-preview.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

No response

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

None

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response