Wrong image pixel density version on initial launch

[AdrianFahrbach]

Environment

react-native -v: v0.72.10
npm ls react-native-macos: v0.72.18
node -v: v18.17.1
npm -v: v9.6.7
yarn --version: not in use
xcodebuild -version: Xcode 15.2 Build version 15C500b

Steps to reproduce the bug

It seems like my React Native app is using the wrong image on initial launch. It doesn't load the @2x version but instead shows the lower res image.
I also had this issue during development, but thought it would fix itself in a production build. I'm not quite sure how (or even if) I can reproduce this during development, I definitely could reproduce it on my TestFlight build though.

1. Publish your app through TestFlight (should have an image with 1x and 2x versions)
2. Download and install the TestFlight app
3. Check the image. It seems to be loading the lower resolution version
4. Completely close/quite the app and restart it
5. The image is now loaded correctly

Expected Behavior

It should be using the correct @2x image.

Actual Behavior

Take a close look at the icons, especially the calendar icon on the top right:

[Saadnajmi]

Any idea if this repros in 0.73 as well?

[AdrianFahrbach]

Any idea if this repros in 0.73 as well?

I'm not quite sure, but it could very well be that this issue only occurred after downgrading to 0.72.
I will check this in the following days and then post here again.

[AdrianFahrbach]

Any idea if this repros in 0.73 as well?

Yes, this happens on 0.73 as well. It also seems like the animations are not working.

[Saadnajmi]

Are your animations transform based? That should be fixed on 0.73 now. For the pixel density issue, I don't have an update yet unfortunately :/

[AdrianFahrbach]

Are your animations transform based? That should be fixed on 0.73 now. For the pixel density issue, I don't have an update yet unfortunately :/

I will probably give it a try next week and keep you updated here.
Thanks you very very much for your work already though!

[AdrianFahrbach]

The transform fix didn't fix this issue.
I also still didn't find a way to reliably reproduce this.

[Saadnajmi]

Hey, so I recently have redone some refactoring of some image creation logic, which theoretically may better handle scaling (#2209 and #2219). These will land with React Native macOS 0.76. I'm not sure if there's a way to locally test this change, but wanted to give a heads up. Also for the sake of the bug, how are you loading your images? Through the <Image> component?

[AdrianFahrbach]

Also for the sake of the bug, how are you loading your images? Through the component?

Yes, through the regular Image component.

[AdrianFahrbach]

@Saadnajmi Is this included in the 0.76.2 npm version of the package?
I'm not quite sure because there wasn't a GitHub release 😅

[Saadnajmi]

Yes, though use 0.76.0 because 0.76.2 has a bug currently that blocks yarn install

[Saadnajmi]

Re: No Github release. We're working on switching our release workflow to use nx-release so that we get Github releases automatically: #2266

[AdrianFahrbach]

This doesn't seem to be fixed (at least in dev mode). Logging PixelRatio.get() also gives me 1 instead of 2, when the pixel ratio is off. I did find a way to reproduce this in dev mode though!

I thought that this only occurs on the first start of the application, but that seems to be wrong. I tried clearing all caches by running this script in our project, but wasn't able to reproduce it that way.

I was able to reproduce it by doing changes to the node_modules folder. I was manually applying the patch in #2301 and after my changes to the respective file in the node_modules folder and a hot module reload, my pixel ratio was at 1 again. A full reload of the application does fix this though.

Another interesting find is that logging the pixel ratio through the native module below always returned the correct value:

import Foundation
import AppKit

@objc(PixelRatioModule)
class PixelRatioModule: NSObject {

  @objc
  func getPixelRatio(_ resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
    if let screen = NSScreen.main {
      let pixelRatio = screen.backingScaleFactor
      resolve(pixelRatio)
    } else {
      let error = NSError(domain: "", code: 200, userInfo: nil)
      reject("no_screen", "No screen found", error)
    }
  }
}

I'm not quite sure if that applies to the production version as well, since all of my test were done in dev mode, but it at least seems to be connected in some way.

[Saadnajmi]

Thanks. We can't rely on the main screen only as there can be multiple monitors connected. I think we rely on the key window (the window with focus) but I'm not sure. I appreciate the info, sorry this bug is still here