0.75.4: Local image not displayed by <Image /> when extension is not explicit

[fbp93]

Description

My app is downloading differente pngs saving them without an explicit extension in order to show them later through the <Image /> react native component(you can find an example here). This was working fine, but starting from React 0.73.0 the image is not displayed correctly. Adding an explicit extension to the file (e.g. manually adding the .png) seems fixing it, but my app have several images already downloaded so it's not so easy to handle existing users. IMO it's still an unwanted issue that should be fixed considering it's a breaking change.

Steps to reproduce

1. Install the application from the reproducer
2. Run the app, check the directory path in the logs
3. copy the testing images in the directory at that path
4. update the path var in App.tsx with the path of the directory
5. Run the app and see that only one image (the one with the explicit extension) is displayied

React Native Version

0.75.4

Affected Platforms

Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 133.64 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.12.1
    path: ~/Library/Caches/fnm_multishells/60602_1728334021609/bin/node
  Yarn:
    version: 3.6.4
    path: /usr/local/bin/yarn
  npm:
    version: 8.19.2
    path: ~/Library/Caches/fnm_multishells/60602_1728334021609/bin/npm
  Watchman:
    version: 2024.09.23.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 16.0/16A242
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 3.0.0
    path: /Users/work/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

(node:68279) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Stacktrace or Logs

No stacktrace

Reproducer

https://github.com/fbp93/RN75/tree/master

Screenshots and Videos

No response

[fbp93]

@cipolleschi 🙏

[cipolleschi]

@fbp93 thanks for the issue. IIUC, this got broken in 0.73, right? From which version did you migrate?

To set expectation, this might take a while for us, given that 73 is almost going out of the support window and we almost released already 3 major versions.

[fbp93]

@fbp93 thanks for the issue. IIUC, this got broken in 0.73, right? From which version did you migrate?

To set expectation, this might take a while for us, given that 73 is almost going out of the support window and we almost released already 3 major versions.

I'm moving from 0.71.16 to 0.75.4. I tested different versions and I found out that the issue started to happen in 0.73.0 (the 0.72.17 is working fine).

To set expectation, this might take a while for us, given that 73 is almost going out of the support window and we almost released already 3 major versions.

@cipolleschi Even if the issue started in 0.73 it's still happening in 0.75 (I didn't tested 0.76 yet). Do you think it's gonna take a while even if it's still a bug in the latest release?

[cipolleschi]

Yes, probably. We are currently a bit swamped for 0.76 and having to investigate when this happened and how to properly fix this might take a while. Unless you guys had some time to look at what changed between 0.72 and 0.73 in the Image component.

Also, is this happening on both architecture or only on the Old Architecture?

[fbp93]

Unless you guys had some time to look at what changed between 0.72 and 0.73 in the Image component.

I'm checking all files here but I don't see major changes 🤔 Is there any other place where I should have a look related to the image component?

Also, is this happening on both architecture or only on the Old Architecture?

i m currently testing on the old architecture

[cipolleschi]

I'm checking all files here but I don't see major changes 🤔 Is there any other place where I should have a look related to the image component?

I don't think.. But you can also debug what's happening in the RCTImageLoader! Breakpoints works great in Xcode.

i m currently testing on the old architecture

If you create a reproducer with this template, could you test also onn the New Architecture, please?

[fbp93]

@cipolleschi Also, is there a way to install a specific commit of RN? I wanna find where it started to break, I'm trying with

 "dependencies": {
    "react-native": "git+https://github.com/facebook/react-native.git#1eb4bf0d3af1fe267f5de6bf4bbe1e65d41fea1b",

but packages are not installed correctly so the pod install doesn't work.

[cipolleschi]

no, it's not possible easily. You should package react-native as a proper NPM package. Your best approximation is using nightlies

[fbp93]

I tried a bit but it's hard without testing the single commits and having some context. Considering I'm planning to ship this in around 1 month, do you think will there any chance that any of you will have some time to have a look in this timeframe or do you think you ll be busy for more time? Just to understand how much effort or alternative I should put on this. 🙏