React Native Connect Run Apps Using Localhost PhpMyAdmin MySQL Database System

As most of our reader requested we are finally posting this tutorial to¬†Connect Run Apps Using Localhost PhpMyAdmin MySQL Database System in react native, Using this tutorial each of us can easily test our newly build react native apps with MySQL database using JSON. The main purpose of this tutorial is to making and testing the apps on our Local system so there is no need to create and upload all the stuff online, now we can test a complete JSON ListView application offline on local system but they do work like online. So let’s get started ūüôā .

Note :  All the steps written in this tutorial must be follow and you need to download and install the XAMPP software.

Contents in this project Connect Run Apps Using Localhost PhpMyAdmin MySQL Database System in React Native iOS Android:

1. Before getting started we need to download and install the latest version on XAMPP software, This is very important for present tutorial because XAMPP gives the ability to our system by making and working like a Localhost computer, Here is the link.

2. After successfully downloaded we need to install it like any other normal software, Now after done installing start the XAMPP and start Apache and MySQL services . Now your system is ready to use like a local host computer.

3. Creating MySQL Database and Table for application :

1. Open your web browser(Mozilla Firefox or Google chrome) and type  localhost/phpmyadmin in address bar to open the MySQL database panel.

2.Click on the New link to make a new MySQL database on your local system.

3. Now enter the database name as Flowers and hit the Create button.4. Now our database is successfully created, Next step is to crate table in your MySQL database. So select your newly created database from side panel.5. Enter table name as flowers_name and select column as 2 .6. Now we need to enter the table column names, column data type, length and select id as primary key with Auto increment.7. Here you go now the table has been created successfully, Now we need to insert some data inside it. So select your table and click on Insert button.8. Insert some records as i did in below screenshot and hit the Go button.

Screenshot of Table after inserting some records:

4. Create PHP Script to Convert MySQL database data into JSON :

Next step is to create 2 PHP files named as DBConfig.php and FlowersList.php .

DBConfig.php : This file contain all the useful information like Database name, database username, database password and database host name.

FlowersList.php : This file would convert the MySQL database data into JSON format.

Code for DBConfig.php file:

Code for FlowersList.php file:

5. Now we need to make a folder named as Flowers_Site inside C:\xampp\htdocs\ folder.

6. Copy both DBConfig.php and FlowersList.php file inside the Flowers_Site folder.

8. Here you go, next step is to open the Command Prompt and execute ipconfig command. This command would show us our local computer system IP Address.

Note : If you are connected to WiFi then select the IPv4 address under Wireless LAN adapter Wi-Fi. If you are connected to LAN then selected IPv4 address under Ethernet adapter.

9. After getting the IP Address and copied all the files into the folder our JSON is ready to parse with react native app but we need to make sure the URL is working correctly so we need to open the URL in our web browser  http://192.168.2.103/Flowers_Site/FlowersList.php , This is my URL you need to put your local IP address here. We would use this URL in our react native app.

10. Start Coding for App :

1. Import StyleSheet, ActivityIndicator, ListView, Text, View and Alert component in your project.

2. Create constructor() in your project and make a State named as isLoading with true Boolean value, This state is used to show Activity loading indicator while loading data from server.

3. Create componentDidMount() method and inside it we would make the fetch API to parse JSON from local server.

4. Create a function named as GetItem() to show the selected flower name when user click the ListView item.

5. Create another function named as ListViewItemSeparator(), This function would render a horizontal line between each ListView element.

6. Put a IF condition inside render’s block, using this we would show the Activity Indicator with State value.

7. Creating the ListView component inside the render’s return block.

8. Creating Style.

Complete source code for App.js File :

Screenshots:

Connect Run Apps Using Localhost PhpMyAdmin

37 Comments

  1. i try this, but always “Network request failed”, how to solve it ?

  2. is this possible with pdo

  3. admin can you please make a tutorial for mysql for where query in react native with mysql

  4. i have problem.. the json parse error: Unrecognized token ‘<'
    i always got this error after try copy your code.. i try it using ip address to real devices.

  5. sir..the JSON parse error: unrecognized token ‘<'… I make the step same with you but I got this kind of error.

  6. Hi boss, may i know why its come out JSON Parse error: Unrecognized token ‘<'

  7. Thanx Man l truely appreciate

  8. May i know if i want insert View component which same as shopping card, how could i do?

  9. my apps is running but its only display blank listview can you help me?

    • Hanif you are using my database(Which i have created in example) or your own, If there is no error then maybe you should put your data name in rowData.flower_name (Here you need to put your table column name which you want to show in listview) .

  10. { [TypeError: Network request failed]
    03-20 18:01:56.472 4749 5006 I ReactNativeJS: line: 24080,
    03-20 18:01:56.472 4749 5006 I ReactNativeJS: column: 31,
    03-20 18:01:56.472 4749 5006 I ReactNativeJS: sourceURL: ‘http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false’ }

  11. Hi, someone got save data from a DB on a local variable

  12. When I put a URL that you provided without a tutorial, but using the IP of my computer, it says that the object was not found. Would you tell me why?

  13. I managed to solve. Thanks

  14. I got this error
    Network request failed
    – node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:504:29 in onerror
    – node_modules\event-target-shim\lib\event-target.js:172:43 in dispatchEvent
    – … 8 more stack frames from framework internals

  15. Can you place the folder for the app project anywhere in PC or must it be within the folder where php files are in htdocs?

  16. Does this work with Expo?

  17. Help me with the following problem:
    ‚ÄúNetwork request failed‚ÄĚ

Leave a Reply

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