Categories
JavaScript Answers React Native Answers

How to retrieve actual image sizes with React Native?

Spread the love

Sometimes, we want to retrieve actual image sizes with React Native.

In this article, we’ll look at how to retrieve actual image sizes with React Native.

How to retrieve actual image sizes with React Native?

To retrieve actual image sizes with React Native, we can use the Image.getSize method.

For instance, we write:

import * as React from 'react';
import { View, Image } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  const uri = 'https://picsum.photos/200/300';
  const size = Image.getSize(uri, (width, height) =>
    console.log(width, height)    
  );
  console.log(size);

  return (
    <View>
      <Image source={{ uri }} style={{ width: 200, height: 300 }} />
    </View>
  );
}

to call Image.getSize with the image uri and callback that takes the image width and height as parameters.

As a result, we see the image at the given uri‘s width and height logged.

Conclusion

To retrieve actual image sizes with React Native, we can use the Image.getSize method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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