recyclerlistview
recyclerlistview copied to clipboard
Flipkart
How to make stickyHeader collapsible ?
what i want is if user scroll To top (in reverse) the header should be visible otherwise it should be hidden. As can be viewed in example (https://github.com/Flipkart/recyclerlistview/blob/master/docs/images/getWindowCorrection_demo.gif)
That blue header hides when scrolling down but gets visible when we scrollup ?
You need to use Animated library from react-native or react-native-reanimated
You need to use Animated library from react-native or react-native-reanimated
Can you please show/give me any example code for that. Thanks!
I have pros and cons for you.
I had similar question so, to be able to make a collapsable header you need to use reanimated. For reanimated you need to create functional components to access hooks. In functional component RLV doesnt work properly i dunno why but you are having visual bugs.
So what i did is, I create a HOC functional component that extends RLV but additionally handles the scroll events and animates to header and footer. All you need to do is pass your footer and header as a prop to this HOC component and all the other props for RLV. So in your class component you are using this HOC component instead RLV, just you can pass your header and footer components via props. At the end of the day, your dataProvider, layoutProvider, being in a clas component as usual but animatable components being in your HOC (functional component). I hope thats clear enough.
BUT, bad news this technique doesnt work on Android on release apks. works fine on debug mode but in release doesnt work.
here are the my result in my project
Android
https://user-images.githubusercontent.com/44513402/137532294-9aa95f1d-607b-4090-ba67-8e1401c18f25.mov
IOS
https://user-images.githubusercontent.com/44513402/137532425-8131cd86-8e81-4448-b100-1a56277e0ff1.mp4
Check this : https://www.youtube.com/watch?v=vPJmC1udLWk
Nice, kindly share the code.