search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
116.94k stars 24.06k forks source link

Local image is not being rendered in release and TestFlight #31525

Open junqdu opened 3 years ago

junqdu commented 3 years ago

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 https://github.com/facebook/react-native/issues/29268, since I am using 0.63.4 Examined the IPA file, and it does contain all the images Thanks in advance!

heberuriegas commented 3 years ago

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

junqdu commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

ShaunGVos commented 3 years ago

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

My System:

I made the following changes to package.json:

(Note: arch -x86_64 only for M1 Silicon)

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

eqlion commented 3 years ago

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

pedroarm commented 3 years ago

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

eqlion commented 3 years ago

@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 commented 2 years ago

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 commented 2 years ago

I have the same problem React native 0.63.4

junqdu commented 2 years ago

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 commented 2 years ago

I'm using bare workflow expo in my project

vanskins commented 1 year ago

same issue for me.

renanbronchart commented 1 year ago

Same issue too.

ucheNkadiCode commented 1 year ago

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

ucheNkadiCode commented 1 year ago

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!

lchenfox commented 1 year ago

The same issue for me.

pckz commented 1 year ago

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

stevekuznetsov commented 1 year ago

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

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 commented 12 months ago

same issue here. React Native 0.71.8

saqlain0007 commented 11 months ago

Same issue for me

Pipi144 commented 9 months ago

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:

gerardo-contijoch commented 7 months ago

Same issue with react-native 0.71.3.

aashankhan2981 commented 6 months ago

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[bot] commented 2 days ago

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.