CODEWITHSUNDEEP
iosxcodeimagereact-nativebuild
TIMEX
TIMEX

Reputation: 272254

React-Native Image is not displaying after XCode 11.5 Upgrade

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?

Upvotes: 5

Views: 1247

Answers (2)

ASN
ASN

Reputation: 1883

The way I handled in my code is to create a separate module for different formats under the src directory as @types

so these two files below will be under src/types

png.d.ts

declare module '*.png' {
  const __pngImage__: unique symbol;
  const image: number & { __ext__: typeof __pngImage__ };
  export default image;
}

similarly for jpg

jpg.d.ts

declare module '*.jpg' {
  const __jpgImage__: unique symbol;
  const image: number & { __ext__: typeof __jpgImage__ };
  export default image;
}

And then import normally in the component

import my_image from 'assets/images/my_image.png';

and use it like below

<View>
    <Image src = {my_image} />
</View>

Upvotes: 0

Muhammad Numan
Muhammad Numan

Reputation: 25413

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

  1. 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
  2. Open Xcode => Select project target => Build Phases
  3. Drag folder assets which we have created into Copy Bundle Resources

  1. Select Copy items if needed and press Finish

  1. 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.

Upvotes: 3

Related Questions