As you can see in our previous tutorials we have created several types of JSON flatlist and now we are creating completely dynamic custom JSON FlatList with Images and Text component in react native application. The images is uploaded on our online web hosting server and images URL(Path) along with image name is stored inside MySQL database. We are using PHP scripting language as a server language in order to convert MySQL database data into JSON format because react native supports JSON format and we should convert all the MySQL data into JSON in order to use inside react native app. So let’s get started .
Contents in this project Create JSON FlatList with Images and Text in react native iOS Android react native app:
1. We already have define all the process of creating MySQL database, Storing images path along with their names in MySQL and converting MySQL data into JSON in our previous ListView tutorial, So read this tutorial Here before going further because we are using the same database and JSON.
Screenshot of JSON after running FlowersList.php file in web browser(Google chrome):
2. Import StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert and YellowBox components in your project’s class.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert, YellowBox } from ‘react-native’;
|
3. Create constructor() in your class and make a Boolean State named as isLoading and set its default value as True. This state is used to show and hide the ActivityIndicator on data loading. We would also putting the YellowBox warning ignoring code in order to remove the Yellow box warning message of Warning componentwillmount is Deprecated.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
constructor(props) {
super(props);
this.state = {
isLoading: true
}
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
|
4. Create a function named as GetItem() with flower_name parameter, This function is called on FlatList single item click event and display us the selected flower name in Alert message.
|
1
2
3
4
5
|
GetItem (flower_name) {
Alert.alert(flower_name);
}
|
5. Create a function named as FlatListItemSeparator(), This function would render a horizontal .5 pixel line between each FlatList item.
|
1
2
3
4
5
6
7
8
9
10
11
|
FlatListItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
|
6. Creating a function named as webCall(), Inside this function we would call the JSON using fetch() web API method. We are calling the online URL and parse the fetched JSON in this function.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
webCall=()=>{
return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.php’)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
|
7. Creating componentDidMount() inbuilt function and call the above webCall() function. This function would automatically calls on app startup time so when the app stars it will parse the JSON.
|
1
2
3
4
5
|
componentDidMount(){
this.webCall();
}
|
8. Creating a IF conditional block with isLoading state in render’s block, So if the state value is true then it will display the ActivityIndicator and when data loading is stop or done then it will hide the ActivityIndicator.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
<ActivityIndicator size=“large” />
</View>
);
}
return (
);
}
|
9. Creating the FlatList component inside render’s return block to show JSON FlatList with Images and Text.
data : Setting up the dataSource state inside it.
ItemSeparatorComponent : Calling the FlatListItemSeparator() function to show separator line.
|
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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
<ActivityIndicator size=“large” />
</View>
);
}
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex:1, flexDirection: ‘row’}}>
<Image source = {{ uri: item.flower_image_url }} style={styles.imageView} />
<Text onPress={this.GetItem.bind(this, item.flower_name)} style={styles.textView} >{item.flower_name}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
|
10. 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
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 5,
marginTop: (Platform.OS === ‘ios’) ? 20 : 0,
},
imageView: {
width: ‘50%’,
height: 100 ,
margin: 7,
borderRadius : 7
},
textView: {
width:‘50%’,
textAlignVertical:‘center’,
padding:10,
color: ‘#000’
}
});
|
11. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, Platform, View, ActivityIndicator, FlatList, Text, Image, Alert, YellowBox } from ‘react-native’;
export default class Project extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true
}
YellowBox.ignoreWarnings([
‘Warning: componentWillMount is deprecated’,
‘Warning: componentWillReceiveProps is deprecated’,
]);
}
GetItem (flower_name) {
Alert.alert(flower_name);
}
FlatListItemSeparator = () => {
return (
<View
style={{
height: .5,
width: “100%”,
backgroundColor: “#000”,
}}
/>
);
}
webCall=()=>{
return fetch(‘https://reactnativecode.000webhostapp.com/FlowersList.php’)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
componentDidMount(){
this.webCall();
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
<ActivityIndicator size=“large” />
</View>
);
}
return (
<View style={styles.MainContainer}>
<FlatList
data={ this.state.dataSource }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={({item}) =>
<View style={{flex:1, flexDirection: ‘row’}}>
<Image source = {{ uri: item.flower_image_url }} style={styles.imageView} />
<Text onPress={this.GetItem.bind(this, item.flower_name)} style={styles.textView} >{item.flower_name}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
margin: 5,
marginTop: (Platform.OS === ‘ios’) ? 20 : 0,
},
imageView: {
width: ‘50%’,
height: 100 ,
margin: 7,
borderRadius : 7
},
textView: {
width:‘50%’,
textAlignVertical:‘center’,
padding:10,
color: ‘#000’
}
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native Calculate Square Cube and Square Root Cube Root
React Native Simple Custom GridView Layout Android iOS Tutorial
Add Single Line And Multiple Line Comments Syntax in React Native JSX
React Native Check Text Input is Empty or Not Android iOS Tutorial
React Native Simple Modal Component iOS Android Example Tutorial
