Intro About FlatList :

We all know about FlatList, FlatList is a basic and very impotant component of react native, if you want to design any page which contain a large amount of data and we want that data in a scrolling form then the best component is FlatList, before introducing FlatList we all are using ListView but there are lot’s of limitations in ListView, which all are coverd by the FlatList , so let’s start the “How to finding index at the time of scrolling on FlatList or what is FlatList in react native“.

Output of FlatList –

Need of Finding Index in FlatList :

Sometimes there are a condition where we need only a particular index from FlatList to perform some kind of operation, so here we learn more about FlatList.

Why We Using FlatList :

Here are some important reason why we using FlatList.

• Fully cross-platform.
• Optional horizontal mode.
• Configurable viewability callbacks.
• Header support.
• Footer support.
• Separator support.
• Pull to Refresh.
• Scroll loading.
• ScrollToIndex support.
• Multiple column support.

Why We Use keyExtractor in FlatList :

keyExtractor tells the FlatlList to use the id’s for the react keys instead of the default key property. Don’t use index as the unique id.

Difference Between ScrollView and FlatList :

ScrollView use for small items (like 100 items) and FlatList use for large number of record like 10000 items. you need to pass an array of data and then render each item in the array with the renderItem callback in flatlist.

So let’s start the code..

<Flatlist style={{ marginTop: 20, marginLeft: 20, marginRight: 20 }} data={this.state.data}   
pagingEnabled={true}  
onTouchStart={() => console.log('onTouchStart')}  
onTouchMove={() => console.log('onTouchMove')}  
onTouchEnd={() => console.log('onTouchEnd')}  
onScrollBeginDrag={() => console.log('onScrollBeginDrag')}  onScrollEndDrag={() => console.log('onScrollEndDrag')} 
onMomentumScrollBegin={() =>  console.log('onMomentumScrollBegin')}  onMomentumScrollEnd={() => console.log('onMomentumScrollEnd')}  onScroll={() => this.handleScroll()}  
extraData={this.state.refreshflatlist}  
ListEmptyComponent={() => API.noRecorsFound()}  
renderItem={({ item, index }) => {  
return ( <Text>hi</Text>)} >
</Flatlist>

Understanding of code –

• style – we use the style for provide the styling.
• ListEmptyComponent – is a props of flatlist, it called when your list is empty.
• renderItem – renderItem also a props of flatlist, and very important part of flatlist because it rendered the view, it takes an item from data and renders it into the list, it also provide additional metadata which give us a index. and it’s syntex is renderItem({item, index, separators});
  • item –  item contain object, item from data being rendered.
  • index: index always return the number of corresponding to the item in the data array.
  • separators – is a object which contain.
    • highlight – highlight is a function.
    • unhighlight – is a function.
    • updateProps – is a function.
      • select (enum(‘leading’, ‘trailing’)).
      • newProps (Object)
• onMomentumScrollEnd – is a props of scrollview, it called when we reach at the end of list.
• onMomentumScrollBegin – it’s also a props of scrollview, it called when we start the scrolling of list.
• onScrollEndDrag – called when the user stops dragging the scroll view and it either stops or begins to glide.
• onTouchStart – The gesture responder system manages the lifecycle of gestures in your app.
  

So this  “How to finding index at the time of scrolling on FlatList or what is FlatList in react native” is completed, “you can find the next issue list here.

and you can find my post on medium as well click here please follow me on medium as well.

And if any other query/issue, please feel free to ask.

Happy Coding Guyz.