How to retrieve actual image sizes with React Native?

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.