CODEWITHSUNDEEP
imagereact-nativeios14
Chen Li Yong
Chen Li Yong

Reputation: 6147

Why my image (local assets or downloaded assets) is not showing on iOS 14 but showing on Android using ReactNative 0.62.x?

My ReactNative project has been working fine on 0.61.x version, and still working fine after I upgrade it to 0.62.x version. But after some time, the project's image started to not showing, both on the simulator and on the real device. Strangely, at the same time, my team who's working on the same project, using the same repository and branch, we both doing a clean repo base, his simulator showing the image, while mine still isn't, no matter what I do. Today, however, his simulator starts to exhibit the same symptom, and that's right after he updates his Xcode.

Upvotes: 0

Views: 512

Answers (2)

Muhammad Ashfaq
Muhammad Ashfaq

Reputation: 2531

I faced the same issue when I upgraded to iOS 14.

I found a fix in the below step.

https://github.com/facebook/react-native/issues/29279#issuecomment-658244428

Have on downfall but pretty best solution till now.

The downfall is you have to update the file it every time you install node_modules

Upvotes: 0

Chen Li Yong
Chen Li Yong

Reputation: 6147

I haven't been able to found the solution back in my days, but nowadays I found some answers that's working for me. So I make this QnA as a beacon for those with similar problem like me.

From the answers, the problem looks like caused by iOS 14 changes.

After updating IOS 14.x it is an issue being generated that image is not being shown. Here is some info against that. 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.

The file having the issue is on the:

node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m

The solution is to manually change the code inside the RCTUIImageViewAnimated.m:

if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }

But that means every time you do full node reinstall, the change will get overwritten. So other answer mentioned that you can add that fix into podfile so it will be automatically run when you run pod install.

pre_install do |installer|
  puts("Image fix for ios14: remove this when upgradeing to >= 0.63.3")
  find = "_currentFrame.CGImage;"
  replace = "_currentFrame.CGImage ;} else { [super displayLayer:layer];"
  op = `sed -ie "s/#{find}/#{replace}/" ../node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m`
  puts("Image fix for ios14 done")
end

And then run pod install.

I confirmed that this fix works for me.

Note: please be cautious that this fix is only for ReactNative versions less than 0.63.3. After you upgrade to 0.63.3, you can remove these lines of code.

Upvotes: 1

Related Questions