custom component below SearchBar

[pouyarezvani]

Is it Possible to have a custom component below the SearchBar from your library?
I cant use a custom header then I'd lose the large title and search bar.

An example would be the GitHub app, where they render a custom menu below their searchBar.

[cabiad]

Not a core dev and I wouldn't exactly recommend it (it's a hack given the currently exposed functionality), but the only way I've gotten something similar to this to work in the past has been to use a SectionList with only one section in your screen component and to set it to sticky headers mode.

Your single section's sticky header would looks something like the custom component in your example except that it would render just below the screen's header (top of the body) instead of at the bottom of the header. You might be able to set custom styling on the header (remove the shadow) and your component (match background color, set a bottom border) to fake this though.

This was a while ago, but I remember it took some trial and error, though I sadly don't have the code I used handy any more.

I would love it if react-native-screens could support this directly.

[pouyarezvani]

I've tried this, sadly with header translucent sticky headers don't work anymore. Because it goes below the header.

[tboba]

Hey @pouyarezvani, new useAnimatedHeaderHeight or useReanimatedHeaderHeight hook might be the solution there! In the case you've mentioned I would suggest using SectionList inside Animated.View and animate the translateY using the value from the hook.

Right now we don't support such components, but it's a great idea! Thus, I'm moving this discussion to the Ideas category.
Cheers!

[nucleartux]

Sorry for the late reply, but I did something similar here: https://x.com/nuclear0/status/1757846123903959053?s=20. I hope it will help people who need something similar to what the OP needs.