React Native JSON Parsing ListView From MySQL Database Android iOS

In this tutorial we would going to learn about parsing JSON data in react native application using Fetch API networking library. Fetch API is one of the common API’s used by react native developers. So using this API we would retrieve the complete JSON object from MySQL database server. The MySQL database data is convert into JSON fromat using PHP. So let’s get started ūüôā

Contents in this project JSON Parsing ListView :

 

1. Create Database + Table on your online hosting server or local server :

Create a fresh table inside your database named as FruitsNameListTable . The table has two columns id and fruit_name.

2. Insert Records into Table :

Next step is to insert some records into your table for example i am creating table to store different type of fruit names. Below is the screenshot of my table after inserting records.

3. Create PHP file code to retrieve data from MySQL database and convert into JSON.

Now create Two PHP files First one is DBConfig.php and second is FruitsList.php.

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

FruitsList.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 file :

Code for FruitsList.php file :-

Output of JSON after running the URL should look like this :

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

5. Add AppRegistry , StyleSheet , ActivityIndicator , ListView , Text , View , Alert  component in import block.

6. Create constructor in your class with props and set this.state isLoading: true.

isLoading: true  tells us whether our JSON data is loading from server or not so we can hide the Activity indicator.

7. Create a function to display the JSON listview selected item. The function name is GetItem with fruit_name parameter, than the function name should look this this : GetItem (fruit_name) .

This function is used to show the selected item from ListView in alert message.

8. Create componentDidMount()  method. This is a inbuilt method.

9. Create Fetch API network request in componentDidMount()  method.

Using Fetch method first we can pass our HTTP URL from which the JSON is coming. Then using response object we have hold the response coming from server. Now fill the JSON object items to ListView rows one by one.

10. Create ListViewItemSeparator  method.

Using this method we would show a simple item separator line between ListView items.

11. Inside the render()  block put a if condition checking on this.state.isLoading and if the this.state.isLoading is true then show the  <ActivityIndicator /> .

12. Create custom css class named as MainContainer and rowViewContainer just above the AppRegistry.registerComponent line.

MainContainer : is for complete layout screen.

rowViewContainer : is to modify each ListView element.

13. Add View as parent view in render’s return block and Call the MainContainer class into View.

14. Add ListView  component in View.

dataSource : Adding the JSON data into ListView.

renderSeparator : Display a border between items using ListViewItemSeparator()  .

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

Screenshots:

JSON

30 Comments

  1. can we do the same with List->ListItem ?

  2. react native navigation is not working on my project (i am using windows 7 32 bit pc) .I followed steps from reactnavigation.org if you have any solution .Please help

  3. Hi,
    Can we add these items to picker.
    Please tell how can we do that if i use Picker instead of listview here.
    Please reply ASAP.

  4. How can we achieve pagination in this listview i.e if i have to show oonly 5-10 items per page. ?

  5. Admin, Have you posted the tutorial ?

  6. thank you so much, it completely works for me

  7. let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    can you please tell me about this line ?

    • rowHasChanged is basically called for each data source rows entry each time you change that data source rows, then only the rows that get changed are re-render (when rowHasChanged returned true).

  8. can i use ip address and port in this, like — 192.162.255.111:6356/ .. ?

  9. network request failed? what’s the problem bro?

  10. Sir whenever i update database data..In the app the data will be updated or if not how to update the data

  11. hello!
    How can I change colour of row (listView) if I select it ?

  12. Truly when someone doesn’t understand afterward its up to other users that they will assist, so here it happens.

  13. JSON Parse error: Unrecognized token ‘<'? How i can fix it?

  14. Invariant Violation: ListView has been removed from React Native. See https://fb.me/nolistview for more information or use deprecated-react-native-listview.

  15. Hi admin, I am trying to do something like this, but instead of retrieving data, I want to insert the selected options in a mysql database, I’m using the example given in this tutorial:

    https://www.npmjs.com/package/react-native-multiple-select

    I want to create a dinamic button, if there is no option selected, the button will not be visible to user, but if the user selects one or more options, the button will apear on the screen, and after pressing the button I want to insert the items selected in a mysql database, I’m new in rect native and I’ve searched in google about this, but I couldn’t find any solution, could you give an idea how to do this?
    Thanks.

Leave a Reply

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