-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Open
Labels
Area: FabricSupport Facebook FabricSupport Facebook FabricArea: ScrollViewNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricParity: Fabric vs. PaperRNW Fabric does not look or behave like RNW PaperRNW Fabric does not look or behave like RNW Paperbug
Milestone
Description
Problem Description
This was implemented in old architecture: #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
Screen.Recording.2025-09-30.142359.mp4
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
Screen.Recording.2025-09-30.142246.mp4
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
Metadata
Metadata
Assignees
Labels
Area: FabricSupport Facebook FabricSupport Facebook FabricArea: ScrollViewNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricParity: Fabric vs. PaperRNW Fabric does not look or behave like RNW PaperRNW Fabric does not look or behave like RNW Paperbug