Sticky headers not working in nested SectionList

[Moorst]

Description

Reported previously by MathieuVedana (#20390) but was never addressed. Reopening as I'm encountering the same problem.

The headers of the first level of a SectionList are sticky as expected.
The headers of the nested SectionList are not sticky.

Header sticky
------- Header not sticky
-------------- Content
------- Header not sticky
-------------- Content
Header sticky
------- Header not sticky
-------------- Content
------- Header not sticky
-------------- Content

Version

0.68.0

Output of npx react-native info

System:
OS: macOS 12.2.1
CPU: (8) x64 Apple M1 Pro
Memory: 35.04 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.2/bin/yarn
npm: 8.3.0 - ~/.nvm/versions/node/v14.18.2/bin/npm
Watchman: 2022.01.03.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 29, 30, 31
Build Tools: 29.0.2, 30.0.2
System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7935034
Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_311 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Nest a SectionList within another and enable stickyHeaderIndices on both the parent and child SectionLists. The parent sectionHeaders are sticky but the nested ones are not.

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

https://snack.expo.dev/@moorst/nested-and-sticky

[tj-mc]

Nesting virtualised lists of the same orientation is not recommended, and there should be a log warning that comes up for this.

It seems like this would be achievable with just a single section list. In renderSectionHeader you can put some styling and logic to give the appearance of nesting, and your sticky headers will work as expected.

[firehand33]

any solution for this? i'm having the same issue too

[Maxth]

Nesting virtualised lists of the same orientation is not recommended, and there should be a log warning that comes up for this.

It seems like this would be achievable with just a single section list. In renderSectionHeader you can put some styling and logic to give the appearance of nesting, and your sticky headers will work as expected.

I don't get a warning when nesting sectionLists similarly to the OP. I need to create two lists on top of each other, where each list is divided into subcategories with subheaders. Also, the two lists have headers of their own and together they may take up more than one screen. I don't think this is possible to achieve the way you describe. I too need to make the subheaders sticky.

Nesting sectionLists has worked great so far, apart from this issue.