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 id, name, email, 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 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php
//Define your host here.
$HostName = “localhost”;
//Define your database name here.
$DatabaseName = “id2070055_reactnativedb”;
//Define your database username here.
$HostUser = “id2070055_reactnativedb_user”;
//Define your database password here.
$HostPass = “1234567890”;
?>
|
Code for user_registration.php file :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<?php
// Importing DBConfig.php file.
include ‘DBConfig.php’;
// Creating connection.
$con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);
// Getting the received JSON into $json variable.
$json = file_get_contents(‘php://input’);
// decoding the received JSON and store into $obj variable.
$obj = json_decode($json,true);
// Populate User name from JSON $obj array and store into $name.
$name = $obj[‘name’];
// Populate User email from JSON $obj array and store into $email.
$email = $obj[’email’];
// Populate Password from JSON $obj array and store into $password.
$password = $obj[‘password’];
//Checking Email is already exist or not using SQL query.
$CheckSQL = “SELECT * FROM UserRegistrationTable WHERE email=’$email'”;
// Executing SQL Query.
$check = mysqli_fetch_array(mysqli_query($con,$CheckSQL));
if(isset($check)){
$EmailExistMSG = ‘Email Already Exist, Please Try Again !!!’;
// Converting the message into JSON format.
$EmailExistJson = json_encode($EmailExistMSG);
// Echo the message.
echo $EmailExistJson ;
}
else{
// Creating SQL query and insert the record into MySQL database table.
$Sql_Query = “insert into UserRegistrationTable (name,email,password) values (‘$name’,’$email’,’$password’)”;
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = ‘User Registered Successfully’ ;
// Converting the message into JSON format.
$json = json_encode($MSG);
// Echo the message.
echo $json ;
}
else{
echo ‘Try Again’;
}
}
mysqli_close($con);
?>
|
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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button, Text } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor(props) {
super(props)
this.state = {
UserName: ”,
UserEmail: ”,
UserPassword: ”
}
}
|
6. Create function named as UserRegistrationFunction() to send the Text Input data on server.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
UserRegistrationFunction = () =>{
const { UserName } = this.state ;
const { UserEmail } = this.state ;
const { UserPassword } = this.state ;
fetch(‘https://reactnativecode.000webhostapp.com/user_registration.php’, {
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.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
|
7. Create custom css class named as MainContainer and TextInputStyleClass just above the AppRegistry.registerComponent line.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
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 ,
}
});
|
8. Add View as parent view in render’s return block and Call the MainContainer class into View.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
render() {
return (
<View style={styles.MainContainer}>
<Text style= {{ fontSize: 20, color: “#000”, textAlign: ‘center’, marginBottom: 15 }}>User Registration Form</Text>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter User Name”
onChangeText={UserName => this.setState({UserName})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter User Email”
onChangeText={UserEmail => this.setState({UserEmail})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter User Password”
onChangeText={UserPassword => this.setState({UserPassword})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button title=“Click Here To Register” onPress={this.UserRegistrationFunction} color=“#2196F3” />
</View>
);
}
}
|
10. Complete source code for index.android.js / index.ios.js file.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button, Text } from ‘react-native’;
class MainProject extends Component {
constructor(props) {
super(props)
this.state = {
UserName: ”,
UserEmail: ”,
UserPassword: ”
}
}
UserRegistrationFunction = () =>{
const { UserName } = this.state ;
const { UserEmail } = this.state ;
const { UserPassword } = this.state ;
fetch(‘https://reactnativecode.000webhostapp.com/user_registration.php’, {
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.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style= {{ fontSize: 20, color: “#000”, textAlign: ‘center’, marginBottom: 15 }}>User Registration Form</Text>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter User Name”
onChangeText={UserName => this.setState({UserName})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter User Email”
onChangeText={UserEmail => this.setState({UserEmail})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter User Password”
onChangeText={UserPassword => this.setState({UserPassword})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button title=“Click Here To Register” onPress={this.UserRegistrationFunction} color=“#2196F3” />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
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 ,
}
});
AppRegistry.registerComponent(‘MainProject’, () => MainProject);
|
Screenshots in iOS device :
Screenshot in Android Device :
Screenshot of MySQL database table after user registration :
Also Read :
React Native Sort Array into Ascending Descending Order iOS Android
React Native WebView Android iOS Installation Example Tutorial
Set View Height Width in Percentage Flex Dimensions in React Native
React Native Solve unable to resolve module AccessibilityInfo Error in New Project
React Native Final Tree View in Android iOS Example
