React-Native iOS Not Showing Images (Pods Issue)

React-native iOS not showing images (pods issue)

Images issue is seen in Xcode12 builds and the fix if you are not running latest react-native version or not planning to upgrade to latest version of react-native, then go to

node_modules > react-native > Libraries > Images > RCTUIImageViewAnimated.m
search for if (_currentFrame)

add the following else block to the if block as below

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

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

react-native iOS app not showing static/local assets (images) after deploying

The asset destination and the main.jsbundle have to be in the same folder. Try:

./react-native bundle --minify --entry-file index.ios.js --platform ios --dev false --bundle-output ./release/main.jsbundle --assets-dest ./release

The bundler will create an assets folder in there anyway.

UPDATE including information from the discussions below:

The react-native-xcode.sh script that is executed in a XCode build step copies the main.jsbundle and the assets folder created by the bundler into the app package. If you want to deploy the package manually you need to make sure, that those files are copied. The easiest way is to include the main.jsbundle directly into the project and create a folder link to the assets folder. Verify that both are showing up in 'Build Phases' -> 'Copy Bundle Resources'.

react-native image is not loaded in iOS 14 upgrade

This is a problem with react-native <= 0.63.1 and iOS 14

This issue is fixed and merged to react native latest version. But if you want to fix your project now or you are using under 0.63.2 versions, there is a solution. (Thanks to https://bityl.co/3ksz)

FIRST SOLUTION : If you can update React Native

Update react-native to v0.63.2 or superior

Its was fixed in this release : https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#v0632

SECOND SOLUTION : If you can't update React Native

  1. OPEN THE FILE FROM :

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


  1. EDIT SOURCE

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];
}
}

  1. MAKE PATCH

npx patch-package react-native


  1. MAKE PATCH FILES TRACKED FOR GIT

git add patches/*


  1. ADD PACKAGE SCRIPT FOR AUTO APPLYING PATCHES

package.json

"scripts": {
...
"postinstall": "patch-package",
}

It will patch from all patch files whenever you install packages.

Why are images in react-native app not rendering after Xcode 12 update

This behavior is a known issue with iOS 14 as you can see here.

You need to change the following file:

react-native/Libraries/Image/RCTUIImageViewAnimated.m

and add the following line:

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

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



Related Topics



Leave a reply



Submit