This tutorial is the second part of JSON ListView with single Item From MySQL database Tutorial. In this tutorial we would going to create a fresh react native application with JSON data already inserted into MySQL database. This ListView data contain multiple students records which is a multi type data, like id, name, phone number and subject. So we would show – render Multiple Items of JSON data into each ListView item one by one.
What we are doing in this project
- Creating MySQL database with table.
- Insert some students record inside the db.
- Create PHP script to convert MySQL data into JSON data.
- Parse JSON data into React native android and iOS application.
- Set JSON data into ListView.
Contents in this project Create Custom JSON ListView with Multiple Items :
1. Create MySQL database on your hosting server.
2. Create a table inside MySQL database named as Student_Table . Student table holds 4 columns id, student_name, student_phone_number, student_subject.
3. Insert some random students records inside the table. I am inserting my M.C.A classmates name.
4. Create PHP Script to convert the MySQL db data into JSON form :
Now I am creating Two PHP files First one is DBConfig.php and second is StudentsList.php.
DBConfig.php :- This file contains your hosting server configuration like server host name, database name, database username and database password.
StudentsList.php :- This file fetch the MySQL table records and print them on screen in JSON form.
Code for DBConfig.php :
|
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 StudentsList.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 Student_Table”;
$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();
?>
|
Screenshot of JSON data after executing the StudentsList.php file :
5. Start a fresh React Native project. If you don’t know how then read my this tutorial.
6. Import AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform and TouchableOpacity component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform, TouchableOpacity} from ‘react-native’;
|
7. Create constructor in project’s class with props and set isLoading variable state true. The isLoading variable is used to control ActivityIndicator show and hide state.
|
1
2
3
4
5
6
|
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
|
8. Create function GetItem() to display the selected student name from ListView.
|
1
2
3
4
5
|
GetItem (student_name) {
Alert.alert(student_name);
}
|
9. Create componentDidMount() method after GetItem function. This is a react native’s inbuilt method.
|
1
2
3
4
|
componentDidMount() {
}
|
10. Create react native fetch web API inside the componentDidMount() function. This function would parse the JSON coming from Server using HTTP URL.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/StudentsList.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);
});
}
|
11. Create ListViewItemSeparator function just after the componentDidMount() function. This function is used to show a separator line between each ListView element.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
12. Create render() function after ListViewItemSeparator function, Now put a if condition inside it. Using this if condition we would check the isLoading value and if its true then we show the ActivityIndicator and if its falsethen would hide the ActivityIndicator .
|
1
2
3
4
5
6
7
8
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
|
13. Create a Parent View inside the default render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
14. Create ListView component inside the Parent View.
dataSource : This would set the JSON parse data into ListView.
renderSeparator : Call the ListViewItemSeparator function to show a separator line between ListView items.
renderRow={(rowData) => : This would used to show component inside the ListView. For example in our case we would show Image component and Text component in ListView.
TouchableOpacity : Call the GetItem() function on the onPress of TouchableOpacity so when user clicks any of the ListView item it would send the Student name with this function on 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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View style={styles.MainContainer}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{flex:1, flexDirection: ‘column’}} >
<TouchableOpacity onPress={this.GetItem.bind(this, rowData.student_name)} >
<Text style={styles.textViewContainer} >{‘id = ‘ + rowData.id}</Text>
<Text style={styles.textViewContainer} >{‘Name = ‘ + rowData.student_name}</Text>
<Text style={styles.textViewContainer} >{‘Phone Number = ‘ + rowData.student_phone_number}</Text>
<Text style={styles.textViewContainer} >{‘Subject = ‘ + rowData.student_subject}</Text>
</TouchableOpacity>
</View>
}
/>
</View>
);
}
|
15. Create custom css class.
|
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 :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
backgroundColor: ‘#00BCD4’,
padding: 5,
},
textViewContainer: {
textAlignVertical:‘center’,
padding:10,
fontSize: 20,
color: ‘#fff’,
}
});
|
16. 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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Platform, TouchableOpacity} from ‘react-native’;
class Project extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
GetItem (student_name) {
Alert.alert(student_name);
}
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/StudentsList.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);
});
}
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}>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) =>
<View style={{flex:1, flexDirection: ‘column’}} >
<TouchableOpacity onPress={this.GetItem.bind(this, rowData.student_name)} >
<Text style={styles.textViewContainer} >{‘id = ‘ + rowData.id}</Text>
<Text style={styles.textViewContainer} >{‘Name = ‘ + rowData.student_name}</Text>
<Text style={styles.textViewContainer} >{‘Phone Number = ‘ + rowData.student_phone_number}</Text>
<Text style={styles.textViewContainer} >{‘Subject = ‘ + rowData.student_subject}</Text>
</TouchableOpacity>
</View>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
backgroundColor: ‘#00BCD4’,
padding: 5,
},
textViewContainer: {
textAlignVertical:‘center’,
padding:10,
fontSize: 20,
color: ‘#fff’,
}
});
AppRegistry.registerComponent(‘Project’, () => Project);
|
Screenshot in iOS device :
Screenshots in Android device :
Also Read :
React Native Collapsible Expandable Animated Header on ScrollView
React Native Open Web Page in App Using WebView Android iOS Tutorial
React Native Create and Show Array Elements in Text using MAP
React Native Create Material Design SnackBar in Android iOS Example
React Native Remove Repeated Duplicate Object Items from Array
