Image doesn't render from local path with no extension (iOS only)

[Romick2005]

Description

Reason is the file has no extension name when write to path! It doesn't master under iOS, not work under React native!

Remote url Image is loaded and stored using react-native-fs and named as Z23qdxp_348: /var/mobile/Containers/Data/Application/500161AF-8D6A-4A97-B746-0D0E12421768/Library/Caches/Z23qdxp_348

Note: If the change image name to Z23qdxp_348.jpeg the image become visible. (Works even for jpg and png image formats).

Could to be related to #23844

Steps to reproduce

1. Download remote image
2. Save it without extension in fileUri variable.
3. Render <Image source={{uri: fileUri}} onError={(error) => console.error(error)}>
4. Result: No image if name does not have extension.

https://snack.expo.dev/@romick/local-ios-image-without-extension-issue-?platform=web

React Native Version

0.73.2

Affected Platforms

Runtime - iOS

Output of npx react-native info

info Fetching system and libraries information...

```text System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Memory: 79.34 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: /usr/local/bin/node Yarn: version: 1.22.19 path: ~/.yarn/bin/yarn npm: version: 9.6.7 path: /usr/local/bin/npm Watchman: version: 2023.11.27.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.14.3 path: /Users/user/.rvm/gems/ruby-3.2.1/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.2 - iOS 17.2 - macOS 14.2 - tvOS 17.2 - watchOS 10.2 Android SDK: API Levels: - "28" - "29" - "30" - "31" - "33" - "34" Build Tools: - 28.0.3 - 29.0.2 - 29.0.3 - 30.0.2 - 30.0.3 - 31.0.0 - 33.0.0 - 33.0.1 - 34.0.0 System Images: - android-28 | Google APIs ARM 64 v8a - android-28 | Google ARM64-V8a Play ARM 64 v8a - android-31 | Google APIs ARM 64 v8a - android-32 | Google Play ARM 64 v8a - android-34 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10811636 Xcode: version: 15.1/15C65 path: /usr/bin/xcodebuild Languages: Java: version: 17.0.9 path: /usr/bin/javac Ruby: version: 3.2.1 path: /Users/user/.rvm/rubies/ruby-3.2.1/bin/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: ^18.2.0 react-native: installed: 0.73.2 wanted: ^0.73.2 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false ```

Stacktrace or Logs

Image onError return localized error message:
Не вдалося відкрити файл «Z23qdxp_348.png», бо такого файлу немає.
That means:
The file "Z23qdxp_348.png" could not be opened, because this file does not exist.

Reproducer

https://github.com/Liqiankun/react-native-image-no-extension

Screenshots and Videos

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[Romick2005]

So basically it is RN image loader issue. I do not why, but if there are no extension in the uri, it will add @"png" extension. Then when try to load it got error file not found. But the actual existing file name (source {"uri": "/var/mobile/Containers/Data/Application/1AE1B75C-03D5-4A27-8B13-0287E4591813/Library/Caches/Z23qdxp_348"}) does not have .png extension so that is why it was failing.

PS: Have not found any explanation why this was reverted.

PPS: It also work for expo as FileSystem.cacheDirectory from "expo-file-system" contains file:// prefix and is not treated as uri and that is why it is working for expo, when for rn cli that is using "react-native-fs" it is RNFS.CachesDirectoryPath that does not contain file:// prefix and is probably considered as URL image.

[yannickpschroeder]

When will this be fixed? In 0.73.3?

[ronilmehta]

I have started facing the same issue as soon as I moved to Expo SDK 50 from 48.

[lpezzolla]

This is an issue for https://github.com/polito/students-app as well: image URLs not ending with extension are NOT rendered on iOS devices only because of the lines of code @Romick2005 mentioned.

[ChamaraWP]

I'm using the latest Expo SDK 50(50.0.15) with React Native(0.73.6). having a similar issue Here is an example of what my cached image URI looks like file:///Users/UserName/Library/Developer/CoreSimulator/Devices/155801A6-9115-4BF9-8A16/data/Containers/Data/Application/EA56C837-9CEF-4AE5-B6B2/Library/Caches/1TSAjv, and they are loading correctly to the component. but it's not rendering. The images show up fine when I use the URI straight from the API call.

However, if I go to the caching file path and rename the file 1TSAjvto 1TSAjv.png and then append the .png to the URI, from the component that uses this image. that image will be rendered as expected.

[robutler]

Just wanted to chime in that we're also seeing this issue on iOS after upgrading to Expo SDK 50 (React Native 0.73.6) from Expo SDK 49 (React Native 0.72.3). Trying to load an image from an uri from the cache folder without extension into an Image component doesn't render anything. Looking at the onError message it tried to add an extra .png to the path that shouldn't be there.

[ChamaraWP]

Has anyone found a solution for this issue? Even if the .png extension is added manually, it still doesn't work.

[frankie-swrve]

Also getting this issue, downloading SHA files from a CDN with no extension, the onError shows a .png that should not be there, manually copying a file in the directory and adding a .png resolves the pathing issue, this was working previously for us on RN 69

[dtx]

I am facing this issue too. New versions need an extension, for now I have modified my code to add an extension to the file based on the response file type.

[rsicarelli]

If you are encountering issues with images not rendering on iOS when using rn-fetch-blob on RN 0.73, setting the appendExt will work:

import RNFetchBlob from 'rn-fetch-blob'

const ImageDisplayScreen = ({ imageUrl }) => {
  const [imagePath, setImagePath] = useState('')

  useEffect(() => {
    const downloadAndDisplayImage = async () => {
      const result = await RNFetchBlob.config({
        fileCache: true,
        appendExt: 'jpg', // Append the .jpg extension to the downloaded file
      }).fetch('GET', imageUrl)

      setImagePath(result.path())
    }

    downloadAndDisplayImage()
  }, [imageUrl])

  return (
      <Image source={{ uri: imagePath }} />
  )
}