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.
Related
I am using React Native's FlatList component with pagination. I want to execute a callback with the destination page as a parameter whenever the user releases on scroll.
onScroll fires pre-maturely and switches pages before the users releases the screen.
onScrollDragEnd doesn't correctly give you the destination page unless you drag your finger at least half way across the screen (eg doesn't work if you do a quick swipe).
onMomentScrollEnd doesn't get fired until the display stops moving, which may not get fired if the user is constantly swiping.
Is there some sort of middle ground to achieve this functionality?
Hello guys I am creating a chat app using React Native. And in chat screen which is the core feature obviously as you know we have to scroll towards the top to load more messages. I am using Scroll View to show messages. Is there any way that I can check if the Scroll View has reached its top ( not bottom )?
Thanks!
Use FlatList for rendering Chats this will improve your performance over ScrollView. Flatlist vs ScrollView
Use inverted prop of Flatlist to invert it. And after that use onEndReached prop in that call your loadMoreMessage function.
When your FlatList is inverted your onEndReached would be called when you reach the top.
If you have a chat app that has an unknown amount of chats you should be using a flatlist in order to display them. It will save you a lot of memory.
Flat list also has this functionality built in take a look at onRefresh:
https://reactnative.dev/docs/flatlist#onrefresh
What is structure different between FlatList and ScrollView in react native?
It seems to they equal to each other for scrolling view in the application, but ScrollView is very simple rather than FlatList, so when we must use FlatList in code?
There's a big difference between FlatList and ScrollView
ScrollView will load the items (data for scrolling) immediately after the component has been loaded. As a result, all data will be stored in RAM, and you will be unable to use hundreds or thousands of items in it (due to low performance).
FlatList, on the other hand, has a better solution for this problem; it will mount 10 items (by default) to the screen, and as the user scrolls the view, other items will mount.
It's a significant advantage to use FlatList instead of ScrollView.
You can use ScrollView for a small number of items and FlatList for even 10000 items.
A really big difference that no one seems to be pointing out here is that component state is not maintained with the FlatList component but is maintained with ScrollView. This is due to the fact that ScrollView renders all the children in one go and maintains them. Meanwhile, FlatList unmounts components once they are way off the screen and recreates them from scratch once the item comes back from screen (thus state is lost).
They have different usages.
FlatList is built to render a large list of items. If you check the documentation, you need to pass an array of data and then render each item in the array with the renderItem callback. It is optimized to have very good performances with very large arrays because it actually only renders the items that need to be displayed at the moment.
ScrollView is built to render a generic content in a way that it scrolls when the content is bigger than the ScrollView itself. You don't pass an array of data, but you put elements inside the ScrollView in the same way you would use a normal View. Be careful however, it does not provide the same optimization of the flat list for very long content.
As a rule of thumb:
Do you need to render a list of similar items from an array? Use FlatList
Do you need to render generic content in a scrollable container? Use 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.
I have created chat in a Flatlist. Each row is created as component and each component has willMount and didMount.
At first time, when flatlist loads, I have called service in didMount in each row to update the view after message displayed. I thought this service will be called only once after render.
But the problem is :
While scrolling, Flatlist unmount the rows which is not in viewport. When row is mounted, state value sets to initial and again lifecyle starts.
So I could not able to stop the service call after first time.
How do I stop the service call once flatlist rendered for the first time? Is there any way to reduce the call or any better approach?
Flatlist doesn't render all rows at the same time. It recycles views to rows that should be visible on screen. It's fast and saves memory.
You could use ScrollView, it will render all rows at once.
Or you could keep using Flatlist, and move didMount in the rows to their parent.
See more comparisons between Flatlist and ScrollView at https://facebook.github.io/react-native/docs/scrollview.html