Image assets fail to render in Yarn workspace monorepo with React Native 0.81.* and NX

[teplymax]

Description

Image assets fail to render in Yarn workspace monorepo with React Native 0.81.* and NX.
If move assets into application's directory then metro resolves them correctly. But if assets are located in outside application's directory in the monorepo then bundler can not resolve them.

FAILS TO RESOLVE:

repo-root/
├─ apps/
│  └─ someApp/                    
│     ├─ src/
│      │  └─ App.tsx
│
└─ packages/
   └─ assets/                    ← asset lives OUTSIDE the app
     ├─ images/
      │  └─ logo.svg 

SUCCESSFULLY RESOLVES:

repo-root/
│
├─ apps/
│  └─ someApp/    
                
│     ├─ src/
│         ├─ assets/
│          │ └─ logo.svg      ← asset lives INSIDE the app
│      │  └─ App.tsx
│
└─ packages/

Environment

• React Native: 0.81.5
• React: 19.1.0
• Yarn: 4.x (workspaces) and 1.22.22
• Node: 22.x
• OS: macOS 15 (M1 Pro)
• Bundler: Metro (default)

Relevant dependencies

{
  "@react-native/metro-config": "0.81.5",
  "@react-native/babel-preset": "0.81.5",
  "@react-native/typescript-config": "0.81.5",
  "react-native-svg-transformer": "1.5.1",
  "react-native": "0.81.5",
  "react": "19.1.0",
  "nx": "21.6.3",
  "@nx/react-native": "21.6.3"
}

App usage

// packages/mobile/App.tsx
import React from 'react'
import { Image } from 'react-native'

export const App = () => (
  <Image source={require('@someWorkspace/assets/logo.png')} style={{ width: 64, height: 64 }} />
)

When run

nx start <project>

Metro config:

const {withNxMetro} = require('@nx/react-native');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const {
  getMetroAndroidAssetsResolutionFix,
} = require('react-native-monorepo-tools');
const {withDatadogMetroConfig} = require('@datadog/mobile-react-native/metro');

const assetsFix = getMetroAndroidAssetsResolutionFix();

const defaultConfig = getDefaultConfig(__dirname);
const {assetExts, sourceExts} = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro

 *
 * @type {import('metro-config').MetroConfig}
 */
const customConfig = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    publicPath: assetsFix.publicPath,
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
  },
  server: {
    enhanceMiddleware: assetsFix.applyMiddleware,
  },
};

module.exports = withNxMetro(
  withDatadogMetroConfig(mergeConfig(defaultConfig, customConfig)),
);

NX project config:

{
  "name": "projectName",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/someApp/src",
  "projectType": "application",
  "tags": ["app"],
  "targets": {
    "start": {
      "executor": "@nx/react-native:start",
      "dependsOn": ["sync-deps"],
      "options": {
        "port": 8081,
        "resetCache": true
      }
    }
}
...Other config
}

The app builds and runs, but the image renders as an empty space.

Expected behavior

Metro/React Native should correctly resolve and bundle static image assets exported from shared workspace packages — the same way it handles JS modules.

Actual behavior

When importing images from another workspace (e.g., @someWorkspace/assets), the app runs without any build or runtime error, but the image simply does not appear.

Screenshots / recordings

Related issues:

• Image assets silently fail to render in Yarn workspace monorepo with React Native 0.81.4 #1599
• Static images fail to load in monorepo on iOS #1614

Additional info:

Possible fixes from above issues didn't work out.

[jiroscripts]

@teplymax

Have you found a workaround?

[dsshard]

In package.json

"resolutions": {
"metro": "0.82.5",
"metro-config": "0.82.5",
"metro-core": "0.82.5"
}

I've rolled back the version for now, and that helped me.