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.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, ActivityIndicator, FlatList, Alert, Platform } from 'react-native'; |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor(props) { super(props); this.state = { loading: true } } |
4. Create fetch() API in componentDidMount() method. We are using the fetch() web API in our tutorial to parse JSON.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ loading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } |
5. Create a function named as GetGridViewItem(). This function would show us the GridView selected item value using Alert message.
|
1 2 3 4 5 |
GetGridViewItem (fruit_name) { Alert.alert(fruit_name); } |
6. Create a IF condition in render’s block. This would used to Show and hide the ActivityIndicator component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
render() { if (this.state.loading) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size="large" /> </View> ); } return ( ); } |
7. Create a Root View in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
render() { if (this.state.loading) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size="large" /> </View> ); } return ( <View style={styles.MainContainer}> </View> ); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
render() { if (this.state.loading) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size="large" /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList data={ this.state.dataSource } renderItem={({item}) => <View style={styles.GridViewBlockStyle}> <Text style={styles.GridViewInsideTextItemStyle} onPress={this.GetGridViewItem.bind(this, item.fruit_name)} > {item.fruit_name} </Text> </View> } keyExtractor={(item, index) => index} numColumns={2} /> </View> ); } |
9. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10, paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, ActivityIndicator_Style:{ left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', alignItems: 'center', justifyContent: 'center' }, GridViewBlockStyle: { justifyContent: 'center', flex:1, alignItems: 'center', height: 100, margin: 5, backgroundColor: '#009688' } , GridViewInsideTextItemStyle: { color: '#fff', padding: 10, fontSize: 18, justifyContent: 'center', }, }); |
10. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, ActivityIndicator, FlatList, Alert, Platform } from 'react-native'; export default class Project extends Component { constructor(props) { super(props); this.state = { loading: true } } componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ loading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } GetGridViewItem (fruit_name) { Alert.alert(fruit_name); } render() { if (this.state.loading) { return ( <View style={styles.ActivityIndicator_Style}> <ActivityIndicator size="large" /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList data={ this.state.dataSource } renderItem={({item}) => <View style={styles.GridViewBlockStyle}> <Text style={styles.GridViewInsideTextItemStyle} onPress={this.GetGridViewItem.bind(this, item.fruit_name)} > {item.fruit_name} </Text> </View> } keyExtractor={(item, index) => index} numColumns={2} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10, paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, ActivityIndicator_Style:{ left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', alignItems: 'center', justifyContent: 'center' }, GridViewBlockStyle: { justifyContent: 'center', flex:1, alignItems: 'center', height: 100, margin: 5, backgroundColor: '#009688' } , GridViewInsideTextItemStyle: { color: '#fff', padding: 10, fontSize: 18, justifyContent: 'center', }, }); |
Screenshots in Android device:
Screenshots in iOS device :
