React Native Create Custom JSON ListView with Multiple Items Tutorial

This tutorial is the second part of JSON ListView with single Item From MySQL database Tutorial. In this tutorial we would going to create a fresh react native application with JSON data already inserted into MySQL database. This ListView data contain multiple students records which is a multi type data, like id, name, phone number and subject. So we would show Рrender Multiple Items of JSON data into each ListView item one by one.

What we are doing in this project ūüôā¬†

  1. Creating MySQL database with table.
  2. Insert some students record inside the db.
  3. Create PHP script to convert MySQL data into JSON data.
  4. Parse JSON data into React native android and iOS application.
  5. Set JSON data into ListView.

Contents in this project Create Custom JSON ListView with Multiple Items :

1. Create MySQL database on your hosting server.

2. Create a table inside MySQL database named as Student_Table . Student table holds 4 columns id, student_name, student_phone_number, student_subject.

3. Insert some random students records inside the table. I am inserting my M.C.A classmates name.

4. Create PHP Script to convert the MySQL db data into JSON form :

Now I am creating Two PHP files First one is DBConfig.php and second is StudentsList.php.

DBConfig.php :- This file contains your hosting server configuration like server host name, database name, database username and database password.

StudentsList.php :- This file fetch the MySQL table records and print them on screen in JSON form.

Code for DBConfig.php :

Code for StudentsList.php file :

Screenshot of JSON data after executing the StudentsList.php file :

5. Start a fresh React Native project. If you don’t know how then read my this tutorial.

6. Import AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform and TouchableOpacity component in your project.

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

8. Create function GetItem() to display the selected student name from ListView.

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

10. Create react native fetch web API inside the componentDidMount() function. This function would parse the JSON coming from Server using HTTP URL.

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

12.  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 falsethen would hide the ActivityIndicator .

13. Create a Parent View inside the default render’s return block.

14. Create ListView component inside the Parent View.

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.

TouchableOpacity : Call the GetItem() function on the onPress of TouchableOpacity so when user clicks any of the ListView item it would send the Student name with this function on onPress.

15. Create custom css class.

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

Screenshot in iOS device :

Screenshots in Android device :

Multiple Items

26 Comments

  1. Nice Tutorial Sir…

  2. I got an error that says : ” JSON Parse error: Unrecognized token ‘<' please help

    • Firas please check your DBConfig.php file is configured correctly .

      • yes you right Im using a Java EE Spring web app, the data that I was looking for were hidden cause of an error 401 so thats why React native showed me that error

  3. Hey bro! im wondering, this code aplies if i want to do the same with Flatlist?

  4. but if we don’t have any data into mysql will show error ..
    Syntax error : son parse error : unable to parse son string

    • In this case just check there is a value present on json’s 1st item and if there is no value then show a alert message.

  5. nice work, its good to get all react-native tutorials from one website

  6. this error is coming while i applied this same code

    null is not an object(evaluating’e.cloneWithRows’)

  7. hey how to find specific value into json data file ?
    for example in above example if i pass id “6” then it will be return name: “sonal” phone number: “1234567890” and subject: “english”
    how to implement this?

  8. any mathod or function to convert responceJson to Array in react native?

  9. Thanks bro. Great work. Dont stop yours posts

  10. Helpfull tutorial. Go ahead and thanks alot.

  11. Hai bro, i followed your codes.but listview items not showing anything without no errors

  12. I am using firebase and following your code, In ComponentDidMount() I have my firebase code whenever I try to retrive data from firebase it says: TypeError: TypeError: undefined is not an object (evaluating ‘l.rowIdentities’)

Leave a Reply

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