The default image also known as Image PlaceHolder is used to Show Default Image Before loading Real Image from server using HTTP URL. This image is like a default image thumbnail with some normal image so user will know the image is still in loading process. So in this tutorial we would going to Display Default Image Before loading Real Image as Image PlaceHolder in iOS Android React Native Example tutorial.
Contents in this project Show Default Image Before loading Real Image PlaceHolder iOS Android React Native Tutorial:
1. Create a Folder named as images in Your_React_Native_Project_Folder. We are calling the default image from this folder so if the network is not available then it will load directly from local resource.
2. Download our Default Thumbnail Image from below and copy inside Your_React_Native_Project_Folder -> images folder.
3. Import StyleSheet, View, Image and Button component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, Button } from ‘react-native’;
|
4. Create a State named as loadingImage and set its default value as False. This State is used to show default image before loading real image and if the image loaded successfully it will display us the real image.
|
1
2
3
4
5
6
7
8
9
10
|
constructor(){
super();
this.state={
loadingImage : false
}
}
|
5. Create a function named as LoadRealImage(), Inside this function we would simply update the State value.
|
1
2
3
4
5
|
LoadRealImage(){
this.setState({ loadingImage: true });
}
|
6. Create a Root View in render’s return block, This View is our default root View.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
7. Create a Image component in Root View. We would calling the source of image using Ternary operator with State value.
How This works(Must Read) : Using the Ternary operator we would set a condition in image source prop that it the state value is false then it will execute the second part of source which is the Default Image and when user clicks on the Button and update the State value it will execute the first part of Source.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
render() {
return (
<View style={styles.MainContainer}>
<Image
source = { this.state.loadingImage
?
{ uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’ }
:
require(‘./images/default_image.png’)} style = {{height: 200, width: 250, resizeMode : ‘stretch’} }
style = { styles.imageStyle }
/>
</View>
);
}
|
8. Create a button in Root View and call the LoadRealImage() function.
|
1
|
<Button title=“Load Image From Server” onPress={this.LoadRealImage.bind(this)} />
|
9. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
},
imageStyle:
{
resizeMode: ‘center’,
width: ‘50%’,
height: ‘50%’,
}
});
|
10. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, Button } from ‘react-native’;
export default class Myproject extends Component {
constructor(){
super();
this.state={
loadingImage : false
}
}
LoadRealImage(){
this.setState({ loadingImage: true });
}
render() {
return (
<View style={styles.MainContainer}>
<Image
source = { this.state.loadingImage
?
{ uri: ‘/wp-content/uploads/2017/10/Guitar.jpg’ }
:
require(‘./images/default_image.png’)} style = {{height: 200, width: 250, resizeMode : ‘stretch’} }
style = { styles.imageStyle }
/>
<Button title=“Load Image From Server” onPress={this.LoadRealImage.bind(this)} />
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
},
imageStyle:
{
resizeMode: ‘center’,
width: ‘50%’,
height: ‘50%’,
}
});
|
Screenshot in Android device:
Screenshots in iOS device :
Also Read :
React Native Show Progress bar While Loading WebView Android iOS
How to change Image border width in React Native Tutorial
React Native Create Picker Spinner Using Dynamic JSON MySQL Data
React Native Call Function in Functional Component Example Tutorial
Wish You All a Very Very Happy New Year 2019
