A Complete Guide on Flat List.

SO , when you are on Instagram and scrolling , what you notice that its shows never-ending posts and all scroll down smoothly without any latency or hang . how its possible to show lots of data in smooth way. the answer is Flat List. In React native you can show data in a scroll way by using its component Scroll View but Problem lies in Scroll view is that when you using it loads whole data in one go , if data is small then its good but if data is large enough then we use Flat list with or with out pagination.

its Basic Features : 1)Fully cross-platform. 2)Optional horizontal mode. 3)Configurable viewability callbacks. 4)Header support. 5)Footer support. 6)Separator support. 7)Pull to Refresh. 8)Scroll loading. 9)ScrollToIndex support. 10)Multiple column support.

Its Props and Functionality:

1)render item

syntax: renderItem({ item, index, separators }); its is used to load data that you want to show in a scroll way. its a function that takes item , index and separators . item is what you want to show the way you want to on you UI.

2)Data:data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.

3)keyExtractor : the way we use index to distinguish data , same way we use Keyextractor to distinguish our render data , we can use keyextractor anything.it will be unique for each element.

4)onEndReached: when you reached to last item of you flatlist , what you want to do that time ,we add everything that we want to add when we reached at the . it may be animation , message anything.

5)onEndReachedThreshold: How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.

6)onRefresh: its a function its used like in Instagram where we refresh by pulling our list so that new post are visible to us. same way this is used what you want to do when user refers.

7)horizontal: when we want to show your flat list in horizontally , we use this.

8)showsHorizontal/VerticalScrollIndicator: When we don't want to show scroll indicator we use this. We simply put false .

9)snaptoInterval:the way you want to scroll data when you snap or using gesture. it will be any number or size of particular item.