React Native Insert Update Display Delete CRUD Operations MySQL DB

This tutorial is the fully advanced tutorial in react native because in this tutorial we would going to implement CRUD operations in react native android iOS applications. CRUD operations consist four type of major functions Add, Edit(Modify), Delete and View. So we would going to create a react native app with Insert Update Display Delete CRUD Operations From MySQL database using PHP.

What we are doing in this project :

We are creating a react native app with react-navigation library because without the react-navigation we cannot add multiple activities in our project. Now would insert student records in online MySQL database using PHP from our react native application. After that we would retrieve all those records into ListView in next activity. Now we would open the selected record into next activity and automatically fill each data into TextInput. We would also gives the option to delete the current selected data. So let’s get started 🙂 .

Project Description File Structure:

PHP Files in this project :

  1. DBConfig.php
  2. InsertStudentData.php
  3. ShowAllStudentsList.php
  4. UpdateStudentRecord.php
  5. DeleteStudentRecord.php

Activity classes in this project created in App.js file

  1. MainActivity
  2. ShowStudentListActivity
  3. EditStudentRecordActivity

Contents in this project Insert Update Display Delete CRUD Operations From MySQL DB in react native using PHP :

1. Create a fresh MySQL database in your online hosting server.

2. Create a Table named as StudentDetailsTable with 5 columns student_idstudent_namestudent_classstudent_phone_number and student_email. Now we would make the student_id as Primary key with Auto Increment. See the below screenshot for more details. This would be our main table and we would perform all CRUD operations on this table from our MySQL database.

3. Create 5 PHP Script files to Receive and Insert, Display, Update and Delete data from MySQL database from React Native app:

We would make 5 PHP files named as DBConfig.phpInsertStudentData.phpShowAllStudentsList.phpUpdateStudentRecord.php and DeleteStudentRecord.php . You need to upload all these files to your hosting server.

  1. DBConfig.php : This file consist all the MySQL database connection configuration like MySQL database host name, MySQL database name, MySQL database username, MySQL database password.
  2. InsertStudentData.php : This file would receive the sent data from react native app and insert that data into MySQL table.
  3. ShowAllStudentsList.phpThis file would convert all the existing present MySQL database data into JSON format.
  4. UpdateStudentRecord.php : This file would update the existing opened record in app.
  5. DeleteStudentRecord.php : This file would delete the existing open record in react native app.

1. Code for DBConfig.php.php file :

2. Code for InsertStudentData.php file :

3. Code for ShowAllStudentsList.php file :

4. Code for UpdateStudentRecord.php file :

5. Code for DeleteStudentRecord.php file :

4. Start a new react native project or open your existing project’s App.js file.

5. Open your project’s folder in Command Prompt / Terminal and install react-navigation library. by typing  npm install --save react-navigation command. You can read my this tutorial to understand how activity structure would works.

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

7. Import StackNavigator from react-navigation library.

8. Create a class named as MainActivity in your project. This would be your first screen of app with User registration from.

navigationOptions : Used to set the Activity title which display inside the Action Title bar.

constructor() : Creating 4 States inside the constructor() named as TextInput_Student_Name, TextInput_Student_Class, TextInput_Student_PhoneNumber, TextInput_Student_Email . Each state is used to hold the entered value from TextInput.

InsertStudentRecordsToServer() : This function would run the react native’s fetch() web api and send the all TextInput entered value to server and after successfully insertion it will show the response message coming from server into Alert dialog box.

GoTo_Show_StudentList_Activity_Function() : In this function we would open the ShowStudentListActivity represent as Second activity.

Screenshot of MainActivity :

9. Create class named as ShowStudentListActivity. This class would display all the entered students records in ListView.

constructor() : We are creating a Boolean type State named as isLoading. This state is used to show and hide the ActivityIndicator after done loading JSON data into ListView. If the isLoading value is true then it will show the ActivityIndicator and if the isLoading value is false then it will hide the ActivityIndicator.

navigationOptions : Used to set the Activity Title shows inside the Title Action bar.

componentDidMount() : This is a inbuilt function of React Native. This function would automatically calls on activity start up time. We would write the Fetch() Web code inside componentDidMount() method so when the this activity opens then it will start a web call and fetch the JSON data from server and display inside ListView. We are only displaying Student Names inside this ListView.

GetStudentIDFunction() : This function is very important for this class because in this function we would send the student_id, student_name, student_class, student_phone_number and student_email address to next EditStudentRecordActivity on ListView item onPress event. When use clicks on any ListView item then it will automatically get all the values form current selected record and navigate to next activity where it will be automatically received and filled into TextInput.

ListViewItemSeparator() : This function would render a separator line between each item of ListView.

Screenshot of ShowStudentListActivity :

10. Create a class named as EditStudentRecordActivity. This class is used to Edit the current open record to MySQL database. This class is also used to delete the current selected opened record.

constructor : We would create 5 state named as TextInput_Student_ID, TextInput_Student_Name, TextInput_Student_Class, TextInput_Student_PhoneNumber, TextInput_Student_Email in constructor(). Each state is used to store and hold the already sent data from previous activity.

componentDidMount() : Storing all the sent value from previous activity into State using this.props.navigation.state.params .

navigationOptions : Setting up the activity title shows inside the Title Action bar.

UpdateStudentRecord() : This function would get the all TextInput entered value and send them to server using fetch() API where they will update the existing record using ID.

DeleteStudentRecord() : This function would get the only Student ID from TextInput_Student_ID and send the only TextInput_Student_ID to server . On server we would delete the current record according to ID.

11. Create StackNavigator and define all your activity classes inside it.

12. Create CSS Style classes for All activities.

13. Complete source code for App.js File :

Screenshot in Android device :

Insert Update Display Delete CRUD Operations Screenshot in iOS device :

79 Comments

  1. Aweome tutorial, i was waiting for it for a very long time 🙂

  2. Is there any tutorial that can do the same thing like this for Firebase?

  3. please do a tutorial on image upload to php server mysql

  4. great tutorial,

    How to create API using login and Creat , Update, Delete record by each username

    Thank you

  5. How to create API login and Create, Update, Delete, SHow record by each username using php. please advice

  6. Awesome!!!
    Thank you very much Admin.

  7. Hi Admin, You are doing a great Job. This Tutorial is Very well explained.

    please help me, How to Connect my React native app to local host xampp & Mysql DB.

    I would like to perform CRUD operations on my local host, I am using xampp with Mysql….

  8. Thanks Admin, we will be waiting…….

  9. Hi, Sr.
    I’ve tried to use your URL and DB’s config in my Host but does’t works.
    I just upload all the PHP files in my MySQL and I changed the fetch URL to mine, like this : fetch(‘https://appdejore.000webhostapp.com/ShowAllStudentsList.php’ , etc…
    It works at web, but when I run in my React Native, doesn’t. A red error appears…
    Can i have some help? My host is :
    //Define your host here.
    $HostName = “localhost”;

    //Define your database name here.
    $DatabaseName = “id6607105_app_teste”;

    //Define your database username here.
    $HostUser = “id6607105_app”;

    //Define your database password here.
    $HostPass = “123456789”;

    Login: [email protected]
    Password: 1234

  10. Hi admin,
    For xamp above code works Fine…

    Now i am using online server to for this tutorials.

    what will be the host name, username,host pass…. for Online server.

    Also, how to upload files on online server pls explain in detail…

    thanks

    • Usmaan you will find the host name and host pass and host username and database name on your hosting provider control panel.

      • Thanks admin,
        Iam able to insert data in database BuT show all inserted students recordin list view button is going to next screen..
        showstudent list activity is not working, i can see just 3 lines……(i have inserted 3 student names)

  11. Admin Bro,

    Can we use similar method of “fetch”….
    [return fetch(‘https://reactnativecode.000webhostapp.com/Student/ShowAllStudentsList.php’)…………] in a production App.

    OR Do i need to create API…….

    Please Answer asap..
    Thanks.

  12. Admin Bro,

    Thanks for the reply….

    1.How to make the search functionality for this students database.
    2. Will there be any security issues or functionality issues in App, If we don’t create END POINTS or API please Guide…….
    3. I am planning to built a e-commerce App, Which is the best way; Creating endpoint & API or Without API as you have used in this Tutorial of Student Data….

    Thanks.

    • hello Usmaan,

      1. You can use our https://reactnativecode.com/add-search-bar-filter/ tutorial for search functionality.
      2. No usmaan there is no issue for security but if you are adding login functionality then you must add the logout functionality correctly.
      3. Usmaan there is no need to use API you can easily manage the complete app like i have done in this tutorial.

  13. Hi admin, how to do if I just want to show one student information?

  14. Hi, admin, Is possible if I want like this? For example, I login as student A, I want to only student A detail and then click it, It will send detail to update interface to give user update. Because like now the tutorial is I login as student A but I still can change student B detail. So, is possible to do it? I can how to do?

  15. Okay, I want to use that same version.

  16. Hi,
    I must say its a great tutorial, really well explained.
    Is there any tutorial for todo app like project management tool with firestore database? Please help me out if have.
    Thanks in advance! 🙂

  17. Yes. Cloud firestore/firebase.

  18. Hello sir,

    Please give me the github link.

  19. Sir, do you have any idea of how to prevent user insert the same data into mysql database? For example there is a list of data display in a flatlist and I click the first data and click the add button so the first data will be inserted to another table. And When I click again the first data and click add again, it should display a warning msg say it already exist in the table already.

  20. sir, how to delete record and go back and refresh page?

  21. Hello Admin, great work, but it seems there is an update to StackNavigation… Please can you update your code. Thank you.

  22. Hi! How did you solved the problem?

  23. how do you try your code?

    • Simply copy the main App.js code into your own App.js file and run the code & one more thing in this tutorial i am using the older version of React Navigation library so you have to read their new documentation also.

  24. How do you test your application?

  25. How to get the inserted values in the edit screen ?
    what i mean is e.g: when i create/insert record of Student data, it will store in database table,
    now i want to edit some thing from Student in the EDIT/Update Student Data it will go to Edit Screen and 1st get the inserted data inside each TextInput then it will update the particular data….

    How to get the inserted data on the Edit Screen TextInput ?

  26. well Admin, i am going in specific detail…

    On show student list activity list of different students are showing that is coming from database, there must be 2 button against each student these button are Edit and Delete, when you click on edit button the id of that particular student will go to the Edit Screen and now on Edit Screen you must get all the fields of that student and before editing the record it must show the previous details of that student inside the Input fields..

    What i want is how to get those values inside the Input fields before editing the new details…. Hope you get my point…

  27. Getting this error when run react app
    ./src/App.js
    Line 420: ‘MyNewProject’ is not defined no-undef

  28. when you add fetch in app js you hosting php and database file or no ?

    please answer my question

    • Idham the fetch function is called in main app.js file and the database files will upload on your web hosting server.

  29. Hey there, thanks a lot for the code. Seems like I cannot insert my data into the database. I have edited all the database configurations tho.

  30. At first I did put my localhost server, and yes I put my IP address without changing anything to the front end code except the stackNavigator. But it didn’t work. Then I tried to use web 000webhost but didn’t work either. It shows some JSON error. But when I used your server url It works fine. Really.

  31. Hello admin
    Can l find this project on github?

Leave a Reply

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