React Native Get HTTP Remote Image Height Width Size in Dimensions iOS Android Example

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.

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.

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.

4. Create a Root View in render’s return block.

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.

6. Create Style for View, Image and Text component.

7. Complete source code for App.js File :

Screenshot in Android device :

Get HTTP Remote Image Height Width Size in Dimensions

Screenshot in iOS device :

4 Comments

  1. 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.

  2. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *