React Native User Registration with Local PhpMyAdmin MySQL Database iOS Android Tutorial

Our this tutorial has a special purpose between developers, because many of our visitors wanted to test react native apps using Local PhpMyAdmin MySQL database and most of them doesn’t know how to? So in this tutorial we would going to create simple User Registration with Local PhpMyAdmin MySQL Database application in both iOS Android devices example tutorial. We would explain each and every step in this tutorial so don’t skip any step read the tutorial to end. Happy Reading 🙂 .

Contents in this project User Registration with Local PhpMyAdmin MySQL Database iOS Android Example Tutorial:

1. The first step is to install the Local PHP server software in your computer, We are using the XAMPP in our tutorial, So if you have n’t install the XAMPP then download from its official website , It’s free.

2. After installing the XAMPP just start the Apache and MySQL server.

3. Create MySQL database and Table:

  1. Next step is to create MySQL database in your local host PhpMyAdmin, So open your web browser(Google chrome, Mozilla Firefox etc.) and type  localhost/phpmyadmin and press enter, Now you’ll see the Localhost/PhpMyAdmin MySQL database control panel.
  2. Click on New link to create new MySQL database.
  3. Enter the Database name, we are creating the Database named as test.
  4. Next step is creating Table in your Local database, Enter table name as user_details with columns 4.
  5. Enter columns name id, name, email, password with type INT and VARCHAR. Now make the id as auto increment and make the id is primary key. 
  6. Now the table creating part is done, Next step is start coding for PHP server files.

4. Creating PHP Files:

we have to create 2 php files first one is dbconfig.php and second is user_registration.php .

Code for dbconfig.php file:

This file contains all the most useful information about our server like server database username, host name, password and database name.

Code for user_registration.php file:

This file is used to insert user registration information data into MySQL database table. We would call this file into our react native code.

5. Create a folder name as User_Project inside C:\xampp\htdocs\ like i did in below screenshot and copy the both dbconfig.php and second is user_registration.php PHP files inside this folder. We would now call these files with IP of our local system.

6. Open command prompt in windows and execute ipconfig command inside it to see your system’s IP address.

Important Note : After executing above command you’ll see many different IP address on your command prompt window, Now if you are connected to WiFi network then you need to copy/select the IPv4 address under Wireless LAN Adapter WiFi block and if you are connected to LAN then select the IPv4 address under Ethernet Adapter.

7. Start Coding for Application :

1. Open your project’s App.js file and import StyleSheet, View, TextInput, Button, Text and Alert component in your project.

2. Create constructor() in your project and make 3 state named as UserName, UserEmail and UserPassword inside it.

3. Create a function named as UserRegistrationFunction(), Inside this function we would use the fetch() API to insert data into MySQL database, As you can see we are using the URL with IP address mentioned above step with the location of PHP file. After inserting the data successfully it will print the response message coming form PHP file in Alert.

4. Create 3 TextInput component and 1 Button component inside the render’s return block, Each TextInput will get a value from user and stores in State. We would call the UserRegistrationFunction() on button onPress event.

5. Creating Style.

6. Complete source code for App.js File :

Screenshots :

User Registration with Local PhpMyAdmin MySQL

Leave a Reply

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