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

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:

• https://github.com/facebook/metro/issues/1599
• https://github.com/facebook/metro/issues/1614

Additional info:

Possible fixes from above issues didn't work out.

Start by reproducing the issue with the provided Yarn workspace layout, React Native 0.81.5, NX, and the shown Metro configuration, using nx start <project>. Compare asset imports from the application directory with imports from @someWorkspace/assets, and review related issues 1599 and 1614. Done means shared-package image assets resolve and render without requiring them to be moved into the app.