FlatList has its own Prop named as numColumns={Define Column Value in Number}, which would allow us to change the FlatList mode from FlatList ListView to GridView. All we have to do is set the value in number from inside the numColumns={} prop. So in this tutorial we would going to create a JSON Parsing FlatList ListView with Images and Text dynamically come from MySQL database and dynamically change the numColumns={} prop value using State on button click. This would allow us to change the FlatList ListView state and permit us to dynamically Toggle Change ListView Mode between GridView on button click in react native Android and iOS application …Happy Reading .
Contents in this project Change ListView Mode To GridView Dynamically on Button Click :
1. Read our previous tutorial about Custom JSON ListView with Images. Because we are creating the FlatList in this tutorial using JSON which i have already created inside Custom JSON ListView with Image tutorial.
2. Screenshot of JSON used in this tutorial.
3. Import StyleSheet, View, Platform, Text, FlatList, TouchableOpacity, Alert, ActivityIndicator and Image component inside your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, FlatList, TouchableOpacity, Alert, ActivityIndicator, Image } from ‘react-native’;
|
4. Create constructor() in your class and create 3 State variables named as GridColumnsValue, ButtonDefaultText and isLoading.
GridColumnsValue : This state holds Boolean value. This state is used to Toogle between ListView to GridView. If the GridColumnsValue == true then it will set the numColumns={} value as 1 which would display the ListView and If the GridColumnsValue == false then it will set numColumns={} value as 2 which will display the GridView with 2 columns.
ButtonDefaultText : This state is used to set Button above text.
isLoading : This is used to Show and Hide ActivityIndicator . If the isLoading == true then it will show the ActivityIndicator and if the isLoading == false then it will hide the ActivityIndicator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
constructor()
{
super();
this.state = {
GridColumnsValue: true,
ButtonDefaultText: ‘CHANGE TO GRIDVIEW’,
isLoading: true
}
}
|
5. Create componentDidMount() method in your class. This method is a pre define inbuilt method and executes on app start time. Inside this method we would parse the JSON coming from HTTP URL and store the JSON into dataSource state. After parsing the JSON we would set the isLoading value false and hide the ActivityIndicator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.php’)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
|
6. Create function named as ChangeGridValueFunction(). We would call this function on Button onPress. This function would check the GridColumnsValue stale value and set button above text.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
ChangeGridValueFunction =()=> {
if(this.state.GridColumnsValue === true)
{
this.setState({
GridColumnsValue: false,
ButtonDefaultText : “CHANGE TO LISTVIEW”
})
}
else{
this.setState({
GridColumnsValue: true,
ButtonDefaultText : “CHANGE TO GRIDVIEW”
})
}
}
|
7. Create another function GetGridViewItem(). We would call this function on FlatList item press and show the selected value on screen using Alert.
|
1
2
3
4
5
|
GetGridViewItem(item){
Alert.alert(item);
}
|
8. Create a If condition inside render’s block . In this block we would check the Show and hide the ActivityIndicator according to isLoading State.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return ( )
}
|
9. Create a Root View in render’s return block. Now make a FlatList and render the JSON data inside FlatList.
|
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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
renderItem={({item}) => <View style={{flex:1, flexDirection: ‘column’, margin:1}}>
<Image style={styles.ImageComponentStyle} source = {{ uri: item.flower_image_url }} />
<Text onPress={this.GetGridViewItem.bind(this, item.flower_name)} style={styles.ItemTextStyle} numberOfLines={1} >{item.flower_name}</Text>
</View>
}
numColumns = { this.state.GridColumnsValue ? 1 : 2 }
key = {( this.state.GridColumnsValue ) ? ‘ONE COLUMN’ : ‘TWO COLUMN’ }
keyExtractor={(item, index) => index}
/>
</View>
);
}
|
10. Now make the CHANGE TO GRIDVIEW Button using TouchableOpacity. We would set the Button above text using ButtonDefaultText State.
|
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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
renderItem={({item}) => <View style={{flex:1, flexDirection: ‘column’, margin:1}}>
<Image style={styles.ImageComponentStyle} source = {{ uri: item.flower_image_url }} />
<Text onPress={this.GetGridViewItem.bind(this, item.flower_name)} style={styles.ItemTextStyle} numberOfLines={1} >{item.flower_name}</Text>
</View>
}
numColumns = { this.state.GridColumnsValue ? 1 : 2 }
key = {( this.state.GridColumnsValue ) ? ‘ONE COLUMN’ : ‘TWO COLUMN’ }
keyExtractor={(item, index) => index}
/>
<TouchableOpacity
style={styles.ButtonStyle}
activeOpacity = { .5 }
onPress={this.ChangeGridValueFunction} >
<Text style={styles.ButtonInsideTextStyle}> {this.state.ButtonDefaultText} </Text>
</TouchableOpacity>
</View>
);
}
|
11. Create CSS Styles for Root View, Flat List and Text component and Image component.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 5,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
ImageComponentStyle: {
justifyContent: ‘center’,
flex:1,
alignItems: ‘center’,
height: 100,
backgroundColor: ‘#4CAF50’
}
,
ItemTextStyle: {
color: ‘#fff’,
padding: 10,
fontSize: 18,
textAlign: ‘center’,
backgroundColor: ‘#4CAF50’,
marginBottom: 5
},
ButtonStyle: {
marginTop:10,
paddingTop:15,
paddingBottom:15,
backgroundColor:‘#FF9800’,
width: ‘100%’,
height: 50
},
ButtonInsideTextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
12. 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Platform, Text, FlatList, TouchableOpacity, Alert, ActivityIndicator, Image } from ‘react-native’;
export default class App extends Component{
constructor()
{
super();
this.state = {
GridColumnsValue: true,
ButtonDefaultText: ‘CHANGE TO GRIDVIEW’,
isLoading: true
}
}
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.php’)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
ChangeGridValueFunction =()=> {
if(this.state.GridColumnsValue === true)
{
this.setState({
GridColumnsValue: false,
ButtonDefaultText : “CHANGE TO LISTVIEW”
})
}
else{
this.setState({
GridColumnsValue: true,
ButtonDefaultText : “CHANGE TO GRIDVIEW”
})
}
}
GetGridViewItem(item){
Alert.alert(item);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
renderItem={({item}) => <View style={{flex:1, flexDirection: ‘column’, margin:1}}>
<Image style={styles.ImageComponentStyle} source = {{ uri: item.flower_image_url }} />
<Text onPress={this.GetGridViewItem.bind(this, item.flower_name)} style={styles.ItemTextStyle} numberOfLines={1} >{item.flower_name}</Text>
</View>
}
numColumns = { this.state.GridColumnsValue ? 1 : 2 }
key = {( this.state.GridColumnsValue ) ? ‘ONE COLUMN’ : ‘TWO COLUMN’ }
keyExtractor={(item, index) => index}
/>
<TouchableOpacity
style={styles.ButtonStyle}
activeOpacity = { .5 }
onPress={this.ChangeGridValueFunction} >
<Text style={styles.ButtonInsideTextStyle}> {this.state.ButtonDefaultText} </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 5,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
ImageComponentStyle: {
justifyContent: ‘center’,
flex:1,
alignItems: ‘center’,
height: 100,
backgroundColor: ‘#4CAF50’
}
,
ItemTextStyle: {
color: ‘#fff’,
padding: 10,
fontSize: 18,
textAlign: ‘center’,
backgroundColor: ‘#4CAF50’,
marginBottom: 5
},
ButtonStyle: {
marginTop:10,
paddingTop:15,
paddingBottom:15,
backgroundColor:‘#FF9800’,
width: ‘100%’,
height: 50
},
ButtonInsideTextStyle:{
color:‘#fff’,
textAlign:‘center’,
}
});
|
Screenshot in Android app :
Screenshot in iOS device:
Also Read :
React Native Create Ellipsis Clipped Text in React Native iOS Android
React Native Enable Disable TextInput Programmatically Android iOS
Set onClickListener onPress on Button in React Native Android iOS
React Native Set TextInput maxLength Validation iOS Android Example
React Native Collapsible Animated Text View with Slide up Slide down Animation
