React-native GridView example using FlatList

In this article we going to learn about React-native GridView example using FlatList, This allows you to display data in proper manner like tow-dimensional view we can also increase columns of gridview, also it supports both android and iOS platform, it support Header and Footer support also we cannot use other libraries for pull to refresh it support pull to refresh, scroll loading, scroll to index, let’s take example

This is the basic syntax of FlatList:

This will display Tom and Jerry values of key name and numColumns={2} will render data in 2 columns like below

In this example we will make simple image gallery with two columns as seen below,

To explain this in detail, we need to start with fetch call, to display data in FlatList

 

Fetch call

Create one method to call fetch API call and call this method componentDidMount() method of react-native this will call at app first-time start

Now our response JSON is as follows

To display these JSON data in gridview use FlatList as follows

before that, I suggest you install image loader library component by using the following command in the command line

After json response data had successfully parse and saved this response in the state, then use that list from the response object in FlatList component

now we will be going to handle on click to do this we have to use the react-native TouchableOpacity onPress method its very simple create another method GetListItem and call this method as follows

activeOpacity props handle onPress opacity animation

let’s see whole js file code so that we can understand clearly

 

React-native gridView example using FlatList
React-native gridView example using FlatList

Thank you 🙂 enjoy coding…

4 Replies to “React-native GridView example using FlatList”

  1. I’m still learning from you, but I’m making my way to the top as well. I definitely liked reading all that is written on your website.Keep the stories coming. I loved it!

Leave a Reply

Your email address will not be published. Required fields are marked *