React Native User Registration With PHP MySQL Android iOS Tutorial

User registration is a simple process to register some particular user information on server, which will be used again when user trying to Log-in into application. Like User Name, Password, Email etc. So in this tutorial we would going to create an react native android and iOS application with complete user registration process on our online hosting server using PHP MySQL. This type of application also known as API.

Database used in this tutorial : MySQL

Server Side scripting Language used in this tutorial : PHP

Important Note : This code is working correctly in both Android and iOS devices. So feel free to create your own User Registration Authentication application for Android and iOS using my this tutorial 🙂 .

Contents in this project React Native User Registration With PHP MySQL :

1. Create a Database + Table on your hosting server : 

Create a database on your MySQL server, then Create a fresh table inside the database. The table name should be UserRegistrationTable . Add 4 columns inside the table idnameemail, password.

2. Create PHP Script to insert user registration information received from App into MySQL database :

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

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

user_registration.php : This file receive the user registration information and insert that info into MySQL database.

Code for DBConfig.php file :

Code for user_registration.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, Text component inside the import block.

5. Create constructor.

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

6. Create function named as UserRegistrationFunction() 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 and 1 Text 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 UserRegistrationFunction() function on button onPress.

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

Screenshots in iOS device :

Screenshot in Android Device :

User Registration Screenshot of MySQL database table after user registration :


  1. Hi,

    You passed into the fetch api ‘’.

    What should I pass in for the php file on my local server?

    I am not familiar with php so I need your help on this. Thanks!

    • Hey May, if you using localhost then your url should be YourSystemId/PhpPagename .

      • I put it as localhost/user_registration.php

        And when I click the registration button it says Network Request Fail

        I think I have gotten the system id wrong. How do I know what is the id?

        • Oh I think I have found the name with the command SHOW VARIABLES WHERE Variable_name = ‘hostname’;

          But where do I save the 2 php files so that they can be accessed? Currently it still says Network Request Fail when I click the registration button.

          • Okay, I think I found where to save the files to, ie Macintosh HD > Users > MyUserName.

            I placed the php files there and when I ran the app again in Expo it says JSON Parse error: Unrecognized token: ‘<'

          • May just install the Xampp in your MAC, then put the php files in xampp-> htdocs folder. Now use your system’s IpAddress/phpfiles as url in fetch method.

      • Hey admin, im so happy to stumbled upon this tutorial
        thanks a lot for sharing
        however i found and error on inserting after following every exact step
        for fetching i use
        but its still error
        itd be appreciated a lot to have your thought regarding this issue

  2. Ah thanks for this solution. I tried your previous solution on using the web host and it works too. You’ve been really helpful!

    Will you be creating a tutorial on logging in soon?

  3. Tutorial is really very good, but still i dont know where to put 2 .php files? can you please tell me? or if you have any video tutorial then it will be better, thank you in advance.

    • Rohit you need to put PHP files on your hosting server or if you are using localhost then inside the xampp -> htdocs folder.

      • sorry to disturb you but i didnt get what exactly i put in fetch(‘http://localhost/user_registration.php’)

        first time it shows “User Registered Successfully”
        second time it showing “Email Already Exist, Please Try Again !!!”

        but still database not having any values

        • From program to database value is not passing here, for sample i making
          fetch(‘http://ipAdd:80/user_registration.php’, {
          method: ‘POST’,
          headers: {
          ‘Accept’: ‘application/json’,
          ‘Content-Type’: ‘application/json’,
          body: JSON.stringify({

          name: ‘Rohit Patil’,

          email: ‘[email protected]’,

          password: ‘[email protected]


      • Everything working properly on ubuntu localhost machine,

        now i want to put my all php script files in windows server, where do i put them in microsoft sql server, so that i can access it from my local ubuntu machine? is it possible?

        • Rohit here windows server means your online hosting or in local windows system ?

          • I have to do on both ,
            but firstly on local windows system and then online hosting.

          • Rohit then you need to install Xampp on your windows system then It will create a folder in C drive named as Xampp -> htdocs , Now create a folder in htdocs folder and put your .PHP files inside it. Now open the web browser Google chrome or Mozilla type localhost/YourFolderName . Here you go now your php files would run.

  4. Thank you So much now its working…

  5. Now i am having two problems please give me solution:

    1. how do i post images in same way, now only text is send.

    2. now i am working on local machine(Ubuntu) but how mysql will work on remote server machine(Windows)

  6. Testing this with android emulator and following error occurs:

    “JSON Parse error: Unexpected EOF”

    Have you seen this error message before? any idea where could be related?

  7. Help me, please: JSON Parse error: Unrecognized token'<'

  8. i added two php files in htdoc folder ….but …Currently it still says Network Request Fail when I click the registration button.

  9. Hi, great tutorial!

    You are using


    I’m using mysql with phpadmin and my *.php files are saved on gitlab. What do I have to put into fetch as URL? I get an error when i’m using the gitlab url

    • Yannik you need to call the user_registration.php file URL in fetch. before putting the URL in fetch open this URL in web browser to make sure this is working.

  10. In case anyone comes across the ‘unrecognized token ‘ response.json())
    .then((responseJson) => {

    // Showing response message coming from server after inserting records.

    }).catch((error) => {
    To get it to work. Something to do with it trying to output html. Not sure why it’s hitting this error though. It successfully inserts into my online mysql db.

  11. Thank you Admin for this tutorial

  12. when I used this code I got error JSON Parse error: Unrecognized token: ‘<' and I don't know what is the solution.

  13. I’m getting this too. I’m pretty sure I have done it exactly how you have put it. Everything that I have read seems to say its receiving html and not JSON.

  14. Hi,

    I’m sorry to ask the same question that 100’s before me already did. But I get Network request failed. I’ve stored my .php files in www in my wamp and it looks like I get access to the database from those files (open localhost/MyFolder/user_registration.php) and gets a result, albeit a “try again” message. I guess though that that’s because I have no data in the call.

  15. One more update. Obsiously localhost wont work since I’m testing it on my phone… However using my local IP doesn’t work either. Shouldn’t I be able to use my local IP or do I have to use the IP of my router and port forward to my computer?

  16. network request failed i am facing this problem. i think this is for the link i used. i cannot understand how i get the system id of localhost

  17. Hi
    I have an error when i us my link
    Please help.

    ExceptionsManager.js:73 SyntaxError: Unexpected token T in JSON at position 0
    at parse ()
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:301
    at _callTimer (JSTimers.js:154)
    at _callImmediatesPass (JSTimers.js:202)
    at Object.callImmediates (JSTimers.js:470)
    at MessageQueue.__callImmediates (MessageQueue.js:329)
    at MessageQueue.js:147
    at MessageQueue.__guardSafe (MessageQueue.js:316)

  18. Sir ……. i just do what you did in this tutorial
    1.install xampp and make a database in it.

    2.Then i create a react native project in htdocs folder of xampp

    3. Then i code what you code ….

    But i got stuck in fetch (http:/????/.php);

    you said used your local ip address … in cmd after writing ipconfig
    i found ipv4 ip address i just copy this in my fetch … but it showing error????

    please help….

    • Vivek if you are connected to WiFi then use your IPv4 address under WiFi area and if you are connected to Broad band using port then use Ethernet IPv4 address, If you still face any problem then please tell me 🙂 .

      • sir should i move my whole project into htdocs

        • Yes, Vivek you need to move the complete project into Htdocs -> Your_Project_Folder.

          • Sir, it shows development server return response error 500…….what to do?????

          • Vivek shut down your emulator and again restart it and execute react-native run-android command.

          • Here is the code sir please check is everything okay?

            import React, { Component } from ‘react’;

            import { AppRegistry,
            Text } from ‘react-native’;

            const App = () =>{



            this.state = {

            UserName: ”,
            UserEmail: ”,
            UserPassword: ”



            UserRegistrationFunction = () =>{

            const { UserName } = this.state ;
            const { UserEmail } = this.state ;
            const { UserPassword } = this.state ;

            fetch(‘’, {
            method: ‘POST’,
            headers: {
            ‘Accept’: ‘application/json’,
            ‘Content-Type’: ‘application/json’,
            body: JSON.stringify({

            name: UserName,

            email: UserEmail,

            password: UserPassword


            }).then((response) => response.json())
            .then((responseJson) => {

            // Showing response message coming from server after inserting records.

            }).catch((error) => {


            return (

            User Registration Form


            // Making the Under line Transparent.



            // Making the Under line Transparent.



            // Making the Under line Transparent.




            export default App;
            const styles = StyleSheet.create({

            MainContainer :{

            justifyContent: ‘center’,
            margin: 10

            TextInputStyleClass: {

            textAlign: ‘center’,
            marginBottom: 7,
            height: 40,
            borderWidth: 1,
            // Set border Hex Color Code Here.
            borderColor: ‘#2196F3’,

            // Set border Radius.
            borderRadius: 5 ,

            // Set border Radius.
            //borderRadius: 10 ,


          • Vivek you are using wrong syntax, You are using const App = () =>{ instead of export default class MainProject extends Component { . So just use this export default class MainProject extends Component { at the starting of application.

  19. Thank you for answer

    I have double check my config… everything like good 🙁

  20. Sorry i am using online hosting

  21. export default class SignUpForm extends Component {

    constructor(props) {

    this.state = {

    UserName: ”,
    UserPrenom: ”,
    UserEmail: ”,
    UserPassword: ”,
    UserClubName: ”,
    UserRole: ”,


    UserRegistrationFunction = () => {
    const { UserName } = this.state;
    const { UserPrenom } = this.state;
    const { UserEmail } = this.state;
    const { UserPassword } = this.state;
    const { UserClubName } = this.state;
    const { UserRole } = this.state;
    fetch(‘’, {
    method: ‘POST’,
    headers: {
    Accept: ‘application/json’,
    ‘Content-Type’: ‘application/json’,
    body: JSON.stringify({

    name: UserName,

    prenom: UserPrenom,

    email: UserEmail,

    password: UserPassword,

    clubName: UserClubName,

    role: UserRole,


    }).then((response) => response.json())
    .then((responseJson) => {
    // Showing response message coming from server after inserting records.
    if (Platform === ‘Android’) {
    } else {
    }).catch((error) => {

    render() {
    return (

    this.setState({ UserName })}
    onSubmitEditing={() => this.prenomInput.focus()}

    this.setState({ UserPrenom })}
    onSubmitEditing={() => this.emailInput.focus()}
    ref={(input) => this.prenomInput = input}

    this.setState({ UserEmail })}
    onSubmitEditing={() => this.passwordInput.focus()}
    ref={(input) => this.emailInput = input}

    this.setState({ UserPassword })}
    onSubmitEditing={() => this.clubNameInput.focus()}
    ref={(input) => this.passwordInput = input}

    this.setState({ UserClubName })}
    onSubmitEditing={() => this.roleInput.focus()}
    ref={(input) => this.clubNameInput = input}

    this.setState({ UserRole })}
    ref={(input) => this.roleInput = input}



  22. sir finally its working im getting data in my database but its showing error on my emulator

  23. sir finally its working im getting data in my database but its showing error on my emulator….what to do

  24. can you share the source code for better understanding.

  25. Hi , i’m using WampServer on Windows 10. i did as you mentionned but i get a Network Request Failed error .

    I created a folder called “/react” under “C:\wamp64\www\react” and put the .php files there .
    when i put “localhost/react” in my browser i can see the .php files .

    i changed the URL to : ‘http://localhost/react/user_registration.php’

    But i’m still getting that error .. i’m not sure what i’m doing wrong here

  26. hi dear
    how to download this codes?
    i want copy codes but don’t copy!!

  27. admin,

    Can you please guide me how to connect react native app with phpmyAdmin. As i get 401 error when try to connect my app using xampp.

  28. Hi
    I use http://localhost/user_registration.php
    but first time i have “User Registered Successfully”
    second time “Email Already Exist, Please Try Again !!!”
    What is the problem ?

  29. If my database is empty, when i put http://localhost/user_registration.php on the navigator i have “User Registered Successfully” and this is create an user with empty email
    If i put the link a second time i have “Email Already Exist, Please Try Again !!!”

  30. Hi am continuously getting the error :
    Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

    This error is located at:
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)


  31. Hey admin
    I uploaded php files to my host server and wrote fetch(‘’, but everytime when I press the button submit I receive this mistake: “Unexpected token < in JSON at position 0"
    Can you check somehow if my host server works to you?
    And how can I fix it?

  32. Hey admin,
    I sent you my files to your email.
    Please check it.
    Thank you

  33. SyntaxError:JSON Parse error :
    Unrecognied token ‘<'

    • Prince check your database config file .

      • Hey admin
        I fixed the link and now it works, but now I receive following mistake: JSON Parse error: Unexpected identifier “Try”
        Can you please help me how I can fix it?
        Thank you

      • You keep saying check the config file, but what are we checking for? Maybe this is why some people repeated this error. And where do we find this file, if not using Xaamp or Wamp but a live database?

        • Sally we have to create a config php file named as DBConfig.php and put this file with user_registration.php file. THE DBConfig.php file contains all the server information live what is your database name and database password etc. You need to put all your server details here inside this file and remove my old details from it.

  34. I don’t know what happen to my sourcecode, i’ve check my DBConfig due to many issues that exist above. But, i get different error log :

    JSON Parse Error: Unexpected identifier “Try”

    what should i do? Thanks in advance.

  35. Achmad Fatur Rizky

    Thats for react native in expo or android studio?

  36. When I try to register, an alert appears: undefined

    • Heliton please check the dbconfig file and make sure you have put the right server username and password and on which platform you are testing this code ?

  37. Hi..I followed each step in an empty expo project.Got this error

    JSON Parse Error: Unexpected identifier “Try”
    what should i do? Thanks in advance.

    I am using Mamp.

    • NIPA i have tested this app with online 000webhost hosting server and its working properly can you send your code on [email protected] . I will check it .

      • Hi thank you for prompt reply.It is fixed now,I have not checked A_I field last time.It is perfectly working now.

        Thank you for the wonderful tutorial.

        Can you make a live chat app with react native and php for multiple user role like Doctor and patient?

        • Thanks for your suggestion NIPA, i will look into your topic and soon publish a new tutorial regarding to your query 🙂 .

  38. I am struggling with user roles.I created a table filed called user type.Once login or register my user need to be in different component based on value selected for user_type Field.

    I have used componentDidMount() ..nothing happened.

    Can I put any condition on responseJson.

    Like the code below:

    .then((response) => response.json())
    .then((responseJson) => {

    if { (user_type is “customer”)

    .then.this.props.navigation.navigate(‘customerHome’) }

    .then.this.props.navigation.navigate(‘App’) }

    }).catch((error) => {

  39. Hi.. I followed each step and still got this error SyntaxError:JSON Parse error :
    Unrecognized token ‘<'
    how to fix it ?

  40. this is the error am facing bro, i have debugged and i really dont know what to do again:
    Error in C:\Users\olakeji\my-app\src\Lecturers\AddStudents.js: C:/Users/olakeji/my-app/src/Lecturers/AddStudents.js: Unexpected token, expected , (34:33)
    32 |
    33 |
    > 34 | fetch(‘’ {
    | ^
    35 | method: ‘POST’,
    36 | headers: {
    37 | ‘Accept’: ‘application/json’,

  41. i need your help Sir everything is working fine but in sql table id increment all the time but data name , email etc not add in table.
    and get response of success.
    please help 🙂

  42. Thanks Sir for the tutorial . I am getting a network fail issue .
    Both the php files are placed in xamp/htdocs . When tested them using http://localhost/reg2.php or http://ipaddress/reg2.php The file is working well.
    But when I keep it in the fetch thing in react native i.e. fetch(‘http://localhost/reg2.php’) or fetch(‘http://ipaddress/reg2.php’) i am continuously getting the error Unhandled Promise rejection
    type error : Network request failed.

    When i saw some comments they were like as u are testing on phone localhost//reg2.php wont work . What shall I do sir . Stuck on this error from 2 days . Anyone else who knows the solution may mail me to [email protected].
    Any help would be highly appreciated.

  43. i.e localhost/reg2.php

  44. Sorry for the whole mess solved that problem .
    got an error SyntaxError:JSON Parse error :
    Unrecognized token ‘<' . Where is the config file where i have to enter my username ? I am now running my mysql server n

    • Bharath the config file is in the tutorial named as DBConfig.php . You have to put your own server database username and password in the file.

  45. Vlue for title cannot cast from readble native array to string error is displayed

  46. [Unhandled promise rejection: TypeError: undefined is not an object (evaluating ‘_react.console.error’)]
    * Screens\SignUp.js:49:14 in
    – node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
    – node_modules\promise\setimmediate\core.js:123:25 in
    – … 8 more stack frames from framework internals

  47. plz help for the above mentioned error.

  48. Hi Admin,

    I did exactly the same. I have my Wamp server and I put my .php files in Wamp’s www repertory, in a folder named “ppe”.
    In my DBConfig file, I have “localhost” as my hostname, “root” as hostuser and “” as hostpass.
    In my .js file, I have a fetch request : “fetch(‘’ , {
    method: ‘POST’,
    headers: {
    ‘Accept’: ‘application/json’,
    ‘Content-Type’: ‘application/json’,
    ….. etc

    Here is my IPv4 IP address.
    When I run my code and click on the register button, I get “Network Request Failed”.. I don’t know what I did wrong..
    Can you help me ??

  49. Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in
    C:\xampp\htdocs\harkalay\admin\api\registration.php on line 28
    “User Registered Successfully”
    Any help??

  50. please i want a user to login once not everytime i open the app, like instagram and other apps.Can you please help me

  51. I think what i want is cookies

  52. i want my user to login once not everytime the app opens.I think its cookies,can you help me with that.

    • Adroit you can do this simply by storing a key value in application storage using AsyncStorgage which works like cookies, When you successfully login then store the key value an on every time when user open the application then check the key value and if the key present then directly login the user.

  53. ese codigo lo puedo usar para una base de datos de sql server ?

  54. Hi great tutorial but I’m still getting “Network Request Failed”. Can you help me with solving this?

  55. Hi, nice tutorial, exactly what I’m looking for. But the passwords are stored in clear, have you a way to pass and store it encrypted ?
    Thanks !

  56. Thanks ! I will appreciate it. I’ve tried to hash the password “locally” with argon2, scrypt or bcrypt but none of these methods was a successful. I didn’t succeed to install/import library into my reactnative project.

  57. I can able to register without password, how to fix it? i am using your code only.

  58. Hello, I am receiving Alert Error! Try Again. I am using an online server on 000webhost. I have changed the config file to match my DB.


    //Define your host here.
    $host_name = "localhost";

    //Define your database name here.
    $database_name = "id10660839_database";

    //Define your database username here.
    $host_user = "id10660839_user123";

    //Define your database password here.
    $host_password = "user321";

    my website is

    I have copied your information exactly with the change of the fetch going to the above URL and changed the config file.

    Thank you for your time

  59. Sorry the information above is for the wrong project please disregard

  60. Hello!
    Need help implementing a simple personal account, can you help?
    Send your personal account working code with registration and authorization + sql and php files.

  61. Thank you for sharing the code, but when i click register it show network request failed. I have check my db config but still don’t know what is the prob. How can i fix the error?

  62. Online server brother

  63. Bro on your server please put your own server locahost name because in many cases the host name is different than localhost. And also put all your server details. If you still face the error then share your hosting URL with me.

Leave a Reply

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