search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.42k stars 24.36k forks source link

Image cannot show image in iOS 14 #29279

Closed caofeng closed 4 years ago

caofeng commented 4 years ago

Image cannot show image in iOS 14, but can show location, like: <Image 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"

github-actions[bot] commented 4 years ago
: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.
tomas-sereikis commented 4 years ago

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

tachtevrenidis commented 4 years ago

i have the same issue!

dmsouza commented 4 years ago

same issue...

jonathantroncoso82 commented 4 years ago

same issue...

jennmueng commented 4 years ago

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.

QuintonC commented 4 years ago

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

github-actions[bot] commented 4 years ago
: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.
legion-zver commented 4 years ago

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
Tucker2015 commented 4 years ago

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.

artmerlop commented 4 years ago

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

Tucker2015 commented 4 years ago

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.

tomcheung commented 4 years ago

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];
  }
cristianoccazinsp commented 4 years ago

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.

telmen commented 4 years ago

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.

maxbaldrighi commented 4 years ago

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.

cristianoccazinsp commented 4 years ago

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.

dnlsilva commented 4 years ago

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

RatebSeirawan commented 4 years ago

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

Rotemy commented 4 years ago

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];
   }
 }
hhemmati81 commented 4 years ago

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

johnlim5847 commented 4 years ago

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

Rotemy commented 4 years ago

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?

mortezacruise commented 4 years ago

FastImage is working You can use it

shrimallamanoj commented 4 years ago

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

shrimallamanoj commented 4 years ago

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

KingAmo commented 4 years ago

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

shrimallamanoj commented 4 years ago

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?

ebellumat commented 4 years ago 
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

renzoarellano commented 4 years ago

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

praveens96 commented 4 years ago

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

kvlknctk commented 4 years ago

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.

anshul-kai commented 4 years ago

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

TNChalise commented 4 years ago

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

dooleyb1 commented 4 years ago

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

EmmanueleVilla commented 4 years ago

Is there a patch for 0.61.2?

Ma2iio commented 4 years ago

Is there a patch for 0.61.2?

For me. It's resolved.

jhui134 commented 4 years ago

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

imhuy commented 4 years ago

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

khaledBou commented 4 years ago

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

EmmanueleVilla commented 4 years ago

For me. It's resolved.

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

datle1888 commented 4 years ago

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?

nvt-ak commented 4 years ago

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 !

miguelmich commented 4 years ago

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 :)

jkim430 commented 4 years ago 
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

zhangyandong commented 4 years ago 

#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
Monte9 commented 4 years ago

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!

muganwas commented 4 years ago

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

rockvic commented 4 years ago

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 !

momochan32 commented 4 years ago

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