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