Problem Description
When using a SectionList component without the getItemLayout prop (i.e., with dynamic/variable height items), the vertical scrollbar does not render at all. The list content is still scrollable via mouse wheel, but no scrollbar indicator is visible.
When getItemLayout is provided (even with an inaccurate estimated fixed height), the scrollbar appears. However, providing getItemLayout with a fixed height is not suitable for all use cases of React Native Windows.
My understanding is that the SectionList should display a scrollbar when content overflows, regardless of whether getItemLayout is provided.
Steps To Reproduce
-
Create a SectionList with multiple sections and enough items to overflow the container, using variable-height items (no getItemLayout prop):
<SectionList
sections={sections}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <VariableHeightItem item={item} />}
renderSectionHeader={({ section }) => <SectionHeader title={section.title} />}
/>
-
Run the app
-
Observe that the list content is scrollable (mouse wheel / touch), but no scrollbar is visible.
-
Now add a getItemLayout prop with any fixed height estimate:
<SectionList
sections={sections}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <VariableHeightItem item={item} />}
renderSectionHeader={({ section }) => <SectionHeader title={section.title} />}
getItemLayout={(_, index) => ({
length: 100,
offset: 100 * index,
index,
})}
/>
-
The scrollbar now appears.
Expected Results
No response
CLI version
20.0.0
Environment
info Fetching system and libraries information...
System:
OS: Windows 11 10.0.26100
CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1365U
Memory: 5.22 GB / 31.64 GB
Binaries:
Node:
version: 22.13.0
path: C:\nvm4w\nodejs\node.exe
Yarn:
version: 1.22.22
path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm:
version: 10.9.2
path: C:\nvm4w\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:
- 16.11.36602.28 (Visual Studio Professional 2019)
- 17.14.36623.8 (Visual Studio Community 2022)
Languages:
Ruby:
version: 3.0.2
path: C:\tools\ruby30\bin\ruby.exe
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.1.4
wanted: 19.1.4
react-native:
installed: 0.81.6
wanted: 0.81.6
react-native-windows:
installed: 0.81.12
wanted: 0.81.12
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Community Modules
No response
Target React Native Architecture
None
Target Platform Version
None
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response
Problem Description
When using a
SectionListcomponent without thegetItemLayoutprop (i.e., with dynamic/variable height items), the vertical scrollbar does not render at all. The list content is still scrollable via mouse wheel, but no scrollbar indicator is visible.When
getItemLayoutis provided (even with an inaccurate estimated fixed height), the scrollbar appears. However, providing getItemLayout with a fixed height is not suitable for all use cases of React Native Windows.My understanding is that the
SectionListshould display a scrollbar when content overflows, regardless of whethergetItemLayoutis provided.Steps To Reproduce
Create a
SectionListwith multiple sections and enough items to overflow the container, using variable-height items (nogetItemLayoutprop):Run the app
Observe that the list content is scrollable (mouse wheel / touch), but no scrollbar is visible.
Now add a
getItemLayoutprop with any fixed height estimate:The scrollbar now appears.
Expected Results
No response
CLI version
20.0.0
Environment
info Fetching system and libraries information... System: OS: Windows 11 10.0.26100 CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1365U Memory: 5.22 GB / 31.64 GB Binaries: Node: version: 22.13.0 path: C:\nvm4w\nodejs\node.exe Yarn: version: 1.22.22 path: C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: version: 10.9.2 path: C:\nvm4w\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: - 16.11.36602.28 (Visual Studio Professional 2019) - 17.14.36623.8 (Visual Studio Community 2022) Languages: Ruby: version: 3.0.2 path: C:\tools\ruby30\bin\ruby.exe npmPackages: "@react-native-community/cli": installed: 20.0.0 wanted: 20.0.0 react: installed: 19.1.4 wanted: 19.1.4 react-native: installed: 0.81.6 wanted: 0.81.6 react-native-windows: installed: 0.81.12 wanted: 0.81.12 npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not foundCommunity Modules
No response
Target React Native Architecture
None
Target Platform Version
None
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
No response