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.

[renanbronchart]

Same issue too.

[ucheNkadiCode]

I also still have this issue, I'm on react native 68.0

[ucheNkadiCode]

Update: The problem was actually in my Metro.config.js file. I had followed a tutorial to add SVGs to my project, but little did I know that the code I was adding would wipe out all assets besides the ones with a .svg extension.... Sad.

For reference I once had an expo app and ejected to a bare metal app so the final metro config pulls from expo/metro-config.

My previous metroconfig.js

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
    const {
      resolver: { sourceExts, assetExts },
    } = await getDefaultConfig();
    return {
      transformer: {
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
      },
      resolver: {
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
      },
    };
  })();

As you can see, this is literally wiping out any asset that doesn't have a .svg extension (I think). So even tho my react-native.config.js was correctly declaring the asset folders I wanted in my applications, metro was only allowing svg files to get pulled in. Ultimately I didn't need svg-transformer so I reverted to the classic metro file and this fixed my problem.

The new file ->

// Learn more https://docs.expo.io/guides/customizing-metro
// You need the prefix expo or it won't work. You made your life like this.
const { getDefaultConfig } = require('expo/metro-config');

// Keep in mind that the default bundler knows how to create a folder of all of the assets that get "required" by each ts file
// The default config includes mp4 files and more. If you need to add svg in the future,
// Create a const value and push an extra value to the array. Svg transformer messed us up.
module.exports = getDefaultConfig(__dirname);

And my react-native.config.js remained unchanged (just make sure to include asset folders you care about)

module.exports = {
  assets: ["./assets/fonts/", "./assets/onboarding/"],
  dependencies: {
    // Disable auto linking for `react-native-vector-icons` and link
    // the required fonts manually to avoid duplicate resources issue in iOS.
    "react-native-vector-icons": {
      platforms: {
        ios: null,
        android: null,
      },
    },
  },
};

Don't forget to run react-native link and npm start -- --reset-cache afterwards!

[arlovip]

The same issue for me.

[pckz]

same issue here 😭 severals days wasted trying to fix this up

[stevekuznetsov]

@ucheNkadiCode I was stumbling into similar issues and got side-tracked by your comment a bit, so just wanted to note that:

• assetExts: assetExts.filter(ext => ext !== 'svg'), filters out "svg" (and only "svg") from the list of file extensions to bundle assets with
• sourceExts: [...sourceExts, 'svg'], marks "svg" as an extension for source files (not assets!)

The result of the snippet you have is that SVGs are treated as source, and the SVG transformer consumes that to produce parts of your bundle. I think you got hung up on the filtering logic, but it's wiping out only SVGs from assets, not the opposite.

[daviddamilola]

same issue here. React Native 0.71.8

[saqlain0007]

Same issue for me

[Pipi144]

same issue here for me in React Native 0.72.4. The local images are rendered in dev mode but Release mode not shown!

react native info
System:
OS: macOS 13.5.1
CPU: (20) x64 Intel(R) Core(TM) i9-10910 CPU @ 3.60GHz
Memory: 350.38 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.6.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.6.4
path: ~/Desktop/DoxleMobile/node_modules/.bin/npm
Watchman:
version: 2023.09.04.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.12.0
path: /Users/selvinkamal/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.2
- iOS 16.2
- macOS 13.1
- tvOS 16.1
- watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9477386
Xcode:
version: 14.2/14C18
path: /usr/bin/xcodebuild
Languages:
Java:
version: 20.0.2
path: /usr/bin/javac
Ruby:
version: 2.7.6
path: /Users/selvinkamal/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: ^0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: false

[gerardo-contijoch]

Same issue with react-native 0.71.3.

[aashankhan2981]

I encountered the same issue with React Native 0.63.3, where images loaded correctly locally but failed to load in the TestFlight IPA. Despite trying various solutions without success, I eventually identified that my assets weren't being bundled into the myapp.app.

Here's a simplified guide on how to resolve this:

1. Open your project in Xcode.
2. In the left sidebar, navigate to your project and select your app from the target section.
3. Go to "Build Phases."
4. Look for "Copy Bundle Resources" and click on it.
5. Use the '+' icon to add other items.
6. Navigate to your ios folder and select the 'assets' folder, then add it.
   Additionally:
7. Ensure your images are present in the assets folder. If you can't find them, run the following command in your terminal to bundle again:
   npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'

This addition ensures that your assets get bundled during the build process, resolving the issue of images not loading in TestFlight.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.

[bharathy-kannan]

Same issue here with bare react native using expo for just eas updates. I don't see any local png images now. My metro.config.js is given here.

const {getDefaultConfig: getDefaultExpoConfig} = require('expo/metro-config');
const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const expoConfig = getDefaultExpoConfig(__dirname);
const defaultConfig = getDefaultConfig(__dirname);

//const {assetExts, sourceExts} = expoConfig.resolver;
const assetExts = Array.from(
new Set([
...expoConfig.resolver.assetExts,
...defaultConfig.resolver.assetExts,
'png',
]),
).filter(ext => ext !== 'svg');
const sourceExts = Array.from(
new Set([
...expoConfig.resolver.sourceExts,
...defaultConfig.resolver.sourceExts,
'svg',
]),
);

const config = {
transformer: {
...expoConfig.transformer,
babelTransformerPath: require.resolve('react-native-svg-transformer'),
assetPlugins: ['expo-asset/tools/hashAssetFiles'],
},
resolver: {
...expoConfig.resolver,
assetExts: [...assetExts],
sourceExts: [...sourceExts],
},
};

module.exports = mergeConfig(defaultConfig, expoConfig, config);

Please help.

react-native: 0.74
expo: 51.0.0
SDK: 6.3

I just started with expo as I had to do eas updates as I am moving away from codepush

Thanks

[krunal-cmyk]

@bharathy-kannan did you find any solution for this, I am facing same issue, I am able to load SVG's but not PNG's & GIF's. Please help.

[YuriiLutsykSPRO]

@bharathy-kannan @krunal-cmyk I faced the same problem, please help me!!!

[nahooni0511]

@bharathy-kannan @krunal-cmyk @YuriiLutsykSPRO
I had the same issue with a bare React Native project using Expo solely for EAS updates. After switching to EAS updates, all of my local PNG images stopped appearing. At first, I tried tweaking the metro.config.js without any success.

It turns out the problem was that I never ran npx install-expo-modules@latest after integrating Expo. Without running this, the project isn’t fully converted to the Expo environment, causing local images to vanish in the release build.

Check out https://docs.expo.dev/bare/installing-expo-modules for more details.