recyclerlistview component dynamic height

[muhammad786]

Hi @naqvitalha

First of all, really thanks for making such a nice listview, have used in many projects and working very good.

Right now we are building a new app where I'm facing one challenge related to recyclerlistview. Actually, on recyclerlistview scroll, we need to move the TABS (NEWS & MEDIA) on top of the screen and TABS will stick on TOP. So basically recyclerlistview bounds need to be changed dynamically. One more thing we are not using any scrollview on this screen, its simple view which is wrapping carousel widget, Tabs and then recyclerlistview.

To achieve the above requirements, could you please share some sample code.

Thanks!

[muhammad786]

@naqvitalha could you please answer, would be really helpful.

[naqvitalha]

Can't the tabs become sticky headers? Can you attach a gif to explain the behavior?

[muhammad786]

Can't the tabs become sticky headers? Can you attach a gif to explain the behaviour?

Hi @naqvitalha,

Really thanks for your response.

App video is attached. https://user-images.githubusercontent.com/1930664/105988061-91206380-60b8-11eb-88be-25b54b0664e6.mov

App GIF

Right now content below the TABS is the part of recyclerlistview only. So tabs & top carousel is not the part of recyclerlistview.

So our requirement is to hide the carousel & move tabs on top of the screen upon recyclerlistview scroll so that list can get more space on the screen. Just for your information, the whole screen is wrapped inside the SafeAreaView of "react-native-safe-area-context" & navigation library in use is "https://github.com/wix/react-native-navigation".

Really thanks

[muhammad786]

@naqvitalha

Could you please answer this, would be very helpful.

Thanks!

[anirudhagarwal365]

Hi @muhammad786 . I think what you can do is bring your carousel and two headers inside the recycler view. Further to achieve the sticky behaviour, you can define the index of the tabs are sticky headers.

For more info on sticky header/ container, check this out

[muhammad786]

@anirudhagarwal365 thanks man, got it what you said. However, my intent was to keep the carousel and Tabs out of the recycler view & on run time if we could move the recycler list view visible bounds/window (x=0, y=0 meant top of screen when user will start scrolling the list ) to top of the screen.

Thanks!

[muhammad786]

@naqvitalha Any suggestion from your side, please

Thanks!

[PedroBern]

hi @muhammad786, if I understand correctly you want to achieve something like this:

I'm not using recyclerlistview (which is great), but I have this behavior available in two packages:

react-native-collapsible-tab-view (using reanimated v2) and react-native-collapsible-segmented-view with vanilla React Native Animated API.

Maybe these projects help you implementing a solution with recyclerlistview.

[daominhsangvn]

I'm not tested but here my thoughts: Make your header (the part the on top of the listview, lets say its 400px) as absolute and add padding top (400px) to your listview then hook into the onscroll callback of the listview and adjust the top position of the header when onscroll trigger.

[PedroBern]

@daominhsangvn on IOS you need to use content inset to correctly position the refresh control, instead of padding. And when changing tabs you need to sync the scroll position of unfocused tabs with the position of the header, otherwise, you might see blank spaces / gaps.

[siddharth-kt]

Hi @PedroBern, Thanks for such great lib. (https://github.com/PedroBern/react-native-collapsible-tab-view)

I am using https://github.com/PedroBern/react-native-collapsible-tab-view (v2.0.2) but I am facing a problem. When attaching it with RecyclerListView we need to declare Animated.ScrollView but both react-native-collapsible-tab-view as well as RecyclerListView depends on onScroll prop callback from Animate.ScrollView, but we can pass either react-native-collapsible-tab-view onScroll function or RecyclerListView onScroll object to Animate.ScrollView onScroll props (but can't both) how to pass both ?

Thanks