React Native Create JSON Parsing GridView iOS Android Tutorial

GridView is used to display items or data into 2-Dimensional grid style view, GridView will automatically arrange data into Grid format. In react native we can create GridView using FlatList using numColumns={} prop. This prop would convert the normal FlatList into GridView. So in this tutorial we would going to create JSON Parsing GridView in iOS Android application Example Tutorial, We would also retrieve get the GridView selected item value in this tutorial and show inside Alert message.

Contents in this project Create JSON Parsing GridView iOS Android Example Tutorial:

1. First of all Read my previous tutorial on JSON ListView and JSON FlatList. You can learn about converting PHP MySQL data into JSON in both tutorials. I am directly using JSON in this tutorial from my previous tutorials, So if you want to learn about creating your own JSON using PHP MySQL data then read my this tutorial.

Screenshot of JSON used in this project :

2. Import StyleSheet, View, Text, ActivityIndicator, FlatList, Alert and Platform component in your project’s class.

3. Create constructor() in your project. We would make a State named as loading, This state would used to show and hide the ActivityIndicator after done loading JSON from server.

4. Create fetch() API in componentDidMount() method. We are using the fetch() web API in our tutorial to parse JSON.

5. Create a function named as GetGridViewItem(). This function would show us the GridView selected item value using Alert message.

6. Create a IF condition in render’s block. This would used to Show and hide the ActivityIndicator component.

7. Create a Root View in render’s return block.

8. Create FlatList component in Root View with numColumns={2} prop. We are only creating 2 columns in GridView but you can create more than one column in FlatList component using numColumns={3} or numColumns={4}. Here the number value defined inside this prop would be the number of columns.

data : Setting up the Data source.

9. Creating Style.

10. Complete source code for App.js File :

Screenshots in Android device:

Create JSON Parsing GridView Screenshots in iOS device :

Leave a Reply

Your email address will not be published.