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:
Thank’s for all the tutorials!
i’m learning React Native trough this website and waiting for offline/embedded database tutorial, like sqlite. can React Native do it?
Yes Andy react native can do it and i will soon publish a new tutorial regarding to your query.
hello admin, i followed the tutorial but it doesnt get picture
its error for the picture
can i ask for some help
Yes you can, what error is coming ?
Thanks for great tutorial for beginners
Welcome Ravi 🙂 .