Hello Guys , Creating custom JSON ListView with Images and Text is most probably used in all type of android and iOS applications. It is used to show multiple amount of data with images. Like product list in which one side its show the product image and other side product name. So in this tutorial we would going to create an react native application to show Custom JSON ListView With Images and Text.
What we are doing in this project – A Little Description of Tutorial :
- Creating MySQL database.
- Creating Table in MySQL database.
- Upload Images on Hosting server.
- Save Uploaded images URL inside MySQL database.
- Make PHP script to convert MySQL data into JSON.
- Parsing JSON data into ListView in App.
- Populating Image from image URL and set into Image component.
- Populating Text from text objects and set into Text component.
- Show Images + Text with combination into ListView.
Contents in this project Custom JSON ListView With Images and Text Example Tutorial :
1. Create MySQL database on your hosting server.
2. Inside that MySQL database create a fresh table named as Flowers_Info_List . The table contain 3 columns id, flower_name and flower_image_url. The table should look like below screenshot :
3. Open File manager of your hosting server and create a new folder named as images and upload all of your images inside that folder.
4. Save image URL inside your Table with specific image name. After done saving all images path in table the table should look like below screenshot:
5. Create PHP script to convert MySQL db data into JSON data :
Now create Two PHP files First one is DBConfig.php and second is FlowersList.php.
DBConfig.php :- This file contains your hosting server configuration like server host name, database name, database username and database password.
FlowersList.php :- This file fetch the MySQL records from table and convert them into JSON than ECHO them on screen, so they can be accessible.
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 FlowersList.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 Flowers_Info_List”;
$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 after running FlowersList.php file :
6. Start a fresh React Native project. If you don’t know how then read my this tutorial.
7. Add AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert, Image and Platform component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert,Image, Platform} from ‘react-native’;
|
8. 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
}
}
|
9. Create GetItem named function just after the constructor close. This function is used to display the ListView clicked item value.
|
1
2
3
4
5
|
GetItem (flower_name) {
Alert.alert(flower_name);
}
|
10. Create componentDidMount() method after GetItem function. This is a react native’s inbuilt method.
|
1
2
3
4
|
componentDidMount() {
}
|
11. Create react native fetch web API inside the componentDidMount() function. This function would parse the JSON.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.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);
});
}
|
12. 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
|
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
13. 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 false then 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>
);
}
|
14. Create return block inside the render function. Now put a View as parent View, Inside the View create ListView component.
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.
|
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
|
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: ‘row’}}>
<Image source = {{ uri: rowData.flower_image_url }} style={styles.imageViewContainer} />
<Text onPress={this.GetItem.bind(this, rowData.flower_name)} style={styles.textViewContainer} >{rowData.flower_name}</Text>
</View>
}
/>
</View>
);
}
|
15. Create custom css style class.
MainContainer : Setup the complete View as parent.
imageViewContainer : Style the Image component present inside the ListView.
textViewContainer : Style the Text component present in 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
|
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 5,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
},
imageViewContainer: {
width: ‘50%’,
height: 100 ,
margin: 10,
borderRadius : 10
},
textViewContainer: {
textAlignVertical:‘center’,
width:‘50%’,
padding:20
}
});
|
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
|
import React, { Component } from ‘react’;
import { AppRegistry, StyleSheet, ActivityIndicator, ListView, Text, View, Alert,Image, Platform} from ‘react-native’;
class Mainproject extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
}
GetItem (flower_name) {
Alert.alert(flower_name);
}
componentDidMount() {
return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.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: ‘row’}}>
<Image source = {{ uri: rowData.flower_image_url }} style={styles.imageViewContainer} />
<Text onPress={this.GetItem.bind(this, rowData.flower_name)} style={styles.textViewContainer} >{rowData.flower_name}</Text>
</View>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: ‘center’,
flex:1,
margin: 5,
paddingTop: (Platform.OS === ‘ios’) ? 20 : 0,
},
imageViewContainer: {
width: ‘50%’,
height: 100 ,
margin: 10,
borderRadius : 10
},
textViewContainer: {
textAlignVertical:‘center’,
width:‘50%’,
padding:20
}
});
AppRegistry.registerComponent(‘Mainproject’, () => Mainproject);
|
Screenshots in iOS device :
Screenshot in iOS device :
Also Read :
React Native Insert Break Line Text Multiple Line Text Example
React Native Material Bottom Navigation View for Android iOS Example
React Navigation 5.x Show Image Icon in Header Bar React Native
React Native Create Disabled Button State Using TouchableOpacity
Create Global Scope Variables in React Native used between Activities
