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 :
|
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 submit_user_info.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
|
<?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 name from JSON $obj array and store into $name.
$name = $obj[‘name’];
// Populate email from JSON $obj array and store into $email.
$email = $obj[’email’];
// Populate phone number from JSON $obj array and store into $phone_number.
$phone_number = $obj[‘phone_number’];
// Creating SQL query and insert the record into MySQL database table.
$Sql_Query = “insert into UserInfoTable (name,email,phone_number) values (‘$name’,’$email’,’$phone_number’)”;
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = ‘Data Inserted Successfully into MySQL Database’ ;
// 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 component inside the import block.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
constructor(props) {
super(props)
this.state = {
TextInputName: ”,
TextInputEmail: ”,
TextInputPhoneNumber: ”
}
}
|
6. Create function named as InsertDataToServer() 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
|
InsertDataToServer = () =>{
const { TextInputName } = this.state ;
const { TextInputEmail } = this.state ;
const { TextInputPhoneNumber } = this.state ;
fetch(‘https://reactnativecode.000webhostapp.com/submit_user_info.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
name: TextInputName,
email: TextInputEmail,
phone_number: TextInputPhoneNumber
})
}).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
|
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: ‘#FF5722’,
// 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 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.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Name”
onChangeText={TextInputName => this.setState({TextInputName})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Email”
onChangeText={TextInputEmail => this.setState({TextInputEmail})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Phone Number”
onChangeText={TextInputPhoneNumber => this.setState({TextInputPhoneNumber})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<Button title=“Insert Text Input Data to Server” onPress={this.InsertDataToServer} 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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, TextInput, View, Alert, Button } from ‘react-native’;
class MainProject extends Component {
constructor(props) {
super(props)
this.state = {
TextInputName: ”,
TextInputEmail: ”,
TextInputPhoneNumber: ”
}
}
InsertDataToServer = () =>{
const { TextInputName } = this.state ;
const { TextInputEmail } = this.state ;
const { TextInputPhoneNumber } = this.state ;
fetch(‘https://reactnativecode.000webhostapp.com/submit_user_info.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
name: TextInputName,
email: TextInputEmail,
phone_number: TextInputPhoneNumber
})
}).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}>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Name”
onChangeText={TextInputName => this.setState({TextInputName})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Email”
onChangeText={TextInputEmail => this.setState({TextInputEmail})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
// Adding hint in Text Input using Place holder.
placeholder=“Enter Phone Number”
onChangeText={TextInputPhoneNumber => this.setState({TextInputPhoneNumber})}
// Making the Under line Transparent.
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<Button title=“Insert Text Input Data to Server” onPress={this.InsertDataToServer} 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: ‘#FF5722’,
// Set border Radius.
//borderRadius: 10 ,
}
});
AppRegistry.registerComponent(‘MainProject’, () => MainProject);
|
Screenshots :
Also Read :
Set View Height Width in Percentage Flex Dimensions in React Native
React Native Share API example to Share TextInput message from App
React Native Change Background Color Using Animation in Android iOS
Add New Activity in React Native App Using StackNavigator Android iOS Tutorial
React Native Create Picker Spinner Using Dynamic JSON MySQL Data
