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.