Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native Image on Android fails to display images loaded with require() #27408

Closed
1 of 4 tasks
kanafghan opened this issue Aug 13, 2024 · 4 comments
Closed
1 of 4 tasks
Assignees
Labels
scope: react-native Issues relating to React Native type: bug

Comments

@kanafghan
Copy link

Current Behavior

React Native (RN) Image on Android fails to display images loaded with require(), i.e.:

<Image style={{ width: 32, height: 32 }} source={require('./loading.gif')}

Expected Behavior

The images should be displayed as it is the case on iOS

GitHub Repo

https://github.com/kanafghan/nx-rn-image-android

Steps to Reproduce

  1. Clone the repo, i.e. git clone [email protected]:kanafghan/nx-rn-image-android.git && cd nx-rn-image-android
  2. Run Android, i.e. nx run-android mobile
  3. When the app is lauched, notice that only text is shown:

Screenshot_1723557878

and the console will show the following logs:

ss-nx-rn-image-android-logs.pdf

Now, run the iOS version, i.e. nx run-ios mobile, and you should see the following:

Simulator Screenshot - iPhone 11 Pro - 2024-08-13 at 16 05 01

Nx Report

Node           : 18.18.2
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 9.8.1

nx                 : 19.5.7
@nx/js             : 19.5.7
@nx/jest           : 19.5.7
@nx/linter         : 19.5.7
@nx/eslint         : 19.5.7
@nx/workspace      : 19.5.7
@nx/detox          : 19.5.7
@nx/devkit         : 19.5.7
@nx/eslint-plugin  : 19.5.7
@nx/react          : 19.5.7
@nx/react-native   : 19.5.7
@nrwl/tao          : 19.5.7
@nx/web            : 19.5.7
@nx/webpack        : 19.5.7
typescript         : 5.5.4
---------------------------------------
Registered Plugins:
@nx/react-native/plugin
@nx/eslint/plugin
@nx/webpack/plugin
@nx/detox/plugin

Failure Logs

[Loader] onError: Unexpected HTTP code Response{protocol=http/1.1, code=404, message=Not Found, url=http://10.0.2.2:8081/libs/shared-ui/src/loader/loading.gif?platform=android&hash=9df6a322c68c6493d74d35f155206b81}
 LOG  [Building] onError: Unexpected HTTP code Response{protocol=http/1.1, code=404, message=Not Found, url=http://10.0.2.2:8081/libs/shared-ui/src/building/building.jpeg?platform=android&hash=867f9cd6af06615fa70ab0a20222bcb1}

Package Manager Version

No response

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

No response

@FrozenPandaz FrozenPandaz added the scope: react-native Issues relating to React Native label Aug 15, 2024
@xuanmai-agilityio
Copy link

Got the same issue on Android, it's only able to load local images when placing images within the specific app folder. Not any libs folder.

@xiongemi
Copy link
Collaborator

this is the issue for react native that images is not showing in android for debug mode: facebook/react-native#25290.

you can see the image with release mode by running: nx run-android mobile --mode=release

also, when debugging your repo, I also changed the line

    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"

in file apps/mobile/android/app/build.gradle to:

hermesCommand = "../../node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc"

@xuanmai-agilityio
Copy link

@xiongemi Thanks for your response on this issue.
But it didn't happen on the Nx v17.x and React Native 0.72.x. If we run the Android with release mode, we can not access to debug tools (Hot reload, DevSettings,...) anymore.
So I think it's not the root cause and this issue should be re-opened.

@xuanmai-agilityio
Copy link

Hi @kanafghan , do you have any further investigation on this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: react-native Issues relating to React Native type: bug
Projects
None yet
Development

No branches or pull requests

4 participants