FlatList in React Native

In this blog, I am discussing the FlatList. Basically, FlatList is a react-native Component and use to load the list of data. It’s an easy way to make an efficient scrolling list of data. Not only is it efficient but it’s got an incredibly simple API to work with. If you’ve used or are familiar with the ListView component it’s very similar, just better in (almost) every way. Now ListView is deprecated on react-native.

FlatList has two major props to render the list of data. such as renderItem and data. renderItem is used for load your each Item View and data your list data set.

<FlatList
  data={this.state.products}
  extraData={this.state}
   renderItem={({item}) => { return <Text>{item.name}<Text>}
/>

<FlatList

data={this.state.products}

extraData={this.state}

renderItem={({item}) => { return <Text>{item.name}<Text>}

The feature of FlatList-

It provides Scroll loading.
pagination of ListOf data.
Rendering List and Grid View Type.
Dynamically changing View Type (List & Grid) on a button Click.
passing extra state data to rerender item via “extraData” props.
Fully cross-platform.
Optional horizontal mode.
Configurable viewability callbacks.
Header support.
Footer support.
Separator support.
Pull to Refresh.
ScrollToIndex support.

Dynamically changing ViewType-

FlatList uses key props to change View Type of its items such List to Grid. Also, one important thing that we need to change the no. of columns dynamically for Grid Type.

<ScrollView>
  <FlatList
    data={this.state.products}
    key={this.state.isGrid ? 1 : 0}
    numColumns={this.state.isGrid ? 2 : 1}
    extraData={this.state}
    renderItem={item => {
      return this.state.isGrid ? (
        <CategoryGridProduct
          productData={item.item}
          onPress={this._onPressProduct.bind(this)}
          onPressAddToCart={this._onPressAddToCart.bind(this)}
        />
      ) : (
        <CategoryListProduct
          productData={item.item}
          onPress={this._onPressProduct.bind(this)}
          onPressAddToCart={this._onPressAddToCart.bind(this)}
        />
      );
    }}
    keyExtractor={item => {
      return item.id + "";
    }}
    ListEmptyComponent={
      <EmptyLayoutComponent
        message={StringConstant.EMPTY_SELLER_PRODUCT}
      />
    }
    onEndReached={this.fetchResult}
    onEndReachedThreshold={0.6}
    style={{ alignSelf: "stretch" }}
  />
</ScrollView>

<FlatList

data={this.state.products}

key={this.state.isGrid ? 1 : 0}

numColumns={this.state.isGrid ? 2 : 1}

extraData={this.state}

renderItem={item => {

return this.state.isGrid ? (

<CategoryGridProduct

productData={item.item}

onPress={this._onPressProduct.bind(this)}

onPressAddToCart={this._onPressAddToCart.bind(this)}

) : (

<CategoryListProduct

productData={item.item}

onPress={this._onPressProduct.bind(this)}

onPressAddToCart={this._onPressAddToCart.bind(this)}

);

}}

keyExtractor={item => {

return item.id + "";

}}

ListEmptyComponent={

<EmptyLayoutComponent

message={StringConstant.EMPTY_SELLER_PRODUCT}

}

onEndReached={this.fetchResult}

onEndReachedThreshold={0.6}

style={{ alignSelf: "stretch" }}

</ScrollView>

In Above Code snipped I have use List View and Grid View display of FlatList items. In Grid View use 2 columns and list View use 1 column. “this.state.isGrid” is changing according to the type of view after clicking the button. ListEmptyComponent props use for displaying my Empty component what List data is empty. onEndReached props use for pagination of list data and load second-page data when the user reached on the last item after scrolling.

View Of Layout –

https://mobikul.com/wp-content/uploads/2019/02/Screenshot_20190219-095658_Mobikul-WooCommerce-Marketplace.jpg

https://mobikul.com/wp-content/uploads/2019/02/Screenshot_20190219-095646_Mobikul-WooCommerce-Marketplace.jpg

Issues with FlatList- If I am using FlatList in my App I have faced one issue on Scrolling,

Some data has not displayed or not completely displayed with react-navigation,
When Scrolling huge amount of data rapidly FlatList Item has not displayed. I am troubling more days. and finally, I have found a solution to add FlatList inside the ScrollView of react-native.

References:

https://facebook.github.io/react-native/docs/flatlist

ashwini gupta 6 March 2021

. . .

FlatList in React Native

Leave a Comment Cancel Reply

Message Sent!