react-native: ios: Local images are not rendering in 0.62.2

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® Core™ 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.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 14
Comments: 29 (2 by maintainers)

Most upvoted comments

Could we get a hotfix for 0.62?

+24

lukeramsden on Aug 12, 2020

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];
   }
 }

+22

lukeramsden on Sep 24, 2020

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

+18

TrustDec on Jun 29, 2020

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

+10

cristianoccazinsp on Sep 17, 2020

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.

MoOx on Jul 31, 2020

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

Andrea-Arguello on Jan 13, 2021