ios: Local images are not rendering in 0.62.2

[rahamin1]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I am rendering local images, using the 'Image' component, on android, with path like file:///data/user/0/com.xxxx/files/productdata_da13681addffaed7622ece9b2bb56e22bc65f6b9.jpg.

On iOS, however, these images are not rendering.

I tried the suggestion in https://stackoverflow.com/a/54627588/5532513, didn't help.

React Native version:

System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) i7-3720QM CPU @ 2.60GHz Memory: 1.49 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.16.2 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6514223 Xcode: 11.5/11E608c - /usr/bin/xcodebuild Languages: Java: Not Found Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2

Steps To Reproduce

Just using:

<Image
        style={{ width: 50, height: 50 }}
        source={{ uri: mobileImageFilePath }}
      />

Expected Results

Images should be displayed.

[warrenalphonso]

Yup I'm getting the same problem. I made a new project with react-native init, added a local file, and then used a <Image /> component. It works as expected on Android, but not on iOS. Doesn't work with URIs either.

[TrustDec]

OS: macOS Big Sur(11.0 Beta版 20A4299v) Platforms: iOS 14.0 Xcode: 12.0 react-native: 0.62.2 => 0.62.2 <Image /> iOS14.0 cannot display pictures, iOS13.5 displays normally

[esensei]

Same issue, ios 14.

[artmerlop]

Same issue here!

[rahamin1]

Are you also having a problem only with local files that your application is storing? (I would like to emphasize that I don't have any problems with assets)

I am using RNFetchBlob to store these files. Do you? The problem may be different behavior of RNFetchBlob on iOS compared to android.

[simonarcher]

I have this problem with local assets in my RN app project, as well as rendering remote assets with a url.

[rahamin1]

As I wrote above, in my case local assets work fine, and I am not using url to display images.

[rahamin1]

I am closing this issue. I need to do some more tests. I suggest that you open new issue(s) for your problems. It seems that the at least some of these problems are different than mine.

[esensei]

I have this problem with local assets in my RN app project, as well as rendering remote assets with a url.

Hello, you solved the problem with local image paths? I don’t understand why the author closed the ticket

[rahamin1]

I didn't solve the problem yet, but I realized that I need to do more tests before posting an issue.

At least some of the comments reported other issues - like displaying assets and rendering from a URL, so they should open other issues. You can also open an issue, explaining your problem.

[tachtevrenidis]

I have the same issue

[abiespinal04]

I have same issue with iOS 14. It doesn't show local images in my react native app.

[lh9403]

so, how to solve it in iOS 14?

[MoOx]

This has been fixed in 0.63.2 See https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632

See #29279 for more info.

[rahamin1]

I am reopening this until we test it in 0.63.2 and see that the problem has been solved.

[lukeramsden]

Could we get a hotfix for 0.62?

[cristianoccazinsp]

Looking for a 0.62 emergency fix for this as well. Way to go Apple, way to go...

[anantanandgupta]

i can't update the react-native to 63 yet... need a fix on 62

[lukeramsden]

For anyone that cant't upgrade to 62 like me and need to fix this, get yourself set up with https://github.com/ds300/patch-package and then put this in your patches folder:

react-native+0.62.2.patch:

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

[rjtubera]

Hotfix for RN 0.61.2 please. I cannot make it work, even my bottom navigator doesn't have images

[Andrea-Arguello]

For anyone that cant't upgrade to 62 like me and need to fix this, get yourself set up with https://github.com/ds300/patch-package and then put this in your patches folder:

react-native+0.62.2.patch:

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

This worked for me for Debug on RN 0.61.5, but it won't work for Release! Any idea why? I've even downgraded from Xcode 12 to 11.1, hoping that would solve the issue, but it didn't. This is the output of xcodebuild -showsdks

iOS SDKs:
    iOS 13.1                        -sdk iphoneos13.1

iOS Simulator SDKs:
    Simulator - iOS 13.1            -sdk iphonesimulator13.1

[lukeramsden]

This worked for me for Debug on RN 0.61.5, but it won't work for Release! Any idea why? I've even downgraded from Xcode 12 to 11.1, hoping that would solve the issue, but it didn't. This is the output of xcodebuild -showsdks

If you've used my patch verbatim then it's probably not working because you're on a different version and patch package won't like that. Regardless, as far as I am aware the issue is only on iOS 14, so it works in Debug mode because you're running on an iOS simulator that is running version 13. If you can't upgrade to a fixed version of RN then go to node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m and add that extra else statement, then run patch-package react-native. Read the docs for patch-package to better understand what I mean.

[Andrea-Arguello]

This worked for me for Debug on RN 0.61.5, but it won't work for Release! Any idea why? I've even downgraded from Xcode 12 to 11.1, hoping that would solve the issue, but it didn't. This is the output of xcodebuild -showsdks

If you've used my patch verbatim then it's probably not working because you're on a different version and patch package won't like that. Regardless, as far as I am aware the issue is only on iOS 14, so it works in Debug mode because you're running on an iOS simulator that is running version 13. If you can't upgrade to a fixed version of RN then go to node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m and add that extra else statement, then run patch-package react-native. Read the docs for patch-package to better understand what I mean.

Yes, I've done the changes manually and applied patch-package react-native to keep them, to no avail.

[lukeramsden]

It's likely to be a caching issue somewhere in the build process I would wager. Not much else I can do to help, my patch was just the following commit: https://github.com/facebook/react-native/commit/b6ded7261544c703e82e8dbfa442dad4b201d428 I don't have any real deeper understanding of this issue.

[Andrea-Arguello]

It is a bit obscure, as we've tried doing it in another computer with Xcode 11.1, and the issue still persists. On Android it does build correctly, I'll try with a blank slate project and see if it could be any of the Cocoapods libraries I use that's causing the issue.

[olivergeorge]

The 0.63.2 release includes a two line fix. Unfortunately that commit wasn't included in the 0.62.3 release.

Fix image cannot show in iOS 14 (123423c2a9)

Manually applying this change fixed image loading for me. (RN62.3 + xcode 12.5)

[Slaycaster]

For anyone that cant't upgrade to 62 like me and need to fix this, get yourself set up with https://github.com/ds300/patch-package and then put this in your patches folder:

react-native+0.62.2.patch:

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..0ff66f3 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -275,6 +275,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

This one worked for me on RN 0.62.3 as I can't currently update to 0.63.x yet for the maintenance support app that I am working on

[github-actions[bot]]

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[bot]]

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