Hello Guys 🙂 , Creating custom JSON ListView with Images and Text is most probably used in all type of android and iOS applications. It is used to show multiple amount of data with images. Like product list in which one side its show the product image and other side product name. So in this tutorial we would going to create an react native application to show Custom JSON ListView With Images and Text.
What we are doing in this project – A Little Description of Tutorial 😎 :
- Creating MySQL database.
- Creating Table in MySQL database.
- Upload Images on Hosting server.
- Save Uploaded images URL inside MySQL database.
- Make PHP script to convert MySQL data into JSON.
- Parsing JSON data into ListView in App.
- Populating Image from image URL and set into Image component.
- Populating Text from text objects and set into Text component.
- Show Images + Text with combination into ListView.
Contents in this project Custom JSON ListView With Images and Text Example Tutorial :
1. Create MySQL database on your hosting server.
2. Inside that MySQL database create a fresh table named as Flowers_Info_List . The table contain 3 columns id, flower_name and flower_image_url. The table should look like below screenshot :
3. Open File manager of your hosting server and create a new folder named as images and upload all of your images inside that folder.
4. Save image URL inside your Table with specific image name. After done saving all images path in table the table should look like below screenshot:
5. Create PHP script to convert MySQL db data into JSON data :
Now create Two PHP files First one is DBConfig.php and second is FlowersList.php.
DBConfig.php :-Â This file contains your hosting server configuration like server host name, database name, database username and database password.
FlowersList.php :-Â This file fetch the MySQL records from table and convert them into JSON than ECHO them on screen, so they can be accessible.
Code for DBConfig.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php //Define your host here. $HostName = "localhost"; //Define your database name here. $DatabaseName = "id2070055_reactnativedb"; //Define your database username here. $HostUser = "id2070055_reactnativedb_user"; //Define your database password here. $HostPass = "1234567890"; ?> |
Code for FlowersList.php 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 |
<?php include 'DBConfig.php'; // Create connection $conn = new mysqli($HostName, $HostUser, $HostPass, $DatabaseName); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } // Creating SQL command to fetch all records from Table. $sql = "SELECT * FROM Flowers_Info_List"; $result = $conn->query($sql); if ($result->num_rows >0) { while($row[] = $result->fetch_assoc()) { $item = $row; $json = json_encode($item); } } else { echo "No Results Found."; } echo $json; $conn->close(); ?> |
Screenshot of JSON after running FlowersList.php file :
6. Start a fresh React Native project. If you don’t know how then read my this tutorial.
7. Add AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Image and Platform component.
|
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert,Image, Platform} from 'react-native'; |
8. Create constructor in project’s class with props and set isLoading variable state true. The isLoading variable is used to control ActivityIndicator show and hide state.
|
1 2 3 4 5 6 |
constructor(props) { super(props); this.state = { isLoading: true } } |
9. Create GetItem named function just after the constructor close. This function is used to display the ListView clicked item value.
|
1 2 3 4 5 |
GetItem (flower_name) { Alert.alert(flower_name); } |
10. Create componentDidMount() method after GetItem function. This is a react native’s inbuilt method.
|
1 2 3 4 |
componentDidMount() { } |
11. Create react native fetch web API inside the componentDidMount() function. This function would parse the JSON.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FlowersList.php') .then((response) => response.json()) .then((responseJson) => { let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState({ isLoading: false, dataSource: ds.cloneWithRows(responseJson), }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } |
12. Create ListViewItemSeparator function just after the componentDidMount() function. This function is used to show a separator line between each ListView element.
|
1 2 3 4 5 6 7 8 9 10 11 |
ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } |
13. Create render() function after ListViewItemSeparator function, Now put a if condition inside it. Using this if condition we would check the isLoading value and if its true then we show the ActivityIndicator and if its false then would hide the ActivityIndicator .
|
1 2 3 4 5 6 7 8 |
render() { if (this.state.isLoading) { return ( <View style={{flex: 1, paddingTop: 20}}> <ActivityIndicator /> </View> ); } |
14. Create return block inside the render function. Now put a View as parent View, Â Inside the View create ListView component.
dataSource : This would set  the JSON parse data into ListView.
renderSeparator : Call the ListViewItemSeparator function to show a separator line between ListView items.
renderRow={(rowData) => : This would used to show component inside the ListView. For example in our case we would show Image component and Text component in ListView.
|
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 |
render() { if (this.state.isLoading) { return ( <View style={{flex: 1, paddingTop: 20}}> <ActivityIndicator /> </View> ); } return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderSeparator= {this.ListViewItemSeparator} renderRow={(rowData) => <View style={{flex:1, flexDirection: 'row'}}> <Image source = {{ uri: rowData.flower_image_url }} style={styles.imageViewContainer} /> <Text onPress={this.GetItem.bind(this, rowData.flower_name)} style={styles.textViewContainer} >{rowData.flower_name}</Text> </View> } /> </View> ); } |
15. Create custom css style class.
MainContainer : Setup the complete View as parent.
imageViewContainer : Style the Image component present inside the ListView.
textViewContainer : Style the Text component present in ListView.
|
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 |
const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 5, paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, imageViewContainer: { width: '50%', height: 100 , margin: 10, borderRadius : 10 }, textViewContainer: { textAlignVertical:'center', width:'50%', padding:20 } }); |
16. Complete source code for index.android.js / index.ios.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 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert,Image, Platform} from 'react-native'; class Mainproject extends Component { constructor(props) { super(props); this.state = { isLoading: true } } GetItem (flower_name) { Alert.alert(flower_name); } componentDidMount() { return fetch('https://reactnativecode.000webhostapp.com/FlowersList.php') .then((response) => response.json()) .then((responseJson) => { let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.setState({ isLoading: false, dataSource: ds.cloneWithRows(responseJson), }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } ListViewItemSeparator = () => { return ( <View style={{ height: .5, width: "100%", backgroundColor: "#000", }} /> ); } render() { if (this.state.isLoading) { return ( <View style={{flex: 1, paddingTop: 20}}> <ActivityIndicator /> </View> ); } return ( <View style={styles.MainContainer}> <ListView dataSource={this.state.dataSource} renderSeparator= {this.ListViewItemSeparator} renderRow={(rowData) => <View style={{flex:1, flexDirection: 'row'}}> <Image source = {{ uri: rowData.flower_image_url }} style={styles.imageViewContainer} /> <Text onPress={this.GetItem.bind(this, rowData.flower_name)} style={styles.textViewContainer} >{rowData.flower_name}</Text> </View> } /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1, margin: 5, paddingTop: (Platform.OS === 'ios') ? 20 : 0, }, imageViewContainer: { width: '50%', height: 100 , margin: 10, borderRadius : 10 }, textViewContainer: { textAlignVertical:'center', width:'50%', padding:20 } }); AppRegistry.registerComponent('Mainproject', () => Mainproject); |
Screenshots in iOS device :
Screenshot in iOS device :
I had been waiting for this things….Thank you so much.
Welcome Rohit .
But now, what should i do to store image in hosting server’s/ file manager’s/ image folder through our app after capturing an image by Camera?
Rohit you need to manually upload the image on your server , but soon i will publish a new tutorial in which i will explain about uploading image on server from app.
Finally i got it.. how can i show it to you?
Rohit you can mail it to me on [email protected]
is this tutorial already published?
Which tutorial OWA ?
Upload image from app to server / database
Sorry OWA i have not make tutorial on this topic because there is a problem i am facing on Server side coding in PHP.
Hi Admin,
please tell the name following tutorial….
“How to upload image on server from app”
Usmaan currently we are working on image upload tutorial, there is a bit problem we know how to upload image on server but we are facing some problem on saving uploaded image URL with its name into MySQL database although the image would uploaded successfully.
i am using wamp server to host DBConfig.php , FlowersList.php and
Flowers_Info_List .if i use my local host the what i need to plase(code)
insted of return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.php’)
Jithin you need to place all the files inside your Wamp -> htdocs ->yourFolderName . Now Find your System’s IP address using IPCONFIG command. Now after finding your system’s IP , Use this type of URL http://YourSystemIpAddress/Flowers_Info_List.php.
thank you
Welcome Jithin 🙂 .
WOW… Thank you very much sir 🙂
Welcome Imas 🙂 .
Sir.. please implement with card in nativebase
Sure bro i will soon publish new tutorial with Native Base.
while clicking on the list item ( insted of showing alert) it should navigate to another page which fetch more information about the item using json (like amazon product list) can u possible to do a tutorial on that
Jithin i have posted JSON Filter Tutorial : https://reactnativecode.com/click-filter-json-selected-listview-data-android-ios/ Enjoy 🙂 .
thank you
Welcome Jithin 🙂 .
Thank you very much. It is very much helpful admin 🙂
Welcome Purba Phalguni Mishra 🙂 .
Thank you admin,your tutorial very helpful.
Welcome 🙂 .
hey there bro, your tutorial been very helpful
i feel embarrassed to ask this but i tried many times still havent got it
can you do UI tutorial like this https://dribbble.com/shots/2702731-Hotel-Booking-App-Design
or atleast just the listview part
appreciated a lot
Fery i will post the UI tutorial but i will take at least 1 week to post.
i appreciated a lot for all your support and efforts bro
god bless you more
Welcome Fery 🙂 .
make tutorial about uploading image to json pleas
Sure bro, i will soon publish tutorial on this topic .
thank you master, hopefully quickly made. i need it
hey, after going through code only names are being displayed images are not visible and their are no errors
Priya you are using my URL or your own ?
Is it possible to fetch a blob image from local host xampp server or u just need to use the file transfer
Yes JOSH its possible to fetch image for local system .
thank you so much for publishing this .
but i’m having some issue where for me i am trying yo fetch image in a different way where there on flower_image_url there is a name of the image which is on your personal computer in the specific folder how can i call that image
Apopo if your image is on personal computer then you cannot show in your app you have to put the image in your project inside some folder then you have to put the image URL into database from there you can access the image to call the image locally read my this tutorial this would help you : https://reactnativecode.com/get-image-from-local-resource/
did you publish a tutorial about search engine to query in mysql database with react native?
Yes i have posted tutorial on search, You can read it here : https://reactnativecode.com/add-search-bar-filter/ .
hello admin, i have applied this solution but getting only names are being displayed images are not visible and their are no errors.And i am using my url only.
Harshi if you are using your URL then you should also change the database field name in the code to fetch data properly.
how to make insertion in image mysql database
Abbas read my this tutorial this would help you : https://reactnativecode.com/upload-image-to-server-using-php-mysql/ .