Image Gallery also known as Photo Album is used to show multiple images on user’s screen with Tap to open feature. Image Gallery is a layout on your application where you can see all the application images at a single place and you can open them by tapping. We are using the FlatList in this tutorial to creating image gallery and to show images in Grid format we are using numColumns = {2} prop of FlatList. To show image individually we would use Modal component, this component allow us to create a popup on screen with Fade in and Fade out animation effect. So in this tutorial we would going to Creating Image Gallery using JSON parsing data in iOS Android react native application example tutorial.
Contents in this project Creating Image Gallery using JSON iOS Android Tutorial in React Native App:
1. JSON used in this tutorial is already created inside my previous tutorial Custom JSON ListView with Images and Text. I have explained all the MySQL database and PHP files to creating JSON in my previous tutorial.
2. Screenshot of JSON.
3. Import Platform, StyleSheet, View, FlatList, ActivityIndicator, Image, Modal and TouchableOpacity component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, FlatList, ActivityIndicator, Image, Modal, TouchableOpacity } from ‘react-native’;
|
4. Creating constructor() in your project, Now we would make 3 State named as isLoading, ModalVisibleStatus and TempImageURL .
isLoading : Used to Show and Hide the activity indicator after successfully JSON parsed.
ModalVisibleStatus : Used to show and hide the Modal component.
TempImageURL : Used to hold the single image URL as Source while we show individually image in Modal.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
constructor()
{
super();
this.state = {
isLoading: true,
ModalVisibleStatus: false,
TempImageURL : ”
}
}
|
5. Creating componentDidMount() inbuilt method to Parse JSON data and store JSON into dataSource.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
componentDidMount() {
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);
});
}
|
6. Creating a function named as ShowModalFunction() with 2 parameters visible and imageURL. visible is used to hold the Modal visibility status which is in True or False and imageURL is used to hold the Image HTTP Path when user click on any image. We would also store both values State.
|
1
2
3
4
5
6
7
8
9
10
|
ShowModalFunction(visible, imageURL)
{
this.setState({
ModalVisibleStatus: visible,
TempImageURL : imageURL});
}
|
7. Put a IF condition in render’s block using State value to show or hide the Activity Indicator on data load.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
<ActivityIndicator size=“large” />
</View>
);
}
return (
);
}
|
8. Creating a Root View in render’s return block, This view is our main view.
|
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
|
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>
<ActivityIndicator size=“large” />
</View>
);
}
return (
<View style={styles.MainContainer}>
</View>
);
}
|
9. Creating FlatList component in Root View to show all the images in Grid Format.
|
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
|
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 }
renderItem={({item}) =>
<View style={{flex:1, flexDirection: ‘column’, margin:1 }}>
<TouchableOpacity onPress={this.ShowModalFunction.bind(this, true, item.flower_image_url)} >
<Image style={styles.imageThumbnail} source = {{ uri: item.flower_image_url }} />
</TouchableOpacity>
</View>
}
numColumns = { 2 }
keyExtractor={(item, index) => index}
/>
</View>
);
}
|
10. Now finally we need to put a Curly brackets block after FlatList and inside this block we would use the Ternary operator with State to show and hide the Modal component. Modal is used to show single image at a time.
|
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
|
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 }
renderItem={({item}) =>
<View style={{flex:1, flexDirection: ‘column’, margin:1 }}>
<TouchableOpacity onPress={this.ShowModalFunction.bind(this, true, item.flower_image_url)} >
<Image style={styles.imageThumbnail} source = {{ uri: item.flower_image_url }} />
</TouchableOpacity>
</View>
}
numColumns = { 2 }
keyExtractor={(item, index) => index}
/>
{
this.state.ModalVisibleStatus
?
(
<Modal
transparent={false}
animationType={“fade”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={styles.modalView}>
<Image style={styles.mainImage} source = {{ uri: this.state.TempImageURL }} />
<TouchableOpacity
activeOpacity = { 0.5 }
style={styles.TouchableOpacity_Style}
onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<Image source={{uri: ‘/wp-content/uploads/2018/01/close_button.png’}}
style={{width:25, height: 25}} />
</TouchableOpacity>
</View>
</Modal>
)
:
null
}
</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
imageThumbnail: {
justifyContent: ‘center’,
alignItems: ‘center’,
height: 100
},
mainImage:{
justifyContent: ‘center’,
alignItems: ‘center’,
height: ‘100%’,
width:‘98%’,
resizeMode : ‘contain’
},
modalView:{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘rgba(0,0,0,0.4)’
},
TouchableOpacity_Style:{
width:25,
height: 25,
top:9,
right:9,
position: ‘absolute’
}
});
|
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
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
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, FlatList, ActivityIndicator, Image, Modal, TouchableOpacity } from ‘react-native’;
export default class App extends Component{
constructor()
{
super();
this.state = {
isLoading: true,
ModalVisibleStatus: false,
TempImageURL : ”
}
}
componentDidMount() {
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);
});
}
ShowModalFunction(visible, imageURL)
{
this.setState({
ModalVisibleStatus: visible,
TempImageURL : imageURL});
}
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 }
renderItem={({item}) =>
<View style={{flex:1, flexDirection: ‘column’, margin:1 }}>
<TouchableOpacity onPress={this.ShowModalFunction.bind(this, true, item.flower_image_url)} >
<Image style={styles.imageThumbnail} source = {{ uri: item.flower_image_url }} />
</TouchableOpacity>
</View>
}
numColumns = { 2 }
keyExtractor={(item, index) => index}
/>
{
this.state.ModalVisibleStatus
?
(
<Modal
transparent={false}
animationType={“fade”}
visible={this.state.ModalVisibleStatus}
onRequestClose={ () => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<View style={styles.modalView}>
<Image style={styles.mainImage} source = {{ uri: this.state.TempImageURL }} />
<TouchableOpacity
activeOpacity = { 0.5 }
style={styles.TouchableOpacity_Style}
onPress={() => { this.ShowModalFunction(!this.state.ModalVisibleStatus)} } >
<Image source={{uri: ‘/wp-content/uploads/2018/01/close_button.png’}}
style={{width:25, height: 25}} />
</TouchableOpacity>
</View>
</Modal>
)
:
null
}
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
justifyContent: ‘center’,
flex:1,
paddingTop: (Platform.OS) === ‘ios’ ? 20 : 0
},
imageThumbnail: {
justifyContent: ‘center’,
alignItems: ‘center’,
height: 100
},
mainImage:{
justifyContent: ‘center’,
alignItems: ‘center’,
height: ‘100%’,
width:‘98%’,
resizeMode : ‘contain’
},
modalView:{
flex:1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘rgba(0,0,0,0.4)’
},
TouchableOpacity_Style:{
width:25,
height: 25,
top:9,
right:9,
position: ‘absolute’
}
});
|
Screenshots in Android device:
Screenshots in iOS device:
Also Read :
Run React Native Project on Specific iOS Simulator Device in MAC
React Native Create Price Card View Beautiful UI Design iOS Android
React Native Disable Hide ScrollBar ScrollIndicator in ScrollView
Create Multi Line Text Breaking Text Line From Middle in React Native
React Native Take Screenshot of App Programmatically in iOS Android
