Regression: iOS images loaded from filesystem don't respect scaling factor in filename

[ascherkus]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Memory: 206.29 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.9.0 - /src/homebrew/bin/node
Yarn: 1.9.4 - /src/homebrew/bin/yarn
npm: 6.2.0 - /src/homebrew/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
API Levels: 28
Build Tools: 28.0.2
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.5 => 0.57.5

Description

Image assets loaded from the filesystem don't respect iOS's image scaling naming convention.

This appears to be a regression of functionality introduced by 998197f where [UIImage imageWithContentsOfFile:filePath]; was replaced by [UIImage imageWithData:fileData];, but that leaves UIKit unable to inspect the filePath for the presence of @3x filename suffixes.

Reverting that change locally fixes the issue.

Where this really comes into play is in projects using CodePush where the image assets are loaded from the filesystem (e.g., file:///.../Library/Application%20Support/CodePush/path/to/Image@3x.png) vs. the bundle included with the application at build time (e.g., file:///var/containers/Bundle/Application/.../path/to/Image@3x.png) where the filename-based constructor [UIImage imageNamed:imageName]; is used.

Reproducible Demo

CodePush bugs contain references to sample repros:
microsoft/react-native-code-push#1222
microsoft/react-native-code-push#1276

Let me know if you need any help setting up a repro... although at a minimum if the desired functionality is to always respect iOS's image scaling filename convention then I feel it should be fairly safe to revert (a portion of) the original change.

[MichielDeMey]

This is a legit issue, we're currently unable to add CodePush support to our app due to this limitation. 😔

[jvt]

Agreed, same as @MichielDeMey, we're also unable to implement CodePush into our application due to it loading the incorrect images for various screen resolutions.

[tbergquist-godaddy]

We are also having this issue.

This is how it looks in development:

And this is how it looks with code-push

[ScreamZ]

Facing something similar with Look like i've the same issue here ? Any facebook guy has a solution ?

[zhongwuzw]

Hi @ScreamZ @tbergq @ascherkus, can you guys test wether this can fix ?

[tbergquist-godaddy]

@zhongwuzw, I can confirm that your PR fixes the issue 👍

[ScreamZ]

Release version is ?

[holgersindbaek]

Same question as @ScreamZ ?

[danielgreane]

I have just tested the codepush bug described in the latest stable release, 0.58.6, and the problem still persists

Assuming this was merged into the 0.59rc which is not yet stable?

[prashantvv]

this belongs to react native itself. When I add a image to marker, its size was small while in release apk/ipa its size was bigger (3x). Then i finally added a small image than what i need, but then the image quality became poor.