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.
Related
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.
My screen layout is SectionList inside a View and on onEndReached I am calling an API to get paginated data successfully (LoadMore behaviour).
As, SectionList is covering only 40% part of screen, I tried adding ScrollView so that complete screen becomes scrollable.
Problem: When the screen loads it fetches the initial paginated data. After rendering the UI, onEndReached event gets fired which in-turn calls api to get load more data again. This runs in loop until the complete data is fetched.
Has anyone faced the same issue. Any solution how to stop that.
Instead of adding a SectionList inside ScrollView, What you can do is by adding your above view (i.e. your other 60% area) as header of the SectionList. This way your entire screen will be treated as SectionList, and onEndReached will only gets called when user performs scroll.
As shown in the attached gif, the navigation bar at the bottom and the URL bar at the top are pushed in and out(not just show/hide at once) of view as user scrolls. How can I achieve this 'hiding' effect in React Native? The key point is that the hiding speed of the component should correspond to the scrolling speed.
I have tried giving negative values to the top and bottom, like so:
style={{bottom:dynamicallyChangingScrolledValue()}}
although it does push the view out of the screen, space where the component used to remain in the blank, occupied.
Are they using animations here? or changing some offset value dynamically by incrementing a small amount?
I'm trying to get the top header of my SectionList (not the individual section headings) to stick on the page, so other items are allowed to scroll underneath.
The prop "stickyHeaderIndices={[0]}" does the intended job on FlatList, but not SectionList. Is there an easy workaround for this?
Im trying to create a view with an animated shrinking header with a tabview that contains tabs with flatlist(such as google play). See Image.
I'm using react-navigation with a TabNavigator. The header is a component with a fixed height, currently above the TabNavigator. The header is fixed above the tabs all the time taking precious space.
I've tried React Native: Animate shrinking header with tabs but I can't get it to work because I gonna integrate flat list in to tab.
This article is using scrollview in tab panel.
Certainly, I am looking for solution for using flatlist.