Example to implement searchbar in the header pattern


Is there an example on how to implement the search bar in the header pattern? I tried adding a button with a search icon that toggles a variable to show an absolutely positioned searchbar. While it does work as expected in Android, the default styles in iOS make it unusable (it is transparent by default), so I wonder if there is an easier way to accomplish this. It seems like a common pattern, so there should be an out of the box way of doing it.

This gif represents the search patternt that I mean.


+1 for thi, i wanted to do that as well but couldn’t find an easier way so i left it to be done at the end.


Did you find any solution?


i’d love to know this too


need this too…please allow the search bar to hide before me press the button.