How to show header when scroll up and hide header when scroll down on FlatList

Question

Now I want to create, exactly like Facebook's app do, a bar displayed above my tabNavigator. This tabs hide on scroll down and show on scroll up. And now I'm using FlatList, but the FlatList component has ListHeaderComponent option for rendering his header who also hide when scrolling down. (because it is on top, so need to scroll to beginning to see it, not user-friendly with my very long list item )

Please help me any idea.

Solution

Flat list provide you a header and footer of it self. You have to make it manually. I found one link which is related to collapsible navbar.

https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

https://expo.io/@janic/collapsible-navbar this lnk has a demo. so you can check it out here

might this helpful !