As you can see in our previous tutorials we have created several types of JSON flatlist and now we are creating completely dynamic custom JSON FlatList with Images and Text component in react native application. The images is uploaded on our online web hosting server and images URL(Path) along with image name is stored inside MySQL database. We are using PHP scripting language as a server language in order to convert MySQL database data into JSON format because react native supports JSON format and we should convert all the MySQL data into JSON in order to use inside react native app. So let’s get started 🙂 .
Contents in this project Create JSON FlatList with Images and Text in react native iOS Android react native app:
1. We already have define all the process of creating MySQL database, Storing images path along with their names in MySQL and converting MySQL data into JSON in our previous ListView tutorial, So read this tutorial Here before going further because we are using the same database and JSON.
Screenshot of JSON after running FlowersList.php file in web browser(Google chrome):
2. Import StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert and YellowBox components in your project’s class.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert, YellowBox } from 'react-native'; |
3. Create constructor() in your class and make a Boolean State named as isLoading and set its default value as True. This state is used to show and hide the ActivityIndicator on data loading. We would also putting the YellowBox warning ignoring code in order to remove the Yellow box warning message of Warning componentwillmount is Deprecated.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
constructor(props) { super(props); this.state = { isLoading: true } YellowBox.ignoreWarnings([ 'Warning: componentWillMount is deprecated', 'Warning: componentWillReceiveProps is deprecated', ]); } |
4. Create a function named as GetItem() with flower_name parameter, This function is called on FlatList single item click event and display us the selected flower name in Alert message.
|
1 2 3 4 5 |
GetItem (flower_name) { Alert.alert(flower_name); } |
5. Create a function named as FlatListItemSeparator(), This function would render a horizontal .5 pixel line between each FlatList item.
|
1 2 3 4 5 6 7 8 9 10 11 |
FlatListItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } |
6. Creating a function named as webCall(), Inside this function we would call the JSON using fetch() web API method. We are calling the online URL and parse the fetched JSON in this function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
webCall=()=>{ 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); }); } |
7. Creating componentDidMount() inbuilt function and call the above webCall() function. This function would automatically calls on app startup time so when the app stars it will parse the JSON.
|
1 2 3 4 5 |
componentDidMount(){ this.webCall(); } |
8. Creating a IF conditional block with isLoading state in render’s block, So if the state value is true then it will display the ActivityIndicator and when data loading is stop or done then it will hide the ActivityIndicator.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
render() { if (this.state.isLoading) { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <ActivityIndicator size="large" /> </View> ); } return ( ); } |
9. Creating the FlatList component inside render’s return block to show JSON FlatList with Images and Text.
data : Setting up the dataSource state inside it.
ItemSeparatorComponent : Calling the FlatListItemSeparator() function to show separator line.
|
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 |
render() { if (this.state.isLoading) { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <ActivityIndicator size="large" /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList data={ this.state.dataSource } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <View style={{flex:1, flexDirection: 'row'}}> <Image source = {{ uri: item.flower_image_url }} style={styles.imageView} /> <Text onPress={this.GetItem.bind(this, item.flower_name)} style={styles.textView} >{item.flower_name}</Text> </View> } keyExtractor={(item, index) => index.toString()} /> </View> ); } |
10. 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 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 5, marginTop: (Platform.OS === 'ios') ? 20 : 0, }, imageView: { width: '50%', height: 100 , margin: 7, borderRadius : 7 }, textView: { width:'50%', textAlignVertical:'center', padding:10, color: '#000' } }); |
11. 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 |
import React, { Component } from 'react'; import { StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert, YellowBox } from 'react-native'; export default class Project extends Component { constructor(props) { super(props); this.state = { isLoading: true } YellowBox.ignoreWarnings([ 'Warning: componentWillMount is deprecated', 'Warning: componentWillReceiveProps is deprecated', ]); } GetItem (flower_name) { Alert.alert(flower_name); } FlatListItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } webCall=()=>{ 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); }); } componentDidMount(){ this.webCall(); } render() { if (this.state.isLoading) { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <ActivityIndicator size="large" /> </View> ); } return ( <View style={styles.MainContainer}> <FlatList data={ this.state.dataSource } ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem={({item}) => <View style={{flex:1, flexDirection: 'row'}}> <Image source = {{ uri: item.flower_image_url }} style={styles.imageView} /> <Text onPress={this.GetItem.bind(this, item.flower_name)} style={styles.textView} >{item.flower_name}</Text> </View> } keyExtractor={(item, index) => index.toString()} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 5, marginTop: (Platform.OS === 'ios') ? 20 : 0, }, imageView: { width: '50%', height: 100 , margin: 7, borderRadius : 7 }, textView: { width:'50%', textAlignVertical:'center', padding:10, color: '#000' } }); |
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native Load Local HTML File Place Inside App in WebView
React Native calculate child view X Y Dimensions dynamically on Button Click iOS Android Example
Floating Action Button FAB in React Native Paper Chapter – 3
React Native Create App Intro Slider Welcome Walk-through Screen
Example of React Native Countdown Component Timer
Can you provide a tutorial on how to send remote push notifications to desired user using mysql and php?
Sorry Shyam currently there are no proper component available in react native for push notification but when it came i will sure post tutorial regarding to your query.
Bro can you do me a favour ….
I am stuck at how to put special symbol like {, ( & etc in react native ….is there any way to do that
Manpal you need to put special symbol in Text component ?
Bro, im having a situation, when the app tries to load data says JSON Parse error: unrecognize token <
but when i test the json url, the values are correct, what am i doing wrong?
you can test the data here: http://solutiontech.eshost.com.ar/1/data/
bro send your code on our email : [email protected]
Sorry for the delay jeje, i can’t, my client strongly told me that i cannot share the code even to get help. i will give you a pic of the issue better.
bro, i curently am learning and using listview
but i found out listview is soon deprecated
should i migrate all my code to flatlist ?
Yes you should, but the deprecation will take some time so there is no need to hurry.
is there any way to extract json data without flatlist?
i want to extract json data for dispalying in image for creating image swiper
Yes, Anil but can you explain your question more briefly ?
here is my code snippet.
{this.state.TempImageName}
i trying to simply fetch json data and pass json object to image and text field.
here is my code snippet.
http://txt.do/dzgur
i trying to simply fetch json data and pass json object to image and text field.
Admin Bro,
Please make a tutorial on “How to take image from mobile camera” or gallery and insert into mysql database, by using online server.
And CRUD operation with image…..
Sure Usmaan we are working on it 🙂 .
Thanks for immediate reply Admin,
we will be waiting……
how will i assign two images in a row then next two images in next row using flatlist..
Nazeer you can make the FlatList as Gridview read my this tutorial this would help you : https://reactnativecode.com/creating-image-gallery/
hello
i’m having an issue i think it will be better if you help
did you publish a tutorial on react native dynamic image slider within php
it’s like a image coursel requesting image from database
Sure, i will post dynamic image slider tutorial with PHP soon 🙂 .
mysql json After showing the image and text when we click on them to open the detail page and in this detail the picture is large and how we can do it
Just set the image width and height or you can read my this post to scale the image automatically https://reactnativecode.com/auto-scale-image-width-height/
Hi Bro,
As we are getting images from the json object in the same way can we get dynamic TextInput fields , and other fields to ? through the json value? I’m Looking for something like this
https://formbuilder.online/
Good, Thank’s
Welcome 🙂 .
can u plz share flowerlist.php used in this tutorial?
It’s not given in this tutorial. It will be very helpful for me .
Kamal read my this tutorial here i have the PHP file you need : https://reactnativecode.com/custom-json-listview-images-text-api-android-ios/ .