microsoft / microsoft/react-native-windows

Sticky headers don't work on new architecture

Open
#15,188 2 comments 0 reactions 1 assignee View on GitHub

@vineethkuttan is already working on this.

Since Oct 8, 2025.

Area: Fabric Area: ScrollView bug New Architecture Parity: Fabric vs. Paper
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.