This tutorial is the 2nd part of our previous tutorial Creating PHP Api for User registration. In previous tutorial i have explained about how we can create PHP Api which received data from our react native application and insert data into database. In this tutorial we would learn about writing code for app so we would get data from app user and send that data to our online hosting server and after done successfully we would print the response on app screen using Alert dialog box.
Content in this project React Native User Registration using PHP MySQL Database PART-2- Writing App Code:
1. The first step is to read our previous tutorial about Creating PHP API and make your own API using my code.
2. Open your project’s App.js file and import StyleSheet, TextInput, View, Alert, TouchableOpacity and Text component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from ‘react-native’;
|
3. Create your main export default class named as App.
|
1
2
3
|
export default class App extends Component {
}
|
4. Creating constructor() in your App class. In the constructor we would make 3 States named as name, email and password. These states will hold the values of all 3 Text Input components.
|
1
2
3
4
5
6
7
8
9
|
constructor(props) {
super(props)
this.state = {
name: ”,
email: ”,
password: ”
}
}
|
5. Creating a function named as registration_Function() in your App class. In this function we would first pass our Server domain URL with our created PHP API file like i did in below code. Now using the JSON.stringify method we would convert all 3 states data into JSON format and send to the URL. After sending the data the response come from server and we would print that response string in alert. We would call this function on click event.
|
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
|
registration_Function = () => {
fetch(‘https://reactnativetestapi.000webhostapp.com/registration_api.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
user_name: this.state.name,
user_email: this.state.email,
user_password: this.state.password
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
|
6. Creating 3 Text Input and 1 Touchable opacity component in render’s return block to make our main view. In TextInput we would simply updating the state value on change text event.
|
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
|
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 20, color: “#DD2C00”, textAlign: ‘center’, marginBottom: 15 }}>App User Registration Form</Text>
<TextInput
placeholder=“Enter User Name”
onChangeText={data => this.setState({ name: data })}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Email Address”
onChangeText={data => this.setState({ email: data })}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Password”
onChangeText={data => this.setState({ password: data })}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<TouchableOpacity style={styles.button} onPress={this.registration_Function} >
<Text style={styles.text}>Click Here to Registration </Text>
</TouchableOpacity>
</View>
);
}
|
7. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
margin: 10
},
TextInputStyleClass: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
width: ‘80%’,
borderWidth: 1,
borderColor: ‘#DD2C00’,
borderRadius: 5,
},
button: {
width: ‘80%’,
paddingTop: 2,
paddingBottom: 2,
backgroundColor: ‘#DD2C00’,
borderRadius: 3,
marginTop: 20
},
text: {
color: ‘#fff’,
fontSize: 20,
textAlign: ‘center’,
padding: 5
}
});
|
8. source code for App.js file class.
|
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
|
import React, { Component } from ‘react’;
import { StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from ‘react-native’;
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
name: ”,
email: ”,
password: ”
}
}
registration_Function = () => {
fetch(‘https://reactnativetestapi.000webhostapp.com/registration_api.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
user_name: this.state.name,
user_email: this.state.email,
user_password: this.state.password
})
}).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: “#DD2C00”, textAlign: ‘center’, marginBottom: 15 }}>App User Registration Form</Text>
<TextInput
placeholder=“Enter User Name”
onChangeText={data => this.setState({ name: data })}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Email Address”
onChangeText={data => this.setState({ email: data })}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter User Password”
onChangeText={data => this.setState({ password: data })}
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<TouchableOpacity style={styles.button} onPress={this.registration_Function} >
<Text style={styles.text}>Click Here to Registration </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: ‘center’,
alignItems: ‘center’,
flex: 1,
margin: 10
},
TextInputStyleClass: {
textAlign: ‘center’,
marginBottom: 7,
height: 40,
width: ‘80%’,
borderWidth: 1,
borderColor: ‘#DD2C00’,
borderRadius: 5,
},
button: {
width: ‘80%’,
paddingTop: 2,
paddingBottom: 2,
backgroundColor: ‘#DD2C00’,
borderRadius: 3,
marginTop: 20
},
text: {
color: ‘#fff’,
fontSize: 20,
textAlign: ‘center’,
padding: 5
}
});
|
Screenshot:
Also Read :
How to change Image border width in React Native Tutorial
React Native Get Clicked Position of Touch Screen Coordinates using PanResponder iOS Android Tutorial
React Native Creating Image Gallery using JSON iOS Android Tutorial
React Native Apply Filter on JSON ListView Data Using PHP MySQL
React Native Get Object Value From Array and Show on Screen one by one
