Simple way to implement flatlist in react native – Technoetics – Medium

Simple way to implement flatlist in react native  #javascript

  • Simple way to implement flatlist in react nativeImage Source:PixabayFlatlist is new component introduced in recent version of react native along with sectionlist for rendering list based data in react native screens.Going by the official documentation the advantages of using this component are:In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreenPull to refresh functionalityIn today’s article we are going to implement flatlist in react native.First make sure that you have latest version of react native installed.
  • My current package.json contains following versions of react native and react installed:”dependencies”: { “axios”: “^0.15.3”, “native-base”: “^2.1.2”, “react”: “^16.0.0-alpha.6”, “react-native”: “^0.43.0”, }The code for implementing flatlist is pretty straight forward:-ViewFlatList key={“flatlistexample”} renderItem={({item}) = this.renderFlatListItem(item)} //ViewHere we pass a jsonArray as data prop and define how each individual list item is to be rendered in renderItem prop.For example in my case , the data prop has the following quotes to inspire you”,”topicSummary”:”Simple motivational we define renderFlatListItem function as { return ( View style={styles.gridItem} Text key={“topicCat”+item.topicCat} key={“gridView”+item.topicCat} openSubCat={this.
  • _openSubCat} parentKey={“Catalgue”} / /View )}Here we are rendering simple nested view components with topic category at the top followed by gridview containing topic items.The end result looks like this:There are several additional options for customizing flatlist as follows:horizontal(boolean): Set it to true if you need render horizontally scrollable flatlistnumColumns(number):Set no of columns when horizontal is set to false for vertically scrollable listener which is triggered when user scrolls to end of the list.
  • We can use this function to show a loader and append more list items at the end of the listrefreshing(boolean): Set this true while waiting for new data from a refresh.onRefresh: If provided, a standard RefreshControl will be added for “Pull to Refresh” functionality.
  • Make sure to also set the refreshing prop You can specify the component to be rendered in between listitems like line separators using this can specify the component at the end of list using this can specify the component to be rendered at the top of the listThere are also some more options and methods available which can try from the official documentation here.

Flatlist is new component introduced in recent version of react native along with sectionlist for rendering list based data in react native screens.Going by the official documentation the advantages…

@ng_real_ninja: Simple way to implement flatlist in react native #javascript

Flatlist is new component introduced in recent version of react native along with sectionlist for rendering list based data in react native screens.Going by the official documentation the advantages of using this component are:

In today’s article we are going to implement flatlist in react native.

First make sure that you have latest version of react native installed. My current package.json contains following versions of react native and react installed:

“dependencies”: {

“axios”: “^0.15.3”,

“native-base”: “^2.1.2”,

“react”: “^16.0.0-alpha.6”,

“react-native”: “^0.43.0”,

The code for implementing flatlist is pretty straight forward:-

key={“flatlistexample”}

Here we pass a jsonArray as data prop and define how each individual list item is to be rendered in renderItem prop.

For example in my case , the data prop has the following format:

“topicCat”:”Wise”,

“topicCatData”:[

“topicName”:”Quotes”,

“topicDescription”:”Some quotes to inspire you”,

“topicSummary”:”Simple motivational quotes”,

“imageurl”:”imageurl”,

“topicCategory”:”Wise”,

“topicId”:0

So we define renderFlatListItem function as follows:

Here we are rendering simple nested view components with topic category at the top followed by gridview containing topic items.The end result looks like this:

There are several additional options for customizing flatlist as follows:

There are also some more options and methods available which can try from the official documentation here. That brings us to end of today’s short tutorial.

Connect Deeper:

In the next article I will cover how to handle navigation between application screens using reactnavigation npm module. In order to get notified about future posts you can follow on facebook: Technoetics or subscribe to our mailing list below:

Simple way to implement flatlist in react native – Technoetics – Medium