search

kanelloc / react-native-animated-header-scroll-view

React native animated header ScrollView & FlatList. Animates an image or a custom component into a navbar header.
https://www.npmjs.com/package/@kanelloc/react-native-animated-header-scroll-view
MIT License
253 stars 21 forks source link

Is there a way to make a header element sit below the scrollable content? #100

Closed alaughlin closed 11 months ago

alaughlin commented 11 months ago

I'd like to position a sticky/fixed element inside the header that the will be covered by the scrollable content. When the user scrolls, I want the element inside the header to remain in place while the header shrinks and the content covers it. I've tried adding the element to the HeaderNavbarComponent because it is fixed, but that component sits on top of the scrollable content instead of below it. I've tried messing with z-indexes but nothing seems to work. Is there a way to do this?

alaughlin commented 11 months ago

Going to close this for now, as I've solved this by patching this library to add support for a fixed HeaderComponent

Attached a diff if anyone is curious how to do this!

@kanelloc+react-native-animated-header-scroll-view+1.0.0.patch

kanelloc commented 11 months ago

Hey @alaughlin !! Thanks for using the library!! You can also open a PR with the above patch 😃