React-native: Image cannot show image in iOS 14

Created on 6 Jul 2020  ·  125Comments  ·  Source: facebook/react-native

Image cannot show image in iOS 14, but can show location, like:
source={
require('./images/add_scan_images.png')
}
/>

Environment:
Xcode Version 12.0 beta (12A6159)
Simulator: IPhone SE - 2nd generation - 14.0
"react": "16.11.0",
"react-native": "0.62.2"

Image Author Feedback Issue Template iOS iOS 14
Source
picture caofeng
👍140 🎉7 🚀5 ❤4

Most helpful comment

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
picture tomcheung on 14 Jul 2020
👍319 🎉114 ❤108 🚀95 😄35 👀20 👎10 😕6

All 125 comments

:warning: Missing Environment Information
:information_source: Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.
github-actions[bot] picture github-actions[bot] on 6 Jul 2020

Im facing the same issues

System:
    OS: macOS 10.16
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 493.38 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.4.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: ^4.5.1 => 4.5.1 
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

however im on Xcode-beta and iOS 14

tomas-sereikis picture tomas-sereikis on 8 Jul 2020
👍3

i have the same issue!

tachtevrenidis picture tachtevrenidis on 8 Jul 2020

same issue...

dmsouza picture dmsouza on 9 Jul 2020

same issue...

jonathantroncoso82 picture jonathantroncoso82 on 9 Jul 2020

Ok so I've found that the issue with Images only happens when the build is made with Xcode 12 Beta. When I make a build using Xcode 11.5 using iOS 14.0 Beta Device Support gotten from here, Images work fine.

jennmueng picture jennmueng on 9 Jul 2020
👍11

This is a duplicate issue -- https://github.com/facebook/react-native/issues/29215

QuintonC picture QuintonC on 9 Jul 2020
:warning: Missing Required Fields
:information_source: It looks like your issue may be missing some necessary information. GitHub provides an example template whenever a new issue is created. Could you go back and make sure to fill out the template? You may edit this issue, or close it and open a new one.
github-actions[bot] picture github-actions[bot] on 9 Jul 2020

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081
legion-zver picture legion-zver on 12 Jul 2020
👍46 🎉19 ❤14 😄9 👎7 👀6 🚀2

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Tucker2015 picture Tucker2015 on 12 Jul 2020
👍12

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

artmerlop picture artmerlop on 13 Jul 2020
👍98 ❤40 🚀31 🎉22 😄13

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Worked great thanks.

Tucker2015 picture Tucker2015 on 13 Jul 2020

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
tomcheung picture tomcheung on 14 Jul 2020
👍319 🎉114 ❤108 🚀95 😄35 👀20 👎10 😕6

Same issue with react native 0.62.x. Any chance the fix can be pack ported? RN 0.63.x is still extremely bugged and we cannot upgrade.

cristianoccazinsp picture cristianoccazinsp on 17 Sep 2020
👍25

Same issue with react native 0.62.x. Any chance the fix can be pack ported? RN 0.63.x is still extremely bugged and we cannot upgrade.

Think it’s the best to use a fork or apply a patch-package for now.

telmen picture telmen on 18 Sep 2020

I was able to fix the issue by applying the suggested patch. I confirm that works well with previous RN versions:

RN: 0.62.2
Xcode: 12.0
iOS simulator: 14

Adding a clarification (for other newbies to patch-package like me) the folder "patches" has to go at the project root level.

maxbaldrighi picture maxbaldrighi on 18 Sep 2020

Using the patch library just for this seems like overkill. Would it be too hard to add it as a minor patch to 0.62.2 (perhaps make it 0.62.3?). It's really 3 lines of code.

As it is now, 0.63.x has some major bugs and looks like they won't be addressed anytime soon (0.64.x is around the corner), so we are stuck with 0.62 for the foreseeable future.

cristianoccazinsp picture cristianoccazinsp on 18 Sep 2020
👍14 👎1

Using the patch library just for this seems like overkill.

Don't user patch package...

You don't want to use a patch package, you don't want to update your app to the latest version, but why "force" devs to ignore an entire roadmap?
Why don't you want to do something, but want to make people do what you want?

The patch worked perfectly here. 0.62.2

GleidsonDaniel picture GleidsonDaniel on 18 Sep 2020

Same issue with react native 0.62.x. Any chance the fix can be pack ported? RN 0.63.x is still extremely bugged and we cannot upgrade.

hey man, just add this to your patches folder under 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];
   }
 }

diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

and run npx patch-package

RatebSeirawan picture RatebSeirawan on 20 Sep 2020
👍18 🎉5 ❤1

This is the patch for 0.61.5

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..24c1075 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -267,8 +267,10 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 - (void)displayLayer:(CALayer *)layer
 {
   if (_currentFrame) {
-    layer.contentsScale = self.animatedImageScale;
-    layer.contents = (__bridge id)_currentFrame.CGImage;
+      layer.contentsScale = self.animatedImageScale;
+      layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+      [super displayLayer:layer];
   }
 }
Rotemy picture Rotemy on 20 Sep 2020
👍8 👎3 😕1

You could always replace your Image components with FastImage. That way you don't have to patch anything. Images load better too.

hhemmati81 picture hhemmati81 on 21 Sep 2020
👍2

To anyone who is using the patch-package fix and has CI/CD setup remember to add "postinstall": "patch-package" in your package.json

johnlim5847 picture johnlim5847 on 21 Sep 2020

You could always replace your Image components with FastImage. That way you don't have to patch anything. Images load better too.

FastImage is not a maintained library with many bugs.

Why do you think it is better?

Rotemy picture Rotemy on 21 Sep 2020

FastImage is working You can use it

mortezacruise picture mortezacruise on 21 Sep 2020
👍3

@johnlim5847 where to add "postinstall": "patch-package" this line in package.json?

shrimallamanoj picture shrimallamanoj on 21 Sep 2020

Getting this error when Run: npx patch-package
Applying patches...
Error: Patch file found for package react-native which is not present at node_modules/ react-native

shrimallamanoj picture shrimallamanoj on 21 Sep 2020

@shrimallamanoj you should go to https://github.com/ds300/patch-package first

KingAmo picture KingAmo on 21 Sep 2020

Yeah... thank you i have followed step and patch was successfully applied & not coming issue when run npx but seems like solution not working for me.. bad... any other solution?

shrimallamanoj picture shrimallamanoj on 21 Sep 2020 
diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Guys, this patch works on React native 0.61.5 too. I use the same workaround.

1.- run "yarn add patch-package"
2.- Make a new folder called patches on the root of the project.
3.- Make a new file called react-native+0.61.5.patch inside that folder
4.- Add the source code above.
5.- run "yarn patch-package" on the root of the project or put this on a post-install script

ebellumat picture ebellumat on 21 Sep 2020
👍11 ❤1

I follow this link to fix the problem about images in IOS14.

  • clean build in Xcode (CMD + Shift + K)
  • reset cache with npx react-native start --reset-cache
  • Building with XCode, and everythings works fine again
    I'm using React native 0.62.2
    GL to everyone.
renzoarellano picture renzoarellano on 21 Sep 2020
👎4

not a fix but an observation, if you keep inside its showing the image.

praveens96 picture praveens96 on 22 Sep 2020

I see the same bug, but only during the development process. These happened after I updated my phone and the xcode program. (ios14, xcode12) The strange thing is that when I download my application from the market, I cannot see the static pictures. I can see the pictures when I try from a different phone. my development environment was completely ruined after the update.

kvlknctk picture kvlknctk on 22 Sep 2020
👍3

Manually editing the file RCTUIImageViewAnimated.m as @tomcheung suggests above fixes the issue on version 0.61.5. Thank you!

a-koka picture a-koka on 22 Sep 2020

Suggestions: Do not upgrade to 0.63just patch. I tried upgrading, build failed due to firebase, code-push.

TNChalise picture TNChalise on 23 Sep 2020

Still experiencing this issue, can anyone advise whether the patch is currently the best solution to the problem?

dooleyb1 picture dooleyb1 on 23 Sep 2020

Is there a patch for 0.61.2?

EmmanueleVilla picture EmmanueleVilla on 23 Sep 2020
👍4

Is there a patch for 0.61.2?

For me. It's resolved.

Ma2iio picture Ma2iio on 23 Sep 2020

0.62.2 it's resolved. but the actual device failed....
is there a solution?

jhui134 picture jhui134 on 24 Sep 2020

https://github.com/huylvdev/react-native-fix-image it works for me

huylvdev picture huylvdev on 24 Sep 2020
👍3 🚀2 🎉1

if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
[super displayLayer:layer];
}

in : /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

it works for me, thank you

khaledBou picture khaledBou on 24 Sep 2020
👍4

For me. It's resolved.

Sorry I don't understand, what do you mean? Which patch did you apply?

EmmanueleVilla picture EmmanueleVilla on 25 Sep 2020

the solution that worked for me just temporarily fix because u have to fix it inside node modules, is there any other way for preventing this to happen in the future?

datle1888 picture datle1888 on 25 Sep 2020
👍6

For react-native version < 0.63
Please use react-native-fast-image instead of ReactNative Image
To react-native-fast-image work, please disable fallback of react-native-fast-image
It's work on IOS 14 !

john-techfox picture john-techfox on 25 Sep 2020
👍4

For me. It's resolved.

Sorry I don't understand, what do you mean? Which patch did you apply?

@EmmanueleVilla apply this patch https://github.com/facebook/react-native/issues/29279#issuecomment-658244428 and then use patch-package to keep it :)

miguelmich picture miguelmich on 25 Sep 2020 
diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

Guys, this patch works on React native 0.61.5 too. I use the same workaround.

1.- run "yarn add patch-package"
2.- Make a new folder called patches on the root of the project.
3.- Make a new file called react-native+0.61.5.patch inside that folder
4.- Add the source code above.
5.- run "yarn patch-package" on the root of the project or put this on a post-install script

I'm also running 61.5, this worked for me! I'm guessing if you have a version other than 61.5, just rename the patch file to use your version, and when you run yarn patch-package it will apply the patch since it detects that your react-native version matches.

e.g. for version 61.2, name your patch file react-native+0.61.2.patch

jkim430 picture jkim430 on 25 Sep 2020
👍2 🎉1 
#import "RCTUIImageViewAnimated+WLAdd.h"
#import <objc/runtime.h>

@implementation RCTUIImageViewAnimated (WLAdd)

+ (void)load {
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    Method fromMethod = class_getInstanceMethod([self class], @selector(displayLayer:));
    Method toMethod = class_getInstanceMethod([self class], @selector(wl_displayLayer:));
    method_exchangeImplementations(fromMethod, toMethod);
  });
}

- (void)wl_displayLayer:(CALayer *)layer {
  UIImage *currentFrame = [self valueForKey:@"currentFrame"];
  CGFloat animatedImageScale = [[self valueForKey:@"animatedImageScale"] floatValue];
  if (currentFrame) {
      layer.contentsScale = animatedImageScale;
      layer.contents = (__bridge id)currentFrame.CGImage;
    } else {
      [super displayLayer:layer];
    }
}

@end
zhangyandong picture zhangyandong on 27 Sep 2020

This works for me on v0.61.4 although there is a much simpler way to generate the patch file.

tl;dr Follow the instructions on the https://github.com/ds300/patch-package itself.

Here are the detailed instructions:
This is the fix that was made on React Native source code v0.63.2: https://github.com/facebook/react-native/commit/123423c2a9258c9af25ca9bffe1f10c42a176bf3

# make the change in `node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m` file
if (_currentFrame) {
  layer.contentsScale = self.animatedImageScale;
  layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
  [super displayLayer:layer];
}

# run patch-package to create a .patch file
npx patch-package react-native

# this will generate the patch file in the patches folder
# patches/react-native+0.61.4.patch

# then add to postinstall script
"scripts": {
  "postinstall": "patch-package"
 }

Hope this helps!

Monte9 picture Monte9 on 27 Sep 2020
👍15 🚀7 🎉6 😄4

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

I got this problem while using RN v0.61.2 but this still worked for me. Thanks

muganwas picture muganwas on 28 Sep 2020
👍3

For react-native version < 0.63
Please use react-native-fast-image instead of ReactNative Image
To react-native-fast-image work, please disable fallback of react-native-fast-image
It's work on IOS 14 !

It's worked for me !

rockvic picture rockvic on 28 Sep 2020
👍4

yarn patch-package

For me. It's resolved.

Sorry I don't understand, what do you mean? Which patch did you apply?

@EmmanueleVilla apply this patch #29279 (comment) and then use patch-package to keep it :)

Youre the man @jkim430 Thanks

momochan32 picture momochan32 on 29 Sep 2020

Tried all the solutions on 0.61.4, the remote images are loading fine but the local assets won't just show.

Any ideas?

nigharsh picture nigharsh on 29 Sep 2020

Thank you xcode..
image

BogdanRad picture BogdanRad on 29 Sep 2020
😄11

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

It worked for me. Thanks! Additionally, you can use npx patch-package (more info here) to keep this change and don't need to keep fixing all-time node_modules is reinstalled.

These are the kind of bugs that makes me want to open any other business and stop being a programmer.

fabiocberg picture fabiocberg on 29 Sep 2020
😄4

https://github.com/huylvdev/react-native-fix-image it works for me

Thanks so ,much After spending a day finally i fixed by this help

Justin9606 picture Justin9606 on 29 Sep 2020
👍9 ❤7 🚀5 🎉1

I can confirm that this patch can also be applied to version 0.63.2. Rename the file to (react-native+0.62.2.patch).

virgial picture virgial on 30 Sep 2020

Please Re open this issue,
This is still not solving the problem.

Rohithzr picture Rohithzr on 30 Sep 2020
😕1

https://github.com/huylvdev/react-native-fix-image it works for me

Thanks so ,much After spending a day finally i fixed by this help

Hey, I tried using react-native-fix-image it worked when I am doing
npx react-native-fix-image but when I am removing the node_modules and reinstalling them.
The app does not load the images.
Did you face any such issue and do we have to run the npx command every time to render the images.

bhavishya2107 picture bhavishya2107 on 30 Sep 2020

here you go
https://github.com/facebook/react-native/issues/29279#issuecomment-658244428

sobanarshad85 picture sobanarshad85 on 30 Sep 2020
👎2

https://github.com/huylvdev/react-native-fix-image it works for me

Thanks so ,much After spending a day finally i fixed by this help

Thats work for me! Thks!!

caiomendes23 picture caiomendes23 on 30 Sep 2020

It's not working for me on release mode, any idea?

mateodaza picture mateodaza on 30 Sep 2020
👍2

@tomcheung thank you a lot!
I hit my head 2 days to find out what the problem is...

todor-droxic picture todor-droxic on 2 Oct 2020

For those running older versions of React Native (e.g., 0.60.6) the patch is not possible since the RCTUIImageViewAnimated.m file doesn't exist. I solved this problem by using React Native Fast Image v8.1.5 and upgrading SDWebImage pod with pod update SDWebImage. More specifically, I upgraded SDWebImage from v5.8.1 to v5.9.2.

Source: https://github.com/DylanVann/react-native-fast-image/issues/702#issuecomment-653930858

bpred754 picture bpred754 on 2 Oct 2020
👍2 🎉1

Images not showing on release version. (ejected expo 39 project) RN 0.63.3
update: updating metro.config.js fixed my issue => https://forums.expo.io/t/assets-missing-only-in-ios-release-build-after-ejecting/42759

petermason picture petermason on 5 Oct 2020

Is this going to be officially fixed on any RN release? Afaik, the problem is still there.

lock9 picture lock9 on 8 Oct 2020
👍5

Is this going to be officially fixed on any RN release? Afaik, the problem is still there.

+1. Every once in a while Im on an old project and I have to patch it..

d0xi5 picture d0xi5 on 8 Oct 2020

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

  • (void)displayLayer:(CALayer *)layer
    {

    • if (!_currentFrame) {

    • _currentFrame = self.image;

    • }

      if (_currentFrame) {

      layer.contentsScale = self.animatedImageScale;

      layer.contents = (__bridge id)_currentFrame.CGImage;

      diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env

      new file mode 100644

      index 0000000..361f5fb

      --- /dev/null

      +++ b/node_modules/react-native/scripts/.packager.env

      @@ -0,0 +1 @@

      +export RCT_METRO_PORT=8081

Thanks! This worked for me on my all old RN projects.
Just replace the React Native version of your old project instead of 0.63 before creating the file of react-native+0.63.0.patch.

I created a video and I hope this would help someone.

AsbarAli picture AsbarAli on 9 Oct 2020
👍4

@AsbarAli's fix worked for me, RN Version: 0.61.5.

matiasmir picture matiasmir on 9 Oct 2020
👍2

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil
if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.
https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

It worked for me. Thanks! Additionally, you can use npx patch-package (more info here) to keep this change and don't need to keep fixing all-time node_modules is reinstalled.

These are the kind of bugs that makes me want to open any other business and stop being a programmer.

It's important that you run npx patch-package react-native for the patch to be applied.

Garrett1Tolbert picture Garrett1Tolbert on 10 Oct 2020
👍2

Hey all could someone confirm this was merged to core?

While patch-package is a solution it shouldn't be a permanent one.

I will keep this open until I can investigate.

safaiyeh picture safaiyeh on 11 Oct 2020
❤1

Are they not planning to fix this?

enriccamacho picture enriccamacho on 11 Oct 2020

https://www.npmjs.com/package/react-native-fix-image
working for me

huylvdev picture huylvdev on 11 Oct 2020
👍13 ❤7 🎉7 🚀5

It looks like it is fixed. Just won't be back ported to previous versions. I believe the fix is in 63.3

safaiyeh picture safaiyeh on 11 Oct 2020
👍2

@AsbarAli's fix worked for me, RN Version: 0.61.5.

How did you do it? i'm using RN 61.2

rjtubera picture rjtubera on 12 Oct 2020

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!
1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

I got this problem while using RN v0.61.2 but this still worked for me. Thanks

Hi can you help me? I also have RN 61.2 but it doesn't work at all. May bottom navigation images are not showing

rjtubera picture rjtubera on 12 Oct 2020

Hey @rjtubera, the patch is supposed to work with 0.63 though reportedly works also with 0.61.5 version of React Native. Perhaps if you try upgrading from React Native 0.61.2 to 0.61.5, and re-apply the steps you have quoted, it may work.

If that doesn't work, try upgrading to 0.63 and do the same. Though becareful as some of your components might break. You should test every component after the upgrade to make sure everything still works well (on iOS and Android).

kierandesmond picture kierandesmond on 12 Oct 2020

I encounter this issue, i fixed it by following steps at this link
https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

tbanj picture tbanj on 13 Oct 2020

Thanks Alabi, I sorted the issue too by patching React Native. Working well now so far 😊

From: Alabi Temitope Wahab notifications@github.com
Reply to: facebook/react-native reply@reply.github.com
Date: Tuesday 13 October 2020 at 03:56
To: facebook/react-native react-native@noreply.github.com
Cc: Kieran Desmond kieran@sweep.ie, Comment comment@noreply.github.com
Subject: Re: [facebook/react-native] Image cannot show image in iOS 14 (#29279)

I encounter this issue, i fixed it by following steps at this link

29420 (comment)https://github.com/facebook/react-native/pull/29420#issuecomment-707435412

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/facebook/react-native/issues/29279#issuecomment-707436028, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AIENJUWD2RES5AC52CT4MG3SKOXURANCNFSM4ORGDXZA.

kierandesmond picture kierandesmond on 13 Oct 2020

i upgraded to 0.63 version of react native, but i am facing same issue,anyone can help me ?

Anzormumladze picture Anzormumladze on 13 Oct 2020

For those running older versions of React Native (e.g., 0.60.6) the patch is not possible since the RCTUIImageViewAnimated.m file doesn't exist. I solved this problem by using React Native Fast Image v8.1.5 and upgrading SDWebImage pod with pod update SDWebImage. More specifically, I upgraded SDWebImage from v5.8.1 to v5.9.2.

Source: DylanVann/react-native-fast-image#702 (comment)

Works perfectly.

Version 8.3.2 of react-native-fast-image even includes the upgraded version of SDWebImage, so no need to pod update!

lissau picture lissau on 14 Oct 2020

https://www.npmjs.com/package/react-native-fix-image
working for me

Worked for me too. 👍

Doha26 picture Doha26 on 14 Oct 2020
🎉5 😄3 👍3 ❤2

Upgrading from React-Native 0.63.1 to 0.63.2 worked for us.

alexanderkho picture alexanderkho on 14 Oct 2020
🚀1 🎉1

I am facing the same issue on RN 0.62.2 on Xcode 12.0.1. and ios 14. Any solution?

ghasemikasra39 picture ghasemikasra39 on 15 Oct 2020
👍4

I am facing the same issue on RN 0.62.2 on Xcode 12.0.1. and ios 14. Any solution?

@ghasemikasra39 I was facing the same issue with your same versions. Installing react-native-fix-image worked for me.

RutsSantos picture RutsSantos on 15 Oct 2020
🎉4 ❤1

@RutsSantos right on this also worked for me!

1) npm install --save react-native-fix-image
2) npx react-native-fix-image
3) rebuild project

JordanRosas picture JordanRosas on 15 Oct 2020
👍16 🎉9 ❤8 👎3

Upgrading from React-Native 0.63.1 to 0.63.2 worked for us.

This worked for me.

xtealer picture xtealer on 15 Oct 2020

This worked for me. Thanks @JordanRosas

basarburak picture basarburak on 19 Oct 2020
🎉1

@JordanRosas Worked for me wonderfully too, thank you

jkz27 picture jkz27 on 19 Oct 2020
🎉1

upgrade react native version from 0.62.2 to 0.63.3 no need to patch or install npm modules anymore

Anzormumladze picture Anzormumladze on 21 Oct 2020
👍3

0.62.3 does not exists:

hugoh59 picture hugoh59 on 21 Oct 2020

0.63.3
0.63.2
0.63.1
0.63.0
0.63.0-rc.1
0.63.0-rc.0
❯ 0.62.2
0.62.1
0.62.0

hugoh59 picture hugoh59 on 21 Oct 2020

0.63.3
0.63.2
0.63.1
0.63.0
0.63.0-rc.1
0.63.0-rc.0
❯ 0.62.2
0.62.1
0.62.0

corrected

Anzormumladze picture Anzormumladze on 21 Oct 2020

Some of us can't upgrade until this critical RN bug is resolved: https://github.com/facebook/react-native/issues/29451

So we are either stuck with monkey patching 0.62.x or a bugged 0.63.x version.

cristianoccazinsp picture cristianoccazinsp on 21 Oct 2020

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

It works. Thank you!

ReemaVinodGangdev picture ReemaVinodGangdev on 23 Oct 2020

If you don't want to install any packages or directly edit node_modules you can try adding a preinstall stage hook in podfile as in https://stackoverflow.com/a/64495360/7477198 this worked for me. This is more git friendly.

haseebeqx picture haseebeqx on 23 Oct 2020
👍5

For me, even on RN 63.3, images are not showing up on a physical device. As a workaround, I encoded the images in base 64 here: https://www.base64-image.de/ and then used that as the source for the Image component instead of require('imagePath')

adithyaBellary picture adithyaBellary on 24 Oct 2020

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Your are a genius man, you saved my life!

TechMaagal picture TechMaagal on 27 Oct 2020
🎉2

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Thanx
worked for me fine on RN 0.61.5
i added a patch file called react-native+0.61.5.patch

also a fix for DylanVann/react-native-fast-image
cd ios && pod update SDWebImage

DanGDroid picture DanGDroid on 29 Oct 2020
👍1

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

@legion-zver Thanks for the fix! Is the RCT_METRO_PORT required here, or something specific for your project?

joshhogg picture joshhogg on 3 Nov 2020

RN 0.59.0 on Xcode 12.0.1. and ios 14. Any solution?

PhoenixLeeSin picture PhoenixLeeSin on 12 Nov 2020

RN 0.59.0 on Xcode 12.0.1. and ios 14. Any solution?

3 solutions:

  1. Fix the problem manually within node_modules
  2. Use this fix library https://www.npmjs.com/package/react-native-fix-image
  3. Update to React Native 0.63.3
douglasjunior picture douglasjunior on 12 Nov 2020
❤7

I can confirm this still exists in --configuration=Release, even on "react-native": "0.63.3". Works well in --configuration=Debug however.

https://www.npmjs.com/package/react-native-fix-image does not help but breaks the build in
release configuration with this error:

.../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m:278:5: error: expected expression
  } else {
    ^
f4z3k4s picture f4z3k4s on 12 Nov 2020
👍3

Also users of my app experience no image load (from url) on iOS but it doesn't occur to everyone only to some people. Please fix this. I'm using React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- link to image showing this issue

MrVanosh picture MrVanosh on 12 Nov 2020

@douglasjunior works well ! thanks very much!

PhoenixLeeSin picture PhoenixLeeSin on 13 Nov 2020

@RutsSantos right on this also worked for me!

  1. npm install --save react-native-fix-image
  2. npx react-native-fix-image
  3. rebuild project

worked for me 🎉🎉🎉🎉🎉

Ericnsamba picture Ericnsamba on 15 Nov 2020
👍15 ❤1

RN 0.59.0 on Xcode 12.0.1. and ios 14. Any solution?

3 solutions:

  1. Fix the problem manually within node_modules
  2. Use this fix library https://www.npmjs.com/package/react-native-fix-image
  3. Update to React Native 0.63.3

another Q, i use .1 manually within node_modules ， it works well in show image from network , but i can not show local image ,

PhoenixLeeSin picture PhoenixLeeSin on 15 Nov 2020
👍1

Also users of my app experience no image load (from url) on iOS but it doesn't occur to everyone only to some people. Please fix this. I'm using React Native 0.63.3.
https://i.ibb.co/1vDc6kv/1.jpg <- link to image showing this issue

I find issue which occurred to me. WebP was not supported in iOS 13 so I needed to install react-native-fast-image with SDWebImageWebPCoder pod.

MrVanosh picture MrVanosh on 15 Nov 2020

i dont suppose anybody has a Microsoft App Center build script to fix this as well?

krisbaum74 picture krisbaum74 on 16 Nov 2020

FYI, I was also able to overcome this using FastImage which had that fixed after upgrading SDWebImage https://github.com/DylanVann/react-native-fast-image/issues/730 (I cannot upgrade to 0.63 right now as it breaks other work, I'll eventually move to the latest version)

In my case I had Animated images from plain RN, but I was able to use FastImage for those as well using

const AnimatedImage = Animated.createAnimatedComponent(FastImage)

<AnimatedImage source={require('....')} />

Alternatively the fix image package should do, if it doesn't work on Appcenter (@krisbaum74) you should be able to do the same by creating appcenter-pre-build.sh in the root of the repo and adding the script w/ the fix there

vshjxyz picture vshjxyz on 16 Nov 2020

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

elinahovakimyan picture elinahovakimyan on 17 Nov 2020

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

if you upgrade to 0.63.3 you may have problems in that code, try this fix library https://www.npmjs.com/package/react-native-fix-image

Anzormumladze picture Anzormumladze on 17 Nov 2020

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

if you upgrade to 0.63.3 you may have problems in that code, try this fix library https://www.npmjs.com/package/react-native-fix-image

I already upgraded to 0.63.3 and this library does not solve the issue( Images load on simulator but not on physical device.

elinahovakimyan picture elinahovakimyan on 17 Nov 2020

I am using react-native 0.63.3 and still facing this issue on iOS 14.1. This is already applied in that version. Any ideas on how to fix it?

if you upgrade to 0.63.3 you may have problems in that code, try this fix library https://www.npmjs.com/package/react-native-fix-image

I already upgraded to 0.63.3 and this library does not solve the issue( Images load on simulator but not on physical device.

My issue was related to copying the assets for the production build, there was a bad linking as explained in here then regenerate the bundle and try again

mateodaza picture mateodaza on 17 Nov 2020

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Thank you so much!!!! You literally saved my day 🙏 ❤️

MedRedha picture MedRedha on 17 Nov 2020

It can display the image after adding [super displayLayer:layer]; if _currentFrame is nil

if I understand correctly, _currentFrame should be for animated image, so if it is still image, we can use the UIImage implementation to handle image rendering, not sure if it is a correct fix.

https://github.com/facebook/react-native/blob/1c634a921887caf02f1b9fba6fd177c352f9ef78/Libraries/Image/RCTUIImageViewAnimated.m#L283-L289

  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

Worked for me !!! 👍

BillelMidouni picture BillelMidouni on 22 Nov 2020

We also upgraded to 0.63.3, and are facing this issue on iOS 14.
We download files (images among them) using RN-fetch-blob package, and load these local images using the Image component.

mauricioac picture mauricioac on 23 Nov 2020

@krisbaum74

i dont suppose anybody has a Microsoft App Center build script to fix this as well?

Use react-native+0.63.0.patch

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 21f1a06..2444713 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -272,6 +272,9 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink

 - (void)displayLayer:(CALayer *)layer
 {
+  if (!_currentFrame) {
+    _currentFrame = self.image;
+  }
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..361f5fb
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081

How can I apply this using patch-package please ? Beginner with using patch-package.

Hi!

1.- run "npm i -g patch-package"
2.- Make a new folder called patches
3.- Make a new file called react-native+0.63.0.patch inside that folder
4.- Add the source code above.
5.- run "patch-package" on the root of the project

Just follow the above fix and make a file react-native+0.63.0.patch

after that, In your appcenter-pre-build.sh add

npm i -g patch-package
patch-package

This will add the above fix in your AppCenter build.

salman-khurshid-10p picture salman-khurshid-10p on 23 Nov 2020
🎉1

I had this on iOS and used npx react-native-fix-image which worked great. Now I am dismayed to find the problem persists on Android!

No mention of Android here - am I the only one?

I'm rocking "react-native": "0.61.5"

trickeyd picture trickeyd on 30 Nov 2020

_const Image = Animatable.createAnimatableComponent(FastImage);_
Is not working Properly!

animation={'bounceIn'} is not working

"react-native": "0.63.3"
"react-native-fast-image": "^8.3.4"
"react-native-animatable": "^1.3.3"

IamMasterWayne picture IamMasterWayne on 1 Dec 2020

I know this is considered a patch for 0.63, but I can confirm this also works on 0.62. 👍

MutableLoss picture MutableLoss on 7 Dec 2020

It still doesn't work on IOS 14.2, Xcode 12.2, react-native 0.63.4
Any suggested fix doesn't help
Update
0.63.4 - shows remote images without problems and without any patch, but local images don't work with or without patch

paulignupplabs picture paulignupplabs on 7 Dec 2020

I have a project with react-native 0.63.3, the patch doesn't work for me. Before applying the patch I verified the class RCTUIImageViewAnimated and it contains already the patch code, this is expected as #29420 is already merged in the 0.63.3 as per change 0.63.2 CHANGELOG https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632. So the patch won't fix it, I think it was valid in 0.62.2 but I'm afraid that changes in 0.63.3 broke the _local_ images loading again. That explains why some dev downgrade to <0.63.2 and apply the patch and the images got visible again. I would rather just get the 0.63.2 that contains the fix. In any case, I'm hesitating to downgrade, yes even for one version back as I don't want to get stuck in the past ;-). I created a workaround that is working on my end.

Basing on the fact that for _me_ images are loading when using an _external_ URL (RN 0.63.3).
My workaround,

  • I follow the Hybrid assets pattern, you can get the reference here https://reactnative.dev/docs/images#images-from-hybrid-apps-resources
  • Add the images to the iOS/Android asset library. This can be done either manually, by script, XCode,...
  • Reference the image by its _local_ URI instead of the _react native convenience file system reference_, iOS example below
<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>
  • Created a utility function to get iOS or Android reference asset URI depending on the Platform. Please read the documentation(https://reactnative.dev/docs/images#images-from-hybrid-apps-resources) and take note of the differences in URI formatting.
  • Images started to show up on the iOS 14.2 app!! I tested with the app distributed from App Store and Ad Hoc installation

It's working(for me) but, downsides,

  • React Native way of references is too convenient to put it just aside, I'm hoping that this issue gets resolved and I can get back to normal.
  • Keeping potentially three assets folder in sync... yeap it's by the script but developers will easily forget and in a few months from now someone will spend 2 days figuring out why images don't appear to discover that scripts are out of date or anything that you can think of.
  • Images are missing from my simulator, I'll be looking to add a conditional to load the images from the react-native assets' folder if running from a simulator. This lib can help https://github.com/react-native-device-info/react-native-device-info (I haven't tried yet).
    I'm hoping that someone can benefit from this workaround.
davidgamez picture davidgamez on 7 Dec 2020

@RutsSantos right on this also worked for me!

  1. npm install --save react-native-fix-image
  2. npx react-native-fix-image
  3. rebuild project

worked for me 🎉🎉🎉🎉🎉

Did not work for RN 0.61

azhararmar picture azhararmar on 10 Dec 2020
👍1

I use RN 0.61 and any solution not work for me. Pls, have any solution else?

thuynt99 picture thuynt99 on 11 Dec 2020

I use RN 0.61 and any solution not work for me. Pls, have any solution else?

https://www.npmjs.com/package/react-native-fix-image

thư viện này của mình, thấy nó vẫn hoạt động tốt với RN 0.61

huylvdev picture huylvdev on 11 Dec 2020

I use RN 0.61 and any solution not work for me. Pls, have any solution else?

https://www.npmjs.com/package/react-native-fix-image

thư viện này của mình, thấy nó vẫn hoạt động tốt với RN 0.61

Hi Huy, Mình đã thử step by step như guide ở trên, đã hiển thị fix image Done. Nhưng ảnh vẫn ko hiển thị trên ios 14. Những version ios khác vẫn hiển thị ảnh bình thường.
Mình sử dụng RN 0.61 và ios 14.

thuynt99 picture thuynt99 on 11 Dec 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

anchetaWern picture anchetaWern  ·  3Comments
grabbou picture grabbou  ·  3Comments
phongyewtong picture phongyewtong  ·  3Comments
axelg12 picture axelg12  ·  3Comments
ghost picture ghost  ·  3Comments