Section list headers are not sticky when using headerLargeTitle on a screen

[rochajulian]

Description

I am using Expo.

I have headerLargeTitle enabled on a screen in my stack. This screen has a section list and I have made sure to enable contentInsetAdjustmentBehavior="automatic" as a prop. The problem is that whenever I scroll up, the section list headers do not stick to the top at all.

As a workaround, I've used useSafeAreaInsets from the react-native-safe-area-context package and I have set a padding top to the entire view of my screen. The value I have set to it is the top inset + a very arbitrary number found through trial and error, in this case it is 15. This now allows me to scroll the page upwards and see the section list headers stick.

BUT... whenever I load the app, the large header title initializes in its "collapsed" form. So I have to scroll down to see it get large.

I followed this guy on YouTube who showed me this temporary fix, here's a link to his video with the exact timestamp of where he describes the bug and then uses this workaround: https://youtu.be/_k5v0KOfNZ0?si=vRSxkXMYN-LibNeu&t=7239

Though keep in mind, that he doesn't show the bug that I am running into. I only linked him for you to see an example of the setup.

I suppose the ideal situation here would be that this bug where section list headers aren't sticky gets addressed so that we don't have to do a workaround like this.

Steps to reproduce

1. Create a new screen in your stack and enable headerLargeTitle
2. In your new screen, add a View component and add padding top to its style with the value being top (which comes from the react-native-safe-area-context package) plus a number such as 15.
3. Add a dummy section list of your choice and be sure to enable the contentInsetAdjustmentBehavior="automatic" prop.
4. Scroll up on the screen and notice how your section list headers now stick to the top (if you only see part of the header stick, increase the number, in this case it'd be 15 that we'd be increasing.
5. Reload the app with Metro and notice how when it loads, your large header is collapsed and you have to scroll down to make it large.

Snack or a link to a repository

https://github.com/rochajulian/my-app

Screens version

~4.4.0

React Native version

0.76.6

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes