Fix image cannot show in iOS 14 in React Native
Issue
I have updated my Xcode to 12.4. When running a React Native 0.62.2 project in iOS 14, all images which is used in application is disappeared, such as:
<Image source={require('./images/logo.png')} style={{width: 40, height: 40}} />
Solution 1
Upgrade to React Native 0.63.2+. As you can see in the Changelog of v0.63.2, it fix image cannot show in iOS 14. As shown below:
Solution 2
Open the file from node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
. Edit the method of displayLayer
.
From
#pragma mark - CALayerDelegate
- (void)displayLayer:(CALayer *)layer
{
if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
}
}
To
#pragma mark - CALayerDelegate
- (void)displayLayer:(CALayer *)layer
{
if (_currentFrame) {
layer.contentsScale = self.animatedImageScale;
layer.contents = (__bridge id)_currentFrame.CGImage;
} else {
[super displayLayer:layer];
}
}