ios: Local images are not rendering in 0.62.2 #29237

rahamin1 · 2020-06-27T20:13:24Z

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.

The text was updated successfully, but these errors were encountered:

warrenalphonso · 2020-06-28T20:57:07Z

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 · 2020-06-29T02:19:25Z

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 · 2020-07-01T23:17:53Z

Same issue, ios 14.

artmerlop · 2020-07-03T05:07:56Z

Same issue here!

rahamin1 · 2020-07-03T08:58:56Z

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 · 2020-07-03T09:06:12Z

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

rahamin1 · 2020-07-03T09:19:20Z

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

rahamin1 · 2020-07-03T18:11:11Z

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 · 2020-07-03T19:16:42Z

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 · 2020-07-03T20:25:18Z

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 · 2020-07-08T05:48:25Z

I have the same issue

abiespinal04 · 2020-07-10T01:31:59Z

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

lh9403 · 2020-07-31T03:22:03Z

so, how to solve it in iOS 14?

MoOx · 2020-07-31T05:50:01Z

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 · 2020-08-01T10:09:51Z

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

lukeramsden · 2020-08-12T13:22:02Z

Could we get a hotfix for 0.62?

cristianoccazinsp · 2020-09-17T16:54:36Z

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

anantanandgupta · 2020-09-23T20:31:55Z

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

lukeramsden · 2020-09-24T07:52:27Z

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 · 2020-10-12T14:48:05Z

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

Andrea-Arguello · 2021-01-13T04:43:04Z

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 · 2021-01-13T09:17:54Z

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 · 2021-01-13T17:13:43Z

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 · 2021-01-13T17:19:43Z

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: b6ded72 I don't have any real deeper understanding of this issue.

Andrea-Arguello · 2021-01-13T22:05:12Z

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 · 2021-05-08T23:03:41Z

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 (123423c)

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

Slaycaster · 2022-05-17T10:09:06Z

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 · 2023-05-22T00:02:27Z

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 · 2023-05-29T05:01:07Z

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

rahamin1 added the Needs: Triage 🔍 label Jun 27, 2020

react-native-bot added Component: Image Platform: iOS iOS applications. labels Jun 27, 2020

rahamin1 closed this as completed Jul 3, 2020

rahamin1 reopened this Jul 31, 2020

rahamin1 closed this as completed Jul 31, 2020

rahamin1 changed the title ~~ios: Local images are not rendering~~ ios: Local images are not rendering in 0.62.2 Aug 1, 2020

rahamin1 reopened this Aug 1, 2020

dshiverware mentioned this issue Nov 10, 2020

iOS example app images not loading (iOS 14.1 Xcode 12) etn-ccis/blui-react-native-workflows#32

Closed

nachoSource mentioned this issue Feb 14, 2022

Stars Not Being Rendered When Offline Monte9/react-native-ratings#170

Open

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label May 22, 2023

github-actions bot closed this as completed May 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ios: Local images are not rendering in 0.62.2 #29237

ios: Local images are not rendering in 0.62.2 #29237

rahamin1 commented Jun 27, 2020 •

edited

warrenalphonso commented Jun 28, 2020

TrustDec commented Jun 29, 2020 •

edited

esensei commented Jul 1, 2020

artmerlop commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

simonarcher commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

esensei commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

tachtevrenidis commented Jul 8, 2020

abiespinal04 commented Jul 10, 2020

lh9403 commented Jul 31, 2020

MoOx commented Jul 31, 2020 •

edited

rahamin1 commented Aug 1, 2020 •

edited

lukeramsden commented Aug 12, 2020

cristianoccazinsp commented Sep 17, 2020

anantanandgupta commented Sep 23, 2020

lukeramsden commented Sep 24, 2020

rjtubera commented Oct 12, 2020

Andrea-Arguello commented Jan 13, 2021 •

edited

lukeramsden commented Jan 13, 2021 •

edited

Andrea-Arguello commented Jan 13, 2021

lukeramsden commented Jan 13, 2021

Andrea-Arguello commented Jan 13, 2021

olivergeorge commented May 8, 2021

Slaycaster commented May 17, 2022 •

edited

github-actions bot commented May 22, 2023

github-actions bot commented May 29, 2023

ios: Local images are not rendering in 0.62.2 #29237

ios: Local images are not rendering in 0.62.2 #29237

Comments

rahamin1 commented Jun 27, 2020 • edited

Description

React Native version:

Steps To Reproduce

Expected Results

warrenalphonso commented Jun 28, 2020

TrustDec commented Jun 29, 2020 • edited

esensei commented Jul 1, 2020

artmerlop commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

simonarcher commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

esensei commented Jul 3, 2020

rahamin1 commented Jul 3, 2020

tachtevrenidis commented Jul 8, 2020

abiespinal04 commented Jul 10, 2020

lh9403 commented Jul 31, 2020

MoOx commented Jul 31, 2020 • edited

rahamin1 commented Aug 1, 2020 • edited

lukeramsden commented Aug 12, 2020

cristianoccazinsp commented Sep 17, 2020

anantanandgupta commented Sep 23, 2020

lukeramsden commented Sep 24, 2020

rjtubera commented Oct 12, 2020

Andrea-Arguello commented Jan 13, 2021 • edited

lukeramsden commented Jan 13, 2021 • edited

Andrea-Arguello commented Jan 13, 2021

lukeramsden commented Jan 13, 2021

Andrea-Arguello commented Jan 13, 2021

olivergeorge commented May 8, 2021

Slaycaster commented May 17, 2022 • edited

github-actions bot commented May 22, 2023

github-actions bot commented May 29, 2023

rahamin1 commented Jun 27, 2020 •

edited

TrustDec commented Jun 29, 2020 •

edited

MoOx commented Jul 31, 2020 •

edited

rahamin1 commented Aug 1, 2020 •

edited

Andrea-Arguello commented Jan 13, 2021 •

edited

lukeramsden commented Jan 13, 2021 •

edited

Slaycaster commented May 17, 2022 •

edited