Local images not displaying on Android

[Estebank94]

Description

Local images do not display on Android but display correctly on iOS.

React Native version:

System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 108.27 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 24, 28, 29
      Build Tools: 23.0.1, 25.0.0, 25.0.1, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 28.0.2, 28.0.3, 29.0.1, 29.0.2, 29.0.3
      System Images: android-23 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_131 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

1. Run the app

Expected Results

Local images should display correctly.

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

Because I share the same JS code and assets between two apps, my project has the following structure:

->Project X
   ->Packages
       -> common
            -> Assets
            -> ... Rest of common JS code
       -> ProjectA
            -> index.js
            -> App.js
            -> bebel.config.js
            -> metro.config.js
       -> ProjectB

metro.config.js Because I share common code between two apps, I have set the following configuration:

const path = require('path');

const extraNodeModules = {
  common: path.resolve(__dirname + '/../common'),
};

const watchFolders = [path.resolve(__dirname + '/../common')];

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    extraNodeModules: new Proxy(extraNodeModules, {
      get: (target, name) =>
      //redirects dependencies referenced from common/ to local node_modules
      name in target ? target[name] : path.join(process.cwd(), `node_modules/${name}`),
    }),
  },
  watchFolders,
};

projectA/android/app/build.gradle

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
    bundleInDebug: true
]
...

I have tried clearing the cache, I tried on different computers but the error persists.

[chang-ke]

you should add file:// prefix on local image path. it maybe helps you

[msibibert]

same problem

[msibibert]

in my case the images are not displayed only in debug mode. Anyone had the same problem?

[kenfoo]

I'm experiencing the same problem too.

Issue only happens when loading an image from a path outside the project directory in debug mode.

React Native is somehow picking up the image dimensions properly & allocating the appropriate space on the view, but no image is displaying.

Works in Android release mode. Works in iOS debug & release mode.

A simple App.js using the example above will reproduce the problem.

export default function App() {
  return (
    <SafeAreaView>
      <Image source={require('common/icon.png')} />
      <Text>Hello world</Text>
    </SafeAreaView>
  );
};

[decebalus1]

I'm experiencing the same problem. Did you find a solution?

[markrickert]

Check out this article, it might help: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

I had this same issue in a monorepo and solved it by using https://www.npmjs.com/package/react-native-monorepo-tools

in your metro.config.js

const { getMetroAndroidAssetsResolutionFix} = require('react-native-monorepo-tools');
const androidAssetsResolutionFix=getMetroAndroidAssetsResolutionFix();

module.exports = {
  // other stuff
  transformer: {
    publicPath: androidAssetsResolutionFix.publicPath, // <-- add this
    // other stuff
  },
  // more stuff
  server: {
    enhanceMiddleware: (middleware) => {
      return androidAssetsResolutionFix.applyMiddleware(middleware); // <-- add this
    },
  },
};

I hope that helps!

[github-actions[bot]]

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[bot]]

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

[rodrigomf24]

const androidAssetsResolutionFix=getMetroAndroidAssetsResolutionFix();

@markrickert you are the man, this fixed my issue 🙌🏼