Menu
You don't need to use extra components like ScrollView to make list data scrollable. The FlatList component also comes with the following features automatically: Header section.
When developing with React Native and nesting FlatList or SectionList component inside a plain ScrollView, your debugger might display the following warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
SectionList s are like FlatList s, but they can have section headers to separate groups of rows. SectionList s render each item in their input sections using the renderSectionHeader and renderItem prop.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With