React Native Insert Text Input Data To MySQL Server Android iOS Tutorial

How to Insert Text Input Data – store multiple TextInput component entered data to online PHP MySQL database server using Fetch API and Show server response inside app using Alert message after successfully inserted record.

Inserting data from React Native application to MySQL database is a very important task to every developer because without submitting data from app there is no dynamic activity in project. So in this tutorial we would going to create a react native application which would stores the Text Input entered value into MySQL database and after successfully inserting the record it would show us the response conformation message coming from server into Alert message. So let’s get started 🙂 .

Contents in this project Insert Text Input Data To MySQL Server :

1. Create a database + Table on your online hosting server.

Create a database on your MySQL server, then Create a fresh table inside the database. The table name should be UserInfoTable . Add 4 columns inside the table id, name, email, phone_number .

2. Create PHP script to insert received data from React Native application into MySQL database.

Create 2 PHP files DBConfig.php and submit_user_info.php .

DBConfig.php : This file contains the MySQL database hostname, database name, database password and database username.

submit_user_info.php : This file receive the send record from application and insert that received data into MySQL database.

Code for DBConfig.php file :

Code for submit_user_info.php file :

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

4. Add AppRegistry, StyleSheet, TextInput, View, Alert, Button component inside the import block.

5. Create constructor.

Create a constructor in your Main Class with props parameter. Now declare three variables TextInputName: ‘ ‘, TextInputEmail: ‘ ‘ and TextInputPhoneNumber: ‘ ‘ with empty values using this.state.

6. Create function named as InsertDataToServer() to send the Text Input data on server.

7. Create custom css class named as MainContainer and TextInputStyleClass just above the AppRegistry.registerComponent line.

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

9. Add 3 Text Input and 1 Button component inside the View .

placeholder = Shows hint inside the Text Input.

onChangeText = Every time when user type anything in Text Input it will store the entered value in state variable.

underlineColorAndroid = Hide the Text Input base line.

style = Used to call css class.

onPress = Call the InsertDataToServer() function on button onPress.

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

Screenshots :
Insert Text Input Data

83 Comments

  1. Mr. Professional

    Very Nice Tutorial Sir…

  2. Hi,
    Error :’Network request failed’
    fetch(‘https://localhost:8000/submit_user_info.php’

    How can i solve this?

    Thanks

  3. Hi, your web is awesome about react native, but i need some tutorial about insert images into mysql with react native and CRUD react native with php mysql, can you help ? thanks

  4. Message show that data enter successfully but not received any data in my online server database

  5. I checked all but not found any problem in that ….can you give me your facebook id for help ?

  6. Thank your for your support the problem solved and your tutorial is very good I hope you provide more material in future also and its request to kindly provide the CRUD video of react native also

  7. Where do I put the DBConfig.php and submit_user_info.php?

    Do I store those files on the server?

    I’m using Xampp, to create and run a MYSQL database. Do you know how I can achieve this?

    Cheers

  8. Great Tutorial. I made some subtle changes because I think of newer versions of React-Native.
    After I run the update I get errors: JSON Parse error: Unexpected identifier “insert” Then a bunch of errors from the core product. I have the submit_user_info.php and the DBConfig on my server.
    How would I debug this. Is it the logon, the SQL query etc.
    I am using Expo XDE and Genymotion to test this.

  9. Everything works fine but i get a response JSON Parse error unrecognized token ‘<' instead of user registered succesfully
    from the server

    • Solex you need to check DBConfig.php file for all server configuration and also check your table name in submit_user_info.php . One more thing you are running php script on localhost or online server.

  10. Yeah the problem was in the submit_user_info.php Everything is perfect now thanks admin looking forward to seeing more tutorials Thanks

  11. Awesome post,
    Your way of explaining is very nice,
    Thanks a lot

  12. Thank You admin. a very helpful tutorial for react native beginners. i hope you keep working on the amazing content

  13. God Job Sir..
    I have a problem in local system IP address
    This is my IPCONFIG sir, which one should I choose :

    Connection-specific DNS Suffix :http://www.huaweimobilewifi.com
    Link-local IPv6 Address . . . . . : fe80::3ce5:b38f:cb0:7579%19
    IPv4 Address. . . . . . . . . . . : 192.168.1.106
    Subnet Mask . . . . . . . . . . . : 255.255.255.0
    Default Gateway . . . . . . . . . : 192.168.1.1
    in my source, i type like this :
    fetch(‘https://192.168.1.106/submit_user_info.php’
    but still find the error ‘Network request failled’

    thank for your help, God Bless You…

  14. If i login to sistem di react native, can i get sesseion? Sorry i not good english sir, i have projek can you help me, i will pay u sir

  15. hi,
    nice tutorial but I have a qn: what is the python equivalent of =>
    $json = file_get_contents(‘php://input’);

    thank you!

  16. Sir , if i save my php file in htdocs …is it belong to my react native project because project in on another path

  17. I tried it in localhost, but it gives network error. Could it be because i try in local?

    • No Berke, check your database config file or make sure when you are testing this project you have connected to internet because fetch works over internet.

  18. Thanks Admin,
    These tutorials are really interesting. I have learnt more things. 🙂
    Keep it up!

  19. Nice tutorial ADMIN!!!

  20. Abhishek singh

    sir i am allready changed from localhost to ip address of system but still i got the same error “network request failed”.
    what should i do now ?

  21. I just copy all ur code, but nothing is shown on database after filling data in form.

  22. I am using ubuntu, android phone connected to my laptop, using react native 0.55, installed a fresh project of react native through “react-native init app” and put yours these two “submit_user_info.php” and “DBConfig.php” in this project folder….and that react native code is in App.js….after running i got form on my phone screen but nothing updated on database…where i am doing mistake?

  23. whose ip address i have to keep in that portion, phone ip address or laptop ip address? my ip is: 192.168.0.81 how i write it in that format plz tell?
    should i write it as ‘https://192.168.0.81/submit_user_info.php’ , here in place of “submit_user_info” what will come?

  24. Hello world
    bye world

    sir i want this two data to store on a db…. how to do that?

  25. pls i have this issue, JSON Parse error: unrecognize token ‘<'….pls admin can you help with this

  26. fetch(‘http://localhost/submit_user_info.php’
    Network request failed

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

  28. Hello sir,
    Great tutorial! I’m having a problem at the end it seems though 🙁
    –> JSON Parse Error: Unrecognized token ‘<'

    I've checked both DBConfig.php & submit_user_info.php and can't see a problem…

    DBConfig.php below:

    Could you help me please

  29. your tutorials Ok Mr.. Thanks

  30. Hi sir, I having a problem that I only can insert one data. If I insert two data I will have a problem at the end it seems though
    –> JSON Parse Error: Unrecognized token ‘Try’

  31. JSON Parse error: Unrecognized token'<' can someone please tell me how to fix this error

    • Jones try to make same database field name .

      • fetch(‘http://103.40.2.2/register.php’, {
        method: ‘post’,
        header:{
        ‘Accept’: ‘application/json’,
        ‘Content-type’: ‘application/json’
        },
        body:JSON.stringify({
        name: userName,
        email: userEmail,
        password: userPassword,
        })

        })
        .then((response) => response.json())
        .then((responseJson) =>{
        alert(responseJson);
        })
        .catch((error)=>{
        console.error(error);
        });
        //this is what i have

  32. i fixed it thanks

  33. yntaxError: Unexpected token < in JSON at position 0. help!

    • Nicolas please check that in the database config file you have put the right database username and password of your MySQL database.

  34. data is submit successfully in database , but database is receive empty column .
    in reactjs

  35. i can Check the receiving tags,
    it is same on my php files.

  36. hello,admin can u please provide code for verification of registration using mysqldatabase

Leave a Reply

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