Local image is not being rendered in release and TestFlight

[junqdu]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Please provide a clear and concise description of what the bug is. Include screenshots if needed.
Please test using the latest React Native release to make sure your issue has not already been fixed: https://reactnative.dev/docs/upgrading.html

React Native version:

info Fetching system and libraries information...
System:
OS: macOS 11.3.1
CPU: (8) x64 Apple M1
Memory: 48.34 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
Yarn: Not Found
npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
Watchman: 4.9.0 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 30
Build Tools: 30.0.3
System Images: android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.7042882
Xcode: 12.5/12E262 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_282 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: ~0.63.4 => 0.63.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. build archive with Xcode or test flight
2. look at image being used in the way below
3. <Image
   source={require('../assets/images/xyz.png')}
   style={styles.img}
   resizeMode="cover"
   />
4. Image not rendered

Expected Results

Image being rendered

Snack, code example, screenshot, or link to a repository:

Using react-native v0.63.4, and all the local image load fine in development mode

<Image
source={require('../assets/images/xyz.png')}
style={styles.img}
resizeMode="cover"
/>
but once we built it in release mode or test flight, all the image loaded with require is not being rendered.

What I have found so far:

Doesn't seem to be #29268, since I am using 0.63.4
Examined the IPA file, and it does contain all the images
Thanks in advance!

[heberuriegas]

+1 Same problem here I'm using 0.63.4, @junqdu did you solve the issue?

[junqdu]

@woohoou nope, but I got a workaround for it. I stored the base64 encoding string in a separate file, and referenced them that way.

import {someImage} from '../assets/images.ts'

<Image source={{uri: someImage}} style={...}/>

Not an elegant solution, but it works, and we don't have too much local assets.

[eqlion]

The same issue here: RN 0.64.1, Xcode 12.4, Hermes enabled. Clarification: the issue appears only on iOS, everything's fine on Android (with Hermes enabled).

The workaround suggested by @junqdu seems ridiculous, might try it as a temporary measure, however this is not acceptable in the long run.

Full system info

System:
    OS: macOS 11.0.1
    CPU: (4) x64 Intel(R) Core(TM) i5-5300U CPU @ 2.30GHz
    Memory: 112.19 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 27, 28, 29, 30
      Build Tools: 28.0.3, 29.0.0, 29.0.2, 29.0.3, 30.0.2
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.1 => 0.64.1
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Update:
I've just tried running the release scheme on a real device and the issue persists.

Second update:
Can confirm, using base64 image works

[pedroarm]

The same issue here: RN 0.63.4, Xcode 12.5. I haven't found any viable solution so far.

[ShaunGVos]

I had the same issue so upgraded React and React Native using the Upgrade helper as a guide

My System:

• Apple Mac Mini M1 Silicon (2020).
• Mac OS 11.4
• XCode 12.5 (open with Rosetta)
• Target Build IOS 14.3

I made the following changes to package.json:

• Updated from "react": "16.13.1" to "react": "17.0.1"

• Updated from "react-native": "0.63.4" to "react-native": "0.64.2",

• Updated from "@babel/core": "^7.8.4" to "@babel/core": "^7.12.9"

• Updated from "@babel/runtime": "^7.8.4" to "@babel/runtime": "^7.12.5"

• Updated from "@react-native-community/eslint-config": "^1.1.0" to "@react-native-community/eslint-config": "^2.0.0"

• Updated from "@types/jest": "^25.1.0" to "@types/jest": "^26.0.23"

• Updated from "eslint": "^6.5.1" to "eslint": "^7.14.0"

• Updated from "jest": "^25.1.3" to "jest": "^26.6.3"

• Updated from "metro-react-native-babel-preset": "^0.59.0" to "metro-react-native-babel-preset": "^0.64.0"

• Updated from "react-test-renderer": "16.13.1" to "react-test-renderer": "17.0.1"

• Updated Node to 16.3.0 in NVM.

• Uninstalled the React Native CLI and Reinstalled

• In Terminal: nvm unalias default

• Deleted node_modules folders, pod folder and cleaned build in Xcode

• Deleted everything in /Users/xxxxx/Library/Developer/Xcode/DerivedData

• Installed all packages: npm install

• Updated pod repo: arch -x86_64 pod repo update

• Installed pod packages: arch -x86_64 pod install

(Note: arch -x86_64 only for M1 Silicon)

Then built and archived successfully in Xcode 12.5. Images then rendered in TestFlight

[eqlion]

@devmindset-shaunvos I've just updated everything (except for Xcode) to the latest versions, and still have the same result: no local images.

[pedroarm]

@ devmindset-shaunvos Acabei de atualizar tudo (exceto o Xcode) para as versões mais recentes e ainda tenho o mesmo resultado: nenhuma imagem local.

• Using the images by url link worked well, temporarily to me. And for SVG images i was kept in the app assets.
• Currently this is the only alternative that works, being simple and viable

[eqlion]

@pedroarm I agree it works, but it can hardly be a viable solution for everyone. For instance, I obviously store icons as svgs, however, there are other static images I need to use. Uploading them and using remote sources would be slow and cumbersome, while using base64 is just weird, as it used to work just fine (and still does on Android). I do not argue that the proposed temporary solution works, I just do not understand what causes the issue on the fundamental level and how it can be fixed without hacks and such.

[jonno85]

It happens the same to me even after having upgraded to RN 0.66.3.
The ios production build works fine if I trigger the build directly from XCode to the real IOS device, instead uploading the build through TestFlight shows the problem with the static images.

UPDATE:
I discovered that the scheme with release produces the same effect, which is the assets folder is not copied correctly in the place where the build is looking for during app execution. Still investigating into it.
The XCode script in Bundle React native code and images does exactly that ../node_modules/react-native/scripts/react-native-xcode.sh but I don't get where it fails

[henrique-in]

I have the same problem
React native 0.63.4

[junqdu]

My project started off with expo, later on we migrated to just react native, using their terms I think we went from expo managed workflow to bare. And that's went we encountered the issue.

Now, I pretty restart/re-setup the project using react native cli, and the issue were solved.

[henrique-in]

I'm using bare workflow expo in my project

[vanskins]

same issue for me.