Table of contents

Fix image cannot show in iOS 14 in React Native

React Native Apr 22, 2021 Viewed 434 Comments 0

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:

The Changelog of React Naitve v0.63.2

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];
  }
}
Updated Apr 22, 2021