React Native Fetch API Tutorial to Insert Into MySQL Database Using PHP iOS Android Example

React Native’s Fetch API is the most common and default Networking API used to send data from react native application to online server side MySQL database using PHP. Fetch API is mostly similar as¬†XMLHttpRequest API. The Fetch API provides a JavaScript interface for accessing and transferring different parts of data using a secure HTTP pipeline. So in this tutorial we would going to create a react native app along with Networking Fetch API Tutorial to Insert Into MySQL Database Using PHP iOS Android Example. So let’s get started ūüôā .

What we are doing in this tutorial :

We are simply inserting data from react native iOS and Android app to our online server side MySQL database using PHP.

  • Database Used in this tutorial : MySQL
  • Server Side Scripting Language : PHP
  • API used in APP : Fetch Networking API

Contents in this project React Native Fetch API Tutorial to Insert Into MySQL Database Using PHP:

1. Create a MySQL Database and Table on your server .

Make New MySQL database or use your existing one. Create a Table inside MySQL database named as Products_Table along with 4 columns product_id, product_name, product_number and product_details. We would make the product_id as primary key with Auto Increment. See the below screenshot for more details.

Screenshot of Table after creating :

2. Create Server side code using PHP to receive data from App and Insert into MySQL database table :

We have to create 2 individual files to perform this functionality First is DBConfig.php and Second is Insert_Product.php .

DBConfig.php : This file contain all the important information about your MySQL server like Server Host name, server password, server user name and database name.

Insert_Product.php : This file would receive the sent data from Fetch API and insert that data into MySQL database.

Code for DBConfig.php File :

Code for Insert_Product.php file :

3. Import StyleSheet, View, TextInput, Text, ActivityIndicator and TouchableOpacity component in your react native project.

4. Create constructor() in your project’s class and make 4 States inside it named as¬†Product_Name, Product_Number, Product_Details and ActivityIndicator_Loading.

Product_Name : Holds the Product name entered inside Product name TextInput.

Product_Number : Holds the Product Number entered inside Product Number TextInput.

Product_Details : Holds the Product Details entered inside Product Details TextInput.

ActivityIndicator_Loading : Used to show and hide the Activity Indicator .

5. Create a function named as Insert_Data_Into_MySQL(). Inside this function we would create create the Fetch Networking API code to send the data from App to MySQL database. We would fist set the ActivityIndicator_Loading as true to show the ActivityIndicator on middle of screen while sending data.

  • Method Used to send data using Fetch API is POST.
  • headers : Tells the server that the Data is in JSON Object form.
  • body : Contain all the Data with a unique identifier.

6. Create a Root View in render’s return block. This View would hold all the TextInput and¬†TouchableOpacity component.

7. Create 3 TextInput component inside the Root View.

placeholder : Is used to show hint inside the Text Input.

style : Is used to call the custom CSS style class.

underlineColorAndroid : Hide the TextInput’s own underline.

onChangeText : Store the TextInput inside typed text into State.

8. Create a Custom Button using TouchableOpacity component. We would call the Insert_Data_Into_MySQL() function on this button onPress event.

8. Create ActivityIndicator inside a Curly bracts block. The ActivityIndicator will only visible on if the ActivityIndicator_Loading state value is True. So it will show on screen at Data inserting time and when the response came from server then it will hide the ActivityIndicator. We are using the Ternary operator to perform this functionality.

9. Create CSS Style for All components.

10. Complete source code for App.js File :

Screenshot in Android device :

Fetch API Screenshots in iOS device :

35 Comments

  1. Hello sir, may I know how to set up database with react native does it using such xamp, mamp or else. Thank you.

    • Ami you can create online database using PhpMyAdmin(Xampp) and to make local database we have to use SQLite.

      • I just follow this coding, everything is working but after filling data nothing going to database in table…what to do… iam using ubuntu with android phone

  2. Didn’t understand nothing, where i am suposed to put these files?

  3. can you please make tutorial on FIREBASE WITH REACT NATIVE
    THANKS IN ADVANCE

  4. nice tutorial .but facing some problems after click button network request failed.i followed all steps .

  5. Hi admin thanks for the tutorials……

    How to get http://…………… for my own project(fetch(‘https://reactnativecode.000webhostapp.com/Insert_Product.php’,)

    please Help…

  6. Hi ,
    I’m getting the network request failed error .
    I followed all your steps

  7. I want to create a form in react native and after data filling want to data save on mysql database using node.js…is it possible?

  8. Warning: mysqli_connect(): (HY000/1044): Access denied for user ”@’localhost’ to database ‘api_qllt’ in C:\xampp\htdocs\phpAPI\DangKyNhaNghi.php on line 7

    Warning: mysqli_query() expects parameter 1 to be mysqli, boolean given in C:\xampp\htdocs\phpAPI\DangKyNhaNghi.php on line 30
    Something Went Wrong
    Warning: mysqli_close() expects parameter 1 to be mysqli, boolean given in C:\xampp\htdocs\phpAPI\DangKyNhaNghi.php on line 48

  9. Hi there, is it similar with this if I have a list of product(data) retrieve from table A of database and then when I click inside the product I will able to view the details of the product and there is an add button whic I can add the details of the product to table B in database. Is it able to do if I slightly modify this tutorial code?

  10. hello bro.. actually i am using expo as an emulator to run my react native app, so folowing your code, i am having issues with the connection… i feel there is something more..
    Thanks in advance

    • Bro if you are using Expo online website emulator then it will give you error because our PHP files and MySQL database are in local host computer and expo emulator is not connected to our local host server.

      • Is it possible to connect to a MySQL database while using expo online website emulator? Do you have to set up a local server on your computer for this to work?

  11. WHY!!! this is not working when running on real device.
    Network request failure is showing!!!!

  12. Greetings,
    Thanks for the amazing tutorial.
    I am receiving a JSON Parse error: Unexpected Identifier “Something”
    I believe that the app is trying to reflect the result that something went wrong.
    I am running react native from android server using node.js and my php files are sitting on my actual website server. Is there an issue with DBconfig possibly, particularly do I need to list the HostName differently than just “localhost” ?
    Thank you for your help.

    • JohnA most of web servers has the same hostname as localhost but many of them has their own hostname so you need to ask your hosting provider about the hostname.

  13. It seems as though my app did not post the information and the echo statement was not in JSON format. However, for some reason my app is not posting the information to the table. Any help would be appreciated. Thank you

Leave a Reply

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