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

react-native scrollview react-native-flatlist
ninh_nguyen picture ninh_nguyen · Dec 22, 2018 · Viewed 10.2k times · Source

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.

Answer

Shashin Bhayani picture Shashin Bhayani · Dec 22, 2018

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 !

Related questions

React Native: vertical centering when using ScrollView

I'm using React Native and I'm having trouble retaining vertical centering of elements as soon as I introduce a ScrollView. To demonstrate, I created 3 apps with React Native Playground. All examples have 2 pages, and they can be toggled by tapping …

Read More
React-Native Horizontal Scroll View Pagination: Preview Next Page/Card

I want to to a horizontal ScrollView with pagination enabled with one special requirement: each page (or card) is 90% of the container wide. The remaining 10% should be a preview of the next page. It is possible to do this with …

Read More
React native Android ScrollView scrollTo not working

I am trying to use a horizontal ScrollView in React Native for Android, where the starting position is in the middle of the scrolling images rather than (0,0). The scrollTo method seems to be called correctly inside componentDidMount but nothing moves …

Read More