RCTUIImageViewAnimated incompatible with iOS 14 #29268

mo22 · 2020-07-02T16:44:21Z

Images do not render on iOS 14 beta devices

Please see SDWebImage/SDWebImage#3040 for a discussion.

Looks as if [super displayLayer] needs to be called manually now.

react-native/Libraries/Image/RCTUIImageViewAnimated.m

Line 283 in ffa0725

- (void)displayLayer:(CALayer *)layer

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer]; // this here!
  }
}

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

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

Run react-native info in your terminal and copy the results here.

System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 3.83 GB / 32.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.5.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.5 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.3 - /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:
API Levels: 27, 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-24 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_232 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: ^4.10.1 => 4.10.1
react: ^16.13.0 => 16.13.1
react-native: ^0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

Expected Results

Describe what you expected to happen.

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

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

zi6xuan · 2020-07-09T01:40:48Z

i found the same issue

mo22 · 2020-07-10T16:39:39Z

proper fix (so that for example react-native-video also works) would be this (calling super displayLayer always):

#pragma mark - CALayerDelegate

- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  }
  [super displayLayer:layer]; // this here!
}

keremoge · 2020-07-17T09:20:29Z

Should we wait for 0.63.2? or just manually fix it?

igoriols · 2020-07-29T13:04:23Z

Hello, there is a way to solve it without updating to 0.63.x?

This adds a script to iOS init that patches RCTUIImageViewAnimated.m to display images in iOS 14. See issue here: facebook/react-native#29268

imhuy · 2020-09-25T06:58:21Z

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

helderberto · 2020-09-28T16:51:17Z

All the shells and script files I organize into scripts directory.

I made the following steps to fix:

Create a file scripts/fix_images_ios_14.sh;
Define the following code:

#!/usr/bin/env bash
echo "🔨️ Fixing Images..."
HUYDEV="_currentFrame.CGImage;"
HUYFIX="_currentFrame.CGImage ;} else { [super displayLayer:layer];"
sed -ie "s/${HUYDEV}/${HUYFIX}/" node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
echo "✅ Images has been fixed!"

Add script postinstall to package.json i.e: "postinstall": "sh ./scripts/fix_images_ios_14.sh";
Remove node_modules and install packages again with yarn/npm.

mo22 · 2020-09-28T18:54:15Z

Add script postinstall to package.json i.e: "postinstall": "sh ./scripts/fix_images_ios_14.sh";

Remove node_modules and install packages again with yarn/npm.

https://github.com/ds300/patch-package is a good solution for that

Raksha21 · 2020-09-30T12:43:46Z

"postinstall": "sh ./scripts/fix_images_ios_14.sh";

Its not working on my system Xcode v12 and iOS14

helderberto · 2020-10-02T17:59:22Z

React Native v0.61.4

Updated version with patch-package

Install patch-package into your project patch-package
Add to your package.json in scripts: "postinstall": "patch-package"
Create directory patches and the file react-native+0.61.4.patch inside of it on your root project directory:

diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..0337ef1 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -266,9 +266,11 @@ - (void)displayDidRefresh:(CADisplayLink *)displayLink
 
 - (void)displayLayer:(CALayer *)layer
 {
-  if (_currentFrame) {
+ if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }

Remove your node_modules and install the packages again.

roycechua · 2021-04-30T01:39:38Z

You can also try running these commands to install the patch

patch -p1 -i patches/react-native+0.61.4.patch
npx patch-package react-native

saadnaveed94 · 2021-11-24T07:02:20Z

Still facing the issue in react-native 0.64.2

Raksha21 · 2021-11-25T07:05:29Z

Hi, That problem has now been fixed. Thank you for taking the time to respond.

…

On Wed, Nov 24, 2021 at 12:32 PM Saad Naveed ***@***.***> wrote: Still facing the issue in react-native 0.64.2 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#29268 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQUTOGY2YZZNXQGXJBINRMLUNSEYTANCNFSM4OPB7OPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

-- Thanks & Regards Raksha Singh Associate Software Engineer Cardinal Integrated Technologies Inc www.cardinalts.com +91 7017370952 *"**There is only one thing which makes a dream impossible to achieve; the fear of failure."*

bogdansimon-rebeldot · 2021-11-25T08:55:05Z

Hi Raksha21, in which version was this error fixed? I still experience it with react-native 0.66.3

saadnaveed94 · 2021-11-25T10:32:05Z

Hi @Raksha21 @bogdansimon. i fixed it by adding this script in package.json. it uses this package. https://github.com/imhuy/react-native-fix-image
"postinstall": "npx react-native-fix-image"

This adds a script to iOS init that patches RCTUIImageViewAnimated.m to display images in iOS 14. See issue here: facebook/react-native#29268 brandingbrand-source-id: 19a026e64676316488cf26fe19d52ec80d77ee4b

This adds a script to iOS init that patches RCTUIImageViewAnimated.m to display images in iOS 14. See issue here: facebook/react-native#29268 brandingbrand-source-id: 06c4d2ac99713d90b2c9612eb413e88e81b335d4

github-actions · 2023-07-23T05:00:51Z

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-07-30T05:12:54Z

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

mo22 added the Needs: Triage 🔍 label Jul 2, 2020

react-native-bot added API: Animated Component: Image Platform: iOS iOS applications. labels Jul 2, 2020

hramos added the iOS 14 label Jul 9, 2020

jverdi mentioned this issue Jul 21, 2020

GIFImageView: add missing call to super kaishin/Gifu#159

Merged

bweissbart mentioned this issue Aug 5, 2020

fix(flagship): add init script to patch rn images for ios 14 brandingbrand/flagship#1560

Merged

junqdu mentioned this issue May 14, 2021

Local image is not being rendered in release and TestFlight #31525

Closed

kelset removed the iOS 14 label Jan 23, 2023

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

github-actions bot closed this as completed Jul 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RCTUIImageViewAnimated incompatible with iOS 14 #29268

RCTUIImageViewAnimated incompatible with iOS 14 #29268

mo22 commented Jul 2, 2020 •

edited

Loading

zi6xuan commented Jul 9, 2020

mo22 commented Jul 10, 2020

keremoge commented Jul 17, 2020 •

edited

Loading

igoriols commented Jul 29, 2020

imhuy commented Sep 25, 2020 •

edited

Loading

helderberto commented Sep 28, 2020 •

edited

Loading

mo22 commented Sep 28, 2020

Raksha21 commented Sep 30, 2020

helderberto commented Oct 2, 2020 •

edited

Loading

roycechua commented Apr 30, 2021

saadnaveed94 commented Nov 24, 2021

Raksha21 commented Nov 25, 2021 via email

bogdansimon-rebeldot commented Nov 25, 2021

saadnaveed94 commented Nov 25, 2021 •

edited

Loading

github-actions bot commented Jul 23, 2023

github-actions bot commented Jul 30, 2023

RCTUIImageViewAnimated incompatible with iOS 14 #29268

RCTUIImageViewAnimated incompatible with iOS 14 #29268

Comments

mo22 commented Jul 2, 2020 • edited Loading

Description

React Native version:

Steps To Reproduce

Expected Results

Snack, code example, screenshot, or link to a repository:

zi6xuan commented Jul 9, 2020

mo22 commented Jul 10, 2020

keremoge commented Jul 17, 2020 • edited Loading

igoriols commented Jul 29, 2020

imhuy commented Sep 25, 2020 • edited Loading

helderberto commented Sep 28, 2020 • edited Loading

mo22 commented Sep 28, 2020

Raksha21 commented Sep 30, 2020

helderberto commented Oct 2, 2020 • edited Loading

roycechua commented Apr 30, 2021

saadnaveed94 commented Nov 24, 2021

Raksha21 commented Nov 25, 2021 via email

bogdansimon-rebeldot commented Nov 25, 2021

saadnaveed94 commented Nov 25, 2021 • edited Loading

github-actions bot commented Jul 23, 2023

github-actions bot commented Jul 30, 2023

mo22 commented Jul 2, 2020 •

edited

Loading

keremoge commented Jul 17, 2020 •

edited

Loading

imhuy commented Sep 25, 2020 •

edited

Loading

helderberto commented Sep 28, 2020 •

edited

Loading

helderberto commented Oct 2, 2020 •

edited

Loading

saadnaveed94 commented Nov 25, 2021 •

edited

Loading