Closed mo22 closed 1 year ago
i found the same issue
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!
}
Should we wait for 0.63.2? or just manually fix it?
Hello, there is a way to solve it without updating to 0.63.x
?
https://github.com/huylvdev/react-native-fix-image it works for me
All the shells and script files I organize into scripts
directory.
I made the following steps to fix:
scripts/fix_images_ios_14.sh
;#!/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!"
"postinstall": "sh ./scripts/fix_images_ios_14.sh"
;node_modules
and install packages again with yarn/npm
.
- Add script postinstall to package.json i.e:
"postinstall": "sh ./scripts/fix_images_ios_14.sh"
;- Remove
node_modules
and install packages again withyarn/npm
.
https://github.com/ds300/patch-package is a good solution for that
"postinstall": "sh ./scripts/fix_images_ios_14.sh"
;
Its not working on my system Xcode v12 and iOS14
React Native v0.61.4
Updated version with patch-package
patch-package
into your project patch-package"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];
}
}
node_modules
and install the packages again.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
Still facing the issue in react-native 0.64.2
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 https://github.com/facebook/react-native/issues/29268#issuecomment-977587805, 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."
Hi Raksha21, in which version was this error fixed? I still experience it with react-native 0.66.3
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 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.
This issue was closed because it has been stalled for 7 days with no activity.
Images do not render on iOS 14 beta devices
Please see https://github.com/SDWebImage/SDWebImage/issues/3040 for a discussion.
Looks as if
[super displayLayer]
needs to be called manually now.https://github.com/facebook/react-native/blob/ffa07254de914f7876a17ec2d1ecac1dc10b116a/Libraries/Image/RCTUIImageViewAnimated.m#L283
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.
1. 2.
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