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 = 'https://reactnativecode.com/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 = 'https://reactnativecode.com/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 :
hi sir,
sorry for discussion.
if any choice to add in tool bar (list of the total created examples react-native). it’s easly recognized.
Thanks for comment Murthy, Please explain more briefly what you want to say ?
Nice explanation, what if we have multiple images, setState value will update the existing state and we will lose the image width and height of previous image.
Aryan for that you can use FlatList or ListView so if you click on the image then it will load the selected image height and width and you can also show it individually.
This approach returns wrong dimensions for Android
Thanks for telling me, Can you tell me which Image extension type you are using ?