This tutorial is the fully advanced tutorial in react native because in this tutorial we would going to implement CRUD operations in react native android iOS applications. CRUD operations consist four type of major functions Add, Edit(Modify), Delete and View. So we would going to create a react native app with Insert Update Display Delete CRUD Operations From MySQL database using PHP.
What we are doing in this project :
We are creating a react native app with react-navigation library because without the react-navigation we cannot add multiple activities in our project. Now would insert student records in online MySQL database using PHP from our react native application. After that we would retrieve all those records into ListView in next activity. Now we would open the selected record into next activity and automatically fill each data into TextInput. We would also gives the option to delete the current selected data. So let’s get started .
Project Description File Structure:
PHP Files in this project :
- DBConfig.php
- InsertStudentData.php
- ShowAllStudentsList.php
- UpdateStudentRecord.php
- DeleteStudentRecord.php
Activity classes in this project created in App.js file
- MainActivity
- ShowStudentListActivity
- EditStudentRecordActivity
Contents in this project Insert Update Display Delete CRUD Operations From MySQL DB in react native using PHP :
1. Create a fresh MySQL database in your online hosting server.
2. Create a Table named as StudentDetailsTable with 5 columns student_id, student_name, student_class, student_phone_number and student_email. Now we would make the student_id as Primary key with Auto Increment. See the below screenshot for more details. This would be our main table and we would perform all CRUD operations on this table from our MySQL database.
3. Create 5 PHP Script files to Receive and Insert, Display, Update and Delete data from MySQL database from React Native app:
We would make 5 PHP files named as DBConfig.php , InsertStudentData.php , ShowAllStudentsList.php , UpdateStudentRecord.php and DeleteStudentRecord.php . You need to upload all these files to your hosting server.
- DBConfig.php : This file consist all the MySQL database connection configuration like MySQL database host name, MySQL database name, MySQL database username, MySQL database password.
- InsertStudentData.php : This file would receive the sent data from react native app and insert that data into MySQL table.
- ShowAllStudentsList.php : This file would convert all the existing present MySQL database data into JSON format.
- UpdateStudentRecord.php : This file would update the existing opened record in app.
- DeleteStudentRecord.php : This file would delete the existing open record in react native app.
1. Code for DBConfig.php.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”;
?>
|
2. Code for InsertStudentData.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
|
<?php
// Importing DBConfig.php file.
include ‘DBConfig.php’;
// Connecting to MySQL Database.
$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 Student name from JSON $obj array and store into $S_Name.
$S_Name = $obj[‘student_name’];
// Populate Student Class from JSON $obj array and store into $S_Class.
$S_Class = $obj[‘student_class’];
// Populate Student Phone Number from JSON $obj array and store into $S_Phone_Number.
$S_Phone_Number = $obj[‘student_phone_number’];
// Populate Email from JSON $obj array and store into $S_Email.
$S_Email = $obj[‘student_email’];
// Creating SQL query and insert the record into MySQL database table.
$Sql_Query = “insert into StudentDetailsTable (student_name,student_class,student_phone_number,student_email) values (‘$S_Name’,’$S_Class’,’$S_Phone_Number’,’$S_Email’)”;
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = ‘Record Successfully Inserted 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. Code for ShowAllStudentsList.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
|
<?php
include ‘DBConfig.php’;
// Create connection
$conn = new mysqli($HostName, $HostUser, $HostPass, $DatabaseName);
if ($conn->connect_error) {
die(“Connection failed: “ . $conn->connect_error);
}
// Creating SQL command to fetch all records from Table.
$sql = “SELECT * FROM StudentDetailsTable”;
$result = $conn->query($sql);
if ($result->num_rows >0) {
while($row[] = $result->fetch_assoc()) {
$item = $row;
$json = json_encode($item);
}
} else {
echo “No Results Found.”;
}
echo $json;
$conn->close();
?>
|
4. Code for UpdateStudentRecord.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
|
<?php
// Importing DBConfig.php file.
include ‘DBConfig.php’;
// Connecting to MySQL Database.
$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 Student ID from JSON $obj array and store into $S_Name.
$S_ID = $obj[‘student_id’];
// Populate Student name from JSON $obj array and store into $S_Name.
$S_Name = $obj[‘student_name’];
// Populate Student Class from JSON $obj array and store into $S_Class.
$S_Class = $obj[‘student_class’];
// Populate Student Phone Number from JSON $obj array and store into $S_Phone_Number.
$S_Phone_Number = $obj[‘student_phone_number’];
// Populate Email from JSON $obj array and store into $S_Email.
$S_Email = $obj[‘student_email’];
// Creating SQL query and insert the record into MySQL database table.
$Sql_Query = “UPDATE StudentDetailsTable SET student_name= ‘$S_Name’, student_class = ‘$S_Class’, student_phone_number = ‘$S_Phone_Number’, student_email = ‘$S_Email’ WHERE student_id = $S_ID”;
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = ‘Record Successfully Inserted 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);
?>
|
5. Code for DeleteStudentRecord.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
|
<?php
// Importing DBConfig.php file.
include ‘DBConfig.php’;
// Connecting to MySQL Database.
$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 Student ID from JSON $obj array and store into $S_ID.
$S_ID = $obj[‘student_id’];
// Creating SQL query and Updating the current record into MySQL database table.
$Sql_Query = “DELETE FROM StudentDetailsTable WHERE student_id = ‘$S_ID'” ;
if(mysqli_query($con,$Sql_Query)){
// If the record inserted successfully then show the message.
$MSG = ‘Record Deleted Successfully.’ ;
// Converting the message into JSON format.
$json = json_encode($MSG);
// Echo the message.
echo $json ;
}
else{
echo ‘Try Again’;
}
mysqli_close($con);
?>
|
4. Start a new react native project or open your existing project’s App.js file.
5. Open your project’s folder in Command Prompt / Terminal and install react-navigation library. by typing
npm install —save react–navigation command. You can read my this tutorial to understand how activity structure would works.
6. Import StyleSheet, View, Alert, TextInput, Button, Text, Platform, TouchableOpacity, ListView and ActivityIndicator component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, TextInput, Button, Text, Platform, TouchableOpacity, ListView, ActivityIndicator } from ‘react-native’;
|
7. Import StackNavigator from react-navigation library.
|
1
|
import { StackNavigator } from ‘react-navigation’;
|
8. Create a class named as MainActivity in your project. This would be your first screen of app with User registration from.
navigationOptions : Used to set the Activity title which display inside the Action Title bar.
constructor() : Creating 4 States inside the constructor() named as TextInput_Student_Name, TextInput_Student_Class, TextInput_Student_PhoneNumber, TextInput_Student_Email . Each state is used to hold the entered value from TextInput.
InsertStudentRecordsToServer() : This function would run the react native’s fetch() web api and send the all TextInput entered value to server and after successfully insertion it will show the response message coming from server into Alert dialog box.
GoTo_Show_StudentList_Activity_Function() : In this function we would open the ShowStudentListActivity represent as Second activity.
|
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
|
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
constructor(props) {
super(props)
this.state = {
TextInput_Student_Name: ”,
TextInput_Student_Class: ”,
TextInput_Student_PhoneNumber: ”,
TextInput_Student_Email: ”,
}
}
InsertStudentRecordsToServer = () =>{
fetch(‘https://reactnativecode.000webhostapp.com/Student/InsertStudentData.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
student_name : this.state.TextInput_Student_Name,
student_class : this.state.TextInput_Student_Class,
student_phone_number : this.state.TextInput_Student_PhoneNumber,
student_email: this.state.TextInput_Student_Email
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
GoTo_Show_StudentList_Activity_Function = () =>
{
this.props.navigation.navigate(‘Second’);
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: ‘center’, marginBottom: 7}}> Student Registration Form </Text>
<TextInput
placeholder=“Enter Student Name”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Name : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter Student Class”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Class : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter Student Phone Number”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_PhoneNumber : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter Student Email”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Email : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.InsertStudentRecordsToServer} >
<Text style={styles.TextStyle}> INSERT STUDENT RECORD TO SERVER </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.GoTo_Show_StudentList_Activity_Function} >
<Text style={styles.TextStyle}> SHOW ALL INSERTED STUDENT RECORDS IN LISTVIEW </Text>
</TouchableOpacity>
</View>
);
}
}
|
Screenshot of MainActivity :
9. Create class named as ShowStudentListActivity. This class would display all the entered students records in ListView.
constructor() : We are creating a Boolean type State named as isLoading. This state is used to show and hide the ActivityIndicator after done loading JSON data into ListView. If the isLoading value is true then it will show the ActivityIndicator and if the isLoading value is false then it will hide the ActivityIndicator.
navigationOptions : Used to set the Activity Title shows inside the Title Action bar.
componentDidMount() : This is a inbuilt function of React Native. This function would automatically calls on activity start up time. We would write the Fetch() Web code inside componentDidMount() method so when the this activity opens then it will start a web call and fetch the JSON data from server and display inside ListView. We are only displaying Student Names inside this ListView.
GetStudentIDFunction() : This function is very important for this class because in this function we would send the student_id, student_name, student_class, student_phone_number and student_email address to next EditStudentRecordActivity on ListView item onPress event. When use clicks on any ListView item then it will automatically get all the values form current selected record and navigate to next activity where it will be automatically received and filled into TextInput.
ListViewItemSeparator() : This function would render a separator line between each item of ListView.
|
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
|
class ShowStudentListActivity extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
static navigationOptions =
{
title: ‘ShowStudentListActivity’,
};
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/Student/ShowAllStudentsList.php’)
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson),
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
GetStudentIDFunction=(student_id,student_name, student_class, student_phone_number, student_email)=>{
this.props.navigation.navigate(‘Third’, {
ID : student_id,
NAME : student_name,
CLASS : student_class,
PHONE_NUMBER : student_phone_number,
EMAIL : student_email
});
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer_For_Show_StudentList_Activity}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={ (rowData) => <Text style={styles.rowViewContainer}
onPress={this.GetStudentIDFunction.bind(
this, rowData.student_id,
rowData.student_name,
rowData.student_class,
rowData.student_phone_number,
rowData.student_email
)} >
{rowData.student_name}
</Text> }
/>
</View>
);
}
}
|
Screenshot of ShowStudentListActivity :
10. Create a class named as EditStudentRecordActivity. This class is used to Edit the current open record to MySQL database. This class is also used to delete the current selected opened record.
constructor : We would create 5 state named as TextInput_Student_ID, TextInput_Student_Name, TextInput_Student_Class, TextInput_Student_PhoneNumber, TextInput_Student_Email in constructor(). Each state is used to store and hold the already sent data from previous activity.
componentDidMount() : Storing all the sent value from previous activity into State using this.props.navigation.state.params .
navigationOptions : Setting up the activity title shows inside the Title Action bar.
UpdateStudentRecord() : This function would get the all TextInput entered value and send them to server using fetch() API where they will update the existing record using ID.
DeleteStudentRecord() : This function would get the only Student ID from TextInput_Student_ID and send the only TextInput_Student_ID to server . On server we would delete the current record according to ID.
|
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
class EditStudentRecordActivity extends Component {
constructor(props) {
super(props)
this.state = {
TextInput_Student_ID: ”,
TextInput_Student_Name: ”,
TextInput_Student_Class: ”,
TextInput_Student_PhoneNumber: ”,
TextInput_Student_Email: ”,
}
}
componentDidMount(){
// Received Student Details Sent From Previous Activity and Set Into State.
this.setState({
TextInput_Student_ID : this.props.navigation.state.params.ID,
TextInput_Student_Name: this.props.navigation.state.params.NAME,
TextInput_Student_Class: this.props.navigation.state.params.CLASS,
TextInput_Student_PhoneNumber: this.props.navigation.state.params.PHONE_NUMBER,
TextInput_Student_Email: this.props.navigation.state.params.EMAIL,
})
}
static navigationOptions =
{
title: ‘EditStudentRecordActivity’,
};
UpdateStudentRecord = () =>{
fetch(‘https://reactnativecode.000webhostapp.com/Student/UpdateStudentRecord.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
student_id : this.state.TextInput_Student_ID,
student_name : this.state.TextInput_Student_Name,
student_class : this.state.TextInput_Student_Class,
student_phone_number : this.state.TextInput_Student_PhoneNumber,
student_email: this.state.TextInput_Student_Email
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server updating records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
DeleteStudentRecord = () =>{
fetch(‘https://reactnativecode.000webhostapp.com/Student/DeleteStudentRecord.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
student_id : this.state.TextInput_Student_ID
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
this.props.navigation.navigate(‘First’);
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: ‘center’, marginBottom: 7}}> Edit Student Record Form </Text>
<TextInput
placeholder=“Student Name Shows Here”
value={this.state.TextInput_Student_Name}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Name : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Student Class Shows Here”
value={this.state.TextInput_Student_Class}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Class : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Student Phone Number Shows Here”
value={this.state.TextInput_Student_PhoneNumber}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_PhoneNumber : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Student Email Shows Here”
value={this.state.TextInput_Student_Email}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Email : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.UpdateStudentRecord} >
<Text style={styles.TextStyle}> UPDATE STUDENT RECORD </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.DeleteStudentRecord} >
<Text style={styles.TextStyle}> DELETE CURRENT RECORD </Text>
</TouchableOpacity>
</View>
);
}
}
|
11. Create StackNavigator and define all your activity classes inside it.
|
1
2
3
4
5
6
7
8
9
10
11
|
export default MyNewProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: ShowStudentListActivity },
Third: { screen: EditStudentRecordActivity }
});
|
12. Create CSS Style classes for All activities.
|
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
|
const styles = StyleSheet.create({
MainContainer :{
alignItems: ‘center’,
flex:1,
paddingTop: 30,
backgroundColor: ‘#fff’
},
MainContainer_For_Show_StudentList_Activity :{
flex:1,
paddingTop: (Platform.OS == ‘ios’) ? 20 : 0,
marginLeft: 5,
marginRight: 5
},
TextInputStyleClass: {
textAlign: ‘center’,
width: ‘90%’,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: ‘#FF5722’,
borderRadius: 5 ,
},
TouchableOpacityStyle: {
paddingTop:10,
paddingBottom:10,
borderRadius:5,
marginBottom:7,
width: ‘90%’,
backgroundColor: ‘#00BCD4’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
},
rowViewContainer: {
fontSize: 20,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}
});
|
13. Complete source code for App.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Alert, TextInput, Button, Text, Platform, TouchableOpacity, ListView, ActivityIndicator } from ‘react-native’;
import { StackNavigator } from ‘react-navigation’;
class MainActivity extends Component {
static navigationOptions =
{
title: ‘MainActivity’,
};
constructor(props) {
super(props)
this.state = {
TextInput_Student_Name: ”,
TextInput_Student_Class: ”,
TextInput_Student_PhoneNumber: ”,
TextInput_Student_Email: ”,
}
}
InsertStudentRecordsToServer = () =>{
fetch(‘https://reactnativecode.000webhostapp.com/Student/InsertStudentData.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
student_name : this.state.TextInput_Student_Name,
student_class : this.state.TextInput_Student_Class,
student_phone_number : this.state.TextInput_Student_PhoneNumber,
student_email: this.state.TextInput_Student_Email
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
GoTo_Show_StudentList_Activity_Function = () =>
{
this.props.navigation.navigate(‘Second’);
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: ‘center’, marginBottom: 7}}> Student Registration Form </Text>
<TextInput
placeholder=“Enter Student Name”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Name : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter Student Class”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Class : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter Student Phone Number”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_PhoneNumber : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Enter Student Email”
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Email : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.InsertStudentRecordsToServer} >
<Text style={styles.TextStyle}> INSERT STUDENT RECORD TO SERVER </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.GoTo_Show_StudentList_Activity_Function} >
<Text style={styles.TextStyle}> SHOW ALL INSERTED STUDENT RECORDS IN LISTVIEW </Text>
</TouchableOpacity>
</View>
);
}
}
class ShowStudentListActivity extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
static navigationOptions =
{
title: ‘ShowStudentListActivity’,
};
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/Student/ShowAllStudentsList.php’)
.then((response) => response.json())
.then((responseJson) => {
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
isLoading: false,
dataSource: ds.cloneWithRows(responseJson),
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
GetStudentIDFunction=(student_id,student_name, student_class, student_phone_number, student_email)=>{
this.props.navigation.navigate(‘Third’, {
ID : student_id,
NAME : student_name,
CLASS : student_class,
PHONE_NUMBER : student_phone_number,
EMAIL : student_email
});
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer_For_Show_StudentList_Activity}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={ (rowData) => <Text style={styles.rowViewContainer}
onPress={this.GetStudentIDFunction.bind(
this, rowData.student_id,
rowData.student_name,
rowData.student_class,
rowData.student_phone_number,
rowData.student_email
)} >
{rowData.student_name}
</Text> }
/>
</View>
);
}
}
class EditStudentRecordActivity extends Component {
constructor(props) {
super(props)
this.state = {
TextInput_Student_ID: ”,
TextInput_Student_Name: ”,
TextInput_Student_Class: ”,
TextInput_Student_PhoneNumber: ”,
TextInput_Student_Email: ”,
}
}
componentDidMount(){
// Received Student Details Sent From Previous Activity and Set Into State.
this.setState({
TextInput_Student_ID : this.props.navigation.state.params.ID,
TextInput_Student_Name: this.props.navigation.state.params.NAME,
TextInput_Student_Class: this.props.navigation.state.params.CLASS,
TextInput_Student_PhoneNumber: this.props.navigation.state.params.PHONE_NUMBER,
TextInput_Student_Email: this.props.navigation.state.params.EMAIL,
})
}
static navigationOptions =
{
title: ‘EditStudentRecordActivity’,
};
UpdateStudentRecord = () =>{
fetch(‘https://reactnativecode.000webhostapp.com/Student/UpdateStudentRecord.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
student_id : this.state.TextInput_Student_ID,
student_name : this.state.TextInput_Student_Name,
student_class : this.state.TextInput_Student_Class,
student_phone_number : this.state.TextInput_Student_PhoneNumber,
student_email: this.state.TextInput_Student_Email
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server updating records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
DeleteStudentRecord = () =>{
fetch(‘https://reactnativecode.000webhostapp.com/Student/DeleteStudentRecord.php’, {
method: ‘POST’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({
student_id : this.state.TextInput_Student_ID
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
this.props.navigation.navigate(‘First’);
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{fontSize: 20, textAlign: ‘center’, marginBottom: 7}}> Edit Student Record Form </Text>
<TextInput
placeholder=“Student Name Shows Here”
value={this.state.TextInput_Student_Name}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Name : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Student Class Shows Here”
value={this.state.TextInput_Student_Class}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Class : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Student Phone Number Shows Here”
value={this.state.TextInput_Student_PhoneNumber}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_PhoneNumber : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder=“Student Email Shows Here”
value={this.state.TextInput_Student_Email}
onChangeText={ TextInputValue => this.setState({ TextInput_Student_Email : TextInputValue }) }
underlineColorAndroid=‘transparent’
style={styles.TextInputStyleClass}
/>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.UpdateStudentRecord} >
<Text style={styles.TextStyle}> UPDATE STUDENT RECORD </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } style={styles.TouchableOpacityStyle} onPress={this.DeleteStudentRecord} >
<Text style={styles.TextStyle}> DELETE CURRENT RECORD </Text>
</TouchableOpacity>
</View>
);
}
}
export default MyNewProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: ShowStudentListActivity },
Third: { screen: EditStudentRecordActivity }
});
const styles = StyleSheet.create({
MainContainer :{
alignItems: ‘center’,
flex:1,
paddingTop: 30,
backgroundColor: ‘#fff’
},
MainContainer_For_Show_StudentList_Activity :{
flex:1,
paddingTop: (Platform.OS == ‘ios’) ? 20 : 0,
marginLeft: 5,
marginRight: 5
},
TextInputStyleClass: {
textAlign: ‘center’,
width: ‘90%’,
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: ‘#FF5722’,
borderRadius: 5 ,
},
TouchableOpacityStyle: {
paddingTop:10,
paddingBottom:10,
borderRadius:5,
marginBottom:7,
width: ‘90%’,
backgroundColor: ‘#00BCD4’
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
},
rowViewContainer: {
fontSize: 20,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native Set TextInput maxLength Validation iOS Android Example
Add Custom External Text Fonts in React Native App Android iOS Tutorial
React Native Creating Image Gallery using JSON iOS Android Tutorial
React Native Picker Spinner DropDown List iOS Android Example
React Native Show Copyright Symbol © Icon in Text in iOS Android
