How to reset scroll and section header in sectionList? - react-native

I am using sectionList to create sections for my application. I have two tabs which uses the same section list. The issue that I am facing is that when I click the second tab the data refreshes but the other properties like scroll position doesn't because sectionList is a pure component. This causes the header of the second section to disappear after scrolling to some point because there are lesser headers. The things I tried but did not provide any results are:
Use extraData to indicate re-render required
Cloning entire data

Related

How to create a header above a top tab navigation which can has flatlist on every tab and also can scroll the entire screen along with header?

I want my screen's header to scroll along with the tabs, Each of the tabs has infinite data so I am using FlatList to display it.
The problem is if I am displaying the header in simple View then that part doesn't scroll with the tab.
I tried to put the scroll view on top and then FlatList into it but that again is a performance issue.
Please suggest an optimized and better solution for the following.
I am using the latest versions of react native and react navigation.

How to prevent a header of FlatList from going down when pulling-to-refresh in React Native?

I have a FlatList with a Header. When I pull to refresh now, the header goes down along with all list items:
But I want it to stay on top, so that only items are pulled down:
Such behaviour can be achieved if I'd put my header component not inside the FlatList, but before it. However, it's not suitable as the header will always stay on top, but I need it to scroll away with list items as if it was the part of the list. How can I do that?
I have tried setting a negative margin for the header in the onScroll event, but it doesn't look smooth at all and causes weird effects.
I'd appreciate your ideas on how this can be done.

React native scroll to an offset while scrolling through the list

I am trying to implement static list sized pagination in react native (i.e) will have static list size and on scrolling based on the threshold (say 80% list viewability reached) will add more item at bottom and will remove list items from top. Same way while scrolling up will add list items at top and will remove at bottom.
Issue I am facing is, while on scrolling the listRef.scrollToOffSet (I used getLayout props to find out the height to be adjusted) is not working. It is working fine if I add debugger while dev testing. But without debugger the list is not moving to the specified offset.
Can you please help me out to figure how to implement the same?

React Native Flatlist inside ScrollView

I am trying to develop a profile screen which has the persons profile pic, name, etc in the header as well as tabs that determines which data gets displayed in the FlatList below. I want the header component to be scrollable with the FlatList so that the header does not take up screen space while scrolling the FlatList. Also, the header's tabs will change the data that gets render in the list. I have tried two approaches but neither one has worked. Including the header and flatlist inside of a scrollview causes the flatlist to continually call onEndReach until all of the data is returned, but I also read that this is not recommended. The second approach was setting the ListHeaderComponent on the flatlist to the header component, but every time a tab is change the entire screen reloads. I am looking to have the header scrollable as if it were part of the flatlist, and only the flatlist re-render when a tab is pressed. Similar to what Instagram has with their profile screen. Any help with this issue would be much appreciated.

Sectionlist Horizontal with sticky header in React Native?

I've been able to render the Sectionlist in React Native with horizontal={true}, but when I have two problems with the section header.
The header appears as a part of the list, and not above it.
Even with stickySectionHeadersEnabled={true}, the header does not stick and scrolls along with the list.
Expected
How it actually appears

horizontal is a prop of ScrollView. Setting horizontal={true} will render every child component of a ScrollView to be horizontally rendered, be it the header or footer or empty component. If you need a layout as what you have drawn under "Expected", you have to make separate View for that.
It makes sense to make everything horizontally in-line, if you are setting horizontal to true. If a SectionList is rendered horizontal, its sections should come up horizontally. If you don't give section headers in between two sections, how will user differentiate between two sections? If you want to have a section header to start at the top of a new section, that's specific to you and you may have to write your own implementation of that.

That's behaving as intended. horizontal={true} means headers will also be rendered horizontally.
If you want headers to be above the items, you could likely hack it by setting the width of the section header to 0, and place a horizontal header within that element, positioned at the very top, so it overlays over the next element.
According to the ListView documentation, the stickySectionHeadersEnabled prop is not supported when horizontal is set to true. While it doesn't currently say this on the SectionList documentation, I assume it's also true for SectionList.
stickyHeaderIndices
(...) This property is not supported in conjunction with horizontal={true}.