Image.getSize not returning correct image dimension from url

[divyaswormakai]

Description

• Image is taken from 'react-native';

The above getSize method from react-native returns the minimum of dp of the screen and size of image(height/width)
For example,
dp = 1920
image width = 800
The returned width is 800

If image width. = 3000
The returned width is 1920.

Shouldn't the getSize return the size of the image?

Version

0.66.4

Output of npx react-native info

System:
OS: macOS 12.3
CPU: (8) x64 Apple M1 Pro
Memory: 25.67 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.5 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 6.14.14 - /usr/local/bin/npm
Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK:
API Levels: 29, 30, 31
Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 32.0.0
System Images: android-25 | Google APIs ARM EABI v7a, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-Sv2 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8139111
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.4 => 0.66.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Use a 1920x1080 resolution screen.
2. Grab a 4k or 8k image.
3. Use the getSize method of Image to get the size of the image.

Snack, code example, screenshot, or link to a repository

No response

[Marcoo09]

@divyaswormakai could you provide example images in which that happen?
I tested with Image1 and Image2 and both works correctly

[divyaswormakai]

@Marcoo09
Image.getSize( 'https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2', (width, height) => { console.log(Width:${width}, Height:${height}); }, );

I used the first Image that you have.
The original image dimension is

From the React Native app

I am testing it in Xiaomi Poco F1 screen which has the following dimension

[Marcoo09]

@divyaswormakai it looks like a bug on the fresco library used on android implementation. facebook/fresco#2236
I don't know how to solve it but in some comments mention this library which has a different implementation than react native https://www.npmjs.com/package/react-native-image-size

[divyaswormakai]

Hi @Marcoo09,

Thank you for the reply. The package that you have mentioned does work but if you look into the library, they convert the image to a bitmap and then get the real image dimension from it. It works okay for small images but for large images, it takes too much processing time directly hampering the app flow.
I have addressed this in the git repo as well.
eXist-FraGGer/react-native-image-size#13

Also thank you for reopening the issue on the fresco.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[anurag-adhikari]

Looking forward to knowing more...

[itsabk]

was anyone able to find a work around?

[itsabk]

I ended up using react-native-image-resizer library to compress and get the real height and width for the new image. Setting high target resolution shouldn't compress the image so you can retain the same resolution.

[divyaswormakai]

I haven't checked the library on an app itself, but I can only see use cases where it is taking images from the device. Can it handle images that needs to be fetched from the cloud?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.