Transparent sectionListHeader is overlaped by renderItem (Updated RN)

[SaldanhaPrtt]

Description

Problem still persists after react native upgrade
When creating a SectionList component, if prop stickySectionHeadersEnabled=true, and it has no background, the child renderItem overlaps the header.
There seems to be no prop or logic that can resolve this problem.
So unfortunately, I must open this issue(or improvement)
untitled.webm

React Native Version

0.72.1

Output of npx react-native info

System:
OS: Windows 10 10.0.22000
CPU: "(12) x64 AMD Ryzen 5 5600X 6-Core Processor "
Memory: 7.40 GB / 15.89 GB
Binaries:
Node:
version: 16.15.1
path: C:\Program Files\nodejs\node.EXE
Yarn:
version: 1.22.19
path: ~\AppData\Roaming\npm\yarn.CMD
npm:
version: 8.11.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-222.4459.24.2221.10121639
Visual Studio: Not Found
Languages:
Java: Not Found
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.1
wanted: ^0.72.1
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: false
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

Simply create a SectionList with sticky headers and no background color

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

https://snack.expo.dev/@squidarrested/db76a1

[EduardoArtioli]

same here.

https://i.imgur.com/otH9Rp5.gif

[p1v44]

Has anyone solved this yet? My team and I are lost lol

[mouricef]

Facing same issue. Any workaround or fix for this

[ser-emejia]

Any updates? still happen

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[eemebarbe]

just set the stickySectionHeadersEnabled prop to false