search

Flipkart / recyclerlistview

High performance listview for React Native and web!
Apache License 2.0
5.21k stars 426 forks source link

How to make stickyHeader collapsible ? #654

Open siddharth-kt opened 2 years ago

siddharth-kt commented 2 years ago

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 ?

yasirrafiq786 commented 2 years ago

You need to use Animated library from react-native or react-native-reanimated

siddharth-kt commented 2 years ago

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!

Bayramito commented 2 years ago

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

siddharth-kt commented 2 years ago

😮 I see, thanks for letting me know.

Only-IceSoul commented 2 years ago

Check this : https://www.youtube.com/watch?v=vPJmC1udLWk

siddharth-kt commented 2 years ago

Check this : https://www.youtube.com/watch?v=vPJmC1udLWk

Nice, kindly share the code.