The Image component has its own inbuilt method known as Image.getSize(). This method is used to find Online remote server image dimensions in pixels. This function is mostly used in Image Wallpaper downloading applications where the app developer shows image real size inside the application and user knows the actual image size. So in this tutorial we would going to make a react native app to Get HTTP Remote Image Height Width Size in Dimensions in pixels in iOS Android application Example tutorial.
Contents in this project Get HTTP Remote Image Height Width Size in Dimensions in Pixels in React Native iOS Android app Example:
1. Import StyleSheet, View, Image and Text component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, Text} from ‘react-native’;
|
2. Create constructor() in your project. Now we would make 2 state named as ImageWidth and ImageHeight and set their default value as null. These states is used to store the retrieved Image dimensions. We would also create a this.ImageURI in constructor() to store the online image URL.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
constructor(){
super();
this.state = {
ImageWidth: null,
ImageHeight: null,
}
this.ImageURI = ‘/wp-content/uploads/2017/10/Guitar.jpg’;
}
|
3. Create componentDidMount() inbuilt method in your class. This method will automatically calls on app loading time. Inside this function we would create the Image.getSize() function and store the retrieved Image Height and Width in states.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
componentDidMount(){
Image.getSize( this.ImageURI, ( Width, Height ) =>
{
this.setState({ ImageWidth: Width, ImageHeight: Height });
},(errorMsg) =>
{
console.log( errorMsg );
});
}
|
4. Create a Root View in render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
ender() {
return (
<View style={styles.MainContainer}>
</View>
);
}
|
5. Create a Image component and 2 Text component in Root View. The image component is used to display the image coming from online HTTP URL and the Text component is used to show the image height and width.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
ender() {
return (
<View style={styles.MainContainer}>
<Image source = {{ uri: this.ImageURI }} style = { styles.ImageStyle } />
<View style={{alignItems: ‘center’}}>
<Text style={styles.TextStyle}>{this.state.ImageWidth } Pixels (Width) </Text>
<Text style={styles.TextStyle}>{this.state.ImageHeight } Pixels (Height) </Text>
</View>
</View>
);
}
|
6. Create Style for View, Image and Text component.
|
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
|
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
},
ImageStyle:
{
resizeMode: ‘cover’,
width: ‘50%’,
height: ‘50%’
},
TextStyle:
{
fontSize: 18,
color: ‘#000’,
textAlign: ‘center’
}
});
|
7. 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
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Image, Text} from ‘react-native’;
export default class Mynewproject extends Component {
constructor(){
super();
this.state = {
ImageWidth: null,
ImageHeight: null,
}
this.ImageURI = ‘/wp-content/uploads/2017/10/Guitar.jpg’;
}
componentDidMount(){
Image.getSize( this.ImageURI, ( Width, Height ) =>
{
this.setState({ ImageWidth: Width, ImageHeight: Height });
},(errorMsg) =>
{
console.log( errorMsg );
});
}
render() {
return (
<View style={styles.MainContainer}>
<Image source = {{ uri: this.ImageURI }} style = { styles.ImageStyle } />
<View style={{alignItems: ‘center’}}>
<Text style={styles.TextStyle}>{this.state.ImageWidth } Pixels (Width) </Text>
<Text style={styles.TextStyle}>{this.state.ImageHeight } Pixels (Height) </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer :
{
flex:1,
padding: 10,
justifyContent: ‘center’,
alignItems: ‘center’,
},
ImageStyle:
{
resizeMode: ‘cover’,
width: ‘50%’,
height: ‘50%’
},
TextStyle:
{
fontSize: 18,
color: ‘#000’,
textAlign: ‘center’
}
});
|
Screenshot in Android device :
Screenshot in iOS device :
Also Read :
React Native WebView Load Local HTML File From Assets Folder
React Native Add Background Animation on ScrollView Scroll Event
Create and Call State in Functional Component in React Native Hooks
React Native Add Show Dollar Rupees Euro Pound Currency Symbols in iOS Android
Add Rounded Corner Borders to Text Input in React Native Android iOS
