React Native Custom JSON ListView With Images and Text Example

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 :

Code for FlowersList.php file :

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.

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.

9. Create GetItem named function just after the constructor close. This function is used to display the ListView clicked item value.

10. Create componentDidMount() method after GetItem function. This is a react native’s inbuilt method.

11. Create react native fetch web API inside the componentDidMount() function. This function would parse the JSON.

12. Create ListViewItemSeparator function just after the componentDidMount() function. This function is used to show a separator line between each ListView element.

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 .

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.

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.

16. Complete source code for / index.ios.js file.

Screenshots in iOS device :

Custom JSON ListView

Screenshot in iOS device :


  1. I had been waiting for this things….Thank you so much.

  2. 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?

  3. 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(‘’)

  4. WOW… Thank you very much sir 🙂

  5. Sir.. please implement with card in nativebase

  6. 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

  7. Purba Phalguni Mishra

    Thank you very much. It is very much helpful admin 🙂

  8. Thank you admin,your tutorial very helpful.

  9. 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
    or atleast just the listview part
    appreciated a lot

  10. make tutorial about uploading image to json pleas

  11. hey, after going through code only names are being displayed images are not visible and their are no errors

  12. Is it possible to fetch a blob image from local host xampp server or u just need to use the file transfer

  13. 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

  14. 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.

  15. how to make insertion in image mysql database

Leave a Reply

Your email address will not be published. Required fields are marked *