Image assets silently fail to render in Yarn workspace monorepo with React Native 0.81.4

[sibe7691]

🐛 Image assets silently fail to render in Yarn workspace monorepo with React Native 0.81.4

When using Yarn 4 workspaces in a monorepo, React Native 0.81.4 fails to render static image assets that live in another workspace.
JavaScript and TypeScript modules import correctly, but any require()d image (e.g. .png, .jpg, .svg) never appears at runtime. Metro starts normally and shows no visible error, yet the images do not render.

Environment

• React Native: 0.81.4
• React: 19.1.0
• Yarn: 4.x (workspaces)
• Node: 20.x
• OS: macOS 14 (M3 Pro)
• Bundler: Metro (default)

Relevant dependencies

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

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., @rb-oxygen/assets), the app runs without any build or runtime error, but the image simply does not appear.
The bundler shows no warnings, and React Native logs are clean.
However, Console.app on macOS shows repeated asset fetch cancellations when attempting to resolve the image from a path outside Metro’s asset root:

default 22:51:30.221651+0200 rbApp [C1142 91F51773-BDF4-4AA2-AB73-DE1143360C12 Hostname#df48400c:8081 tcp, url: http://localhost:8081/assets/../../packages/assets/images/logo.png, definite, attribution: developer] cancel
default 22:51:30.221707+0200 rbApp [C1142 91F51773-BDF4-4AA2-AB73-DE1143360C12 Hostname#df48400c:8081 tcp, url: http://localhost:8081/assets/../../packages/assets/images/logo.png, definite, attribution: developer] cancelled

This suggests Metro is attempting to resolve the image via a relative path outside the app’s asset root, then silently cancels the request.

Monorepo layout

/monorepo
  /packages
    /mobile       (React Native app)
    /assets       (shared images)
    /molecules    (shared UI components)

Shared package (image exports)

// packages/assets/icons.ts
export const icons = {
  logo: require('./images/logo.png'),
  avatar: require('./images/avatar.png'),
}

App usage

// packages/mobile/App.tsx
import React from 'react'
import { Image } from 'react-native'
import { icons } from '@rb-oxygen/assets/icons'

export const App = () => (
  <Image source={icons.logo} style={{ width: 64, height: 64 }} />
)

When running the app with:

yarn start
yarn ios

The app builds and runs, but the image renders as an empty space.
No visible errors appear in Metro or the terminal.

Metro configuration

// packages/mobile/metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')
const path = require('path')

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

const workspaceRoot = path.resolve(__dirname, '../..')

const customConfig = {
  cacheVersion: '@rb-oxygen/mobile',
  watchFolders: [
    workspaceRoot,
    __dirname,
    path.resolve(workspaceRoot, 'packages'),
    path.resolve(workspaceRoot, 'features'),
  ],
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: [...assetExts.filter(ext => ext !== 'svg'), 'lottie'],
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg', 'ts', 'tsx'],
  },
}

module.exports = mergeConfig(defaultConfig, customConfig)

---

Troubleshooting attempts

• Verified all symlinked workspace paths resolve correctly under Yarn 4
• Added all workspace roots to watchFolders
• Extended resolver.assetExts and sourceExts
• Confirmed that JS/TS imports across workspaces work perfectly
• Tried both direct require() calls and re-exported imports

The issue persists: all images fail silently with no errors in Metro logs, only the Console.app network cancellations shown above.

---

Additional context

• This setup worked correctly in earlier React Native versions (<0.80).
• The issue appears related to Metro 0.81+ handling of asset roots in Yarn workspaces.

---

Question

Is there an official or recommended way to configure Metro or React Native 0.81.4 so that static image assets from other Yarn workspace packages resolve and render correctly?
Am I missing something else since the upgrade?

[jiroscripts]

@sibe7691 Did you find a fix for this ? I tried to update RN + NX and now I also have this issue. Before the update I used getMetroAndroidAssetsResolutionFix from https://www.npmjs.com/package/react-native-monorepo-tools/v/1.1.0. But it does not works anymore

[jiroscripts]

I finally removed the getMetroAndroidAssetsResolutionFix and added workspaceRoot to watchFolders. Now it is working as expected

[jiroscripts]

Hello @sibe7691

I was able to solve the problem mentioned on Android, but I'm experiencing the exact same issue on iOS. Did you find a solution?

[sibe7691]

@jiroscripts hey;
Yeah we solved it.
In our case we had to move metro.config to the root of the mono repo.
It was located in /apps/mobile before. Moving it to the root solved it for us

[jiroscripts]

Thanks for your response 🙏

So I guess you changed the path of workspaceRoot + projectRoot in the config ?

I cannot try for now, I have to wait monday

[jiroscripts]

Hey @sibe7691?

I tried to move the config without any success :/

Could you please share your metro.config.js and your package.json to help to debug ?

[sibe7691]

Hey @sibe7691?

I tried to move the config without any success :/

Could you please share your metro.config.js and your package.json to help to debug ?

const path = require('path')

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

// Get the workspace root directory
const projectRoot = __dirname
const workspaceRoot = path.resolve(projectRoot, '../..')

const customConfig = {
  cacheVersion: '@rb-oxygen/mobile',
  projectRoot: workspaceRoot,
  watchFolders: [
    path.resolve(workspaceRoot, 'packages'),
    path.resolve(workspaceRoot, 'features'),
    path.resolve(workspaceRoot, 'services'),
  ],
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'lottie'],
    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg', 'ts', 'tsx'],
  },
}

module.exports = mergeConfig(defaultConfig, customConfig)

and our folder structure is like this:

root/apps/mobile <-- this is where the app is.
root/packages/
root/features

[jiroscripts]

Do you have your react-native module installed in the app directory or in the root directory ?

[valeriavodianchuk]

So the fix is to set workspaceRoot as a projectRoot? In this case we need to move index.js and babel config to the root too.

Any other ways to make it work without changing the projectRoot?

[jiroscripts]

Hello @valeriavodianchuk,

You don’t need to move index.js, only the Babel config.
You can update the index.js path on the native side instead.

Unfortunately, this is the only workaround I’ve found so far.