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 :
Also Read :
React Native Open Navigate to Another Activity on Button Click
How to Call Another Class Function From Default Class in React Native
Create Multi Line Text Breaking Text Line From Middle in React Native
Example of Creating Pre Populated SQLite Database For React Native
React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial
