React-Native Image is not displaying after XCode 11.5 Upgrade

Question

I usually display images like this:

<Image source={require('../../assets/images/color/stuff.png')} />
<Image source={require('../some-other-path/picture.png')} />

In the past, I could have any arbitrary path I want, in any folder.

Then, when I build for release, I do this before I Build > Run:

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

Since upgrading to XCode, whenever I do a release build, my images no longer appear. In dev build, the images are visible.

I have tried --assets-dest ./some-folder, but the results are same.

What could cause this change?

Answer 1

Solution 1:

In my case I was using resizeMode='center' and when I changed from 'center' to 'contain' it solved my problem.

Solution 2:

1. Navigate to project directory => ios => Create folder assets

2. Inside folder assets => create folder structure same as folder where you keep image in the project (In my case I kept all the images in app > src > assets > image) and copy all images to this folder
3. Open Xcode => Select project target => Build Phases
4. Drag folder assets which we have created into Copy Bundle Resources

5. Select Copy items if needed and press Finish

6. Clean project and Build release again

Done!

PS: If your images name like this my_image.ios.jpg you need to rename them to my_image.jpg.

Solution 3:

In Build Phases > Bundle React Native code and images replace any lines you have for this:

export NODE_BINARY=node ../node_modules/react-native/scripts/react-native-xcode.sh

After, delete main.jsbundle file from xcode and from the folder and remake it again:

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

After, add the generated main.jsbundle again. Clean, build and run the project again.