Skip to content

fix: support CSS asset resolution on React Native 0.87 - #3019

Open
giaBaoJS wants to merge 1 commit into
software-mansion:mainfrom
giaBaoJS:fix/rn-087-css-asset-registry
Open

fix: support CSS asset resolution on React Native 0.87#3019
giaBaoJS wants to merge 1 commit into
software-mansion:mainfrom
giaBaoJS:fix/rn-087-css-asset-registry

Conversation

@giaBaoJS

@giaBaoJS giaBaoJS commented Aug 18, 2026

Copy link
Copy Markdown

Summary

Fixes #3015.

React Native 0.87 no longer installs @react-native/assets-registry transitively, so importing react-native-svg/css failed while Metro resolved LocalSvg and resolveAssetUri.

This change resolves native numeric assets through the public Image.resolveAssetSource API instead. That API is available across react-native-svg's supported React Native range and delegates to the registry owned by the installed React Native version.

The existing registry-based implementation is retained in resolveAssetUri.web.ts. React Native Web does not expose Image.resolveAssetSource, so using a platform file avoids changing its asset behavior.

I did not use either suggested React Native 0.87-only entry point:

  • react-native/asset-registry is first exported in React Native 0.87;
  • the root AssetRegistry named export is also absent in React Native 0.78–0.86.

Adding a standalone registry dependency would also risk resolving a different registry version/instance from the one used by React Native. The public Image resolver keeps the library compatible with React Native 0.78 through 0.87 without adding a dependency.

Test Plan

React Native 0.87 package-consumption reproduction

I packed the actual package, installed it into the repository's React Native 0.87 test app, removed access to parent node_modules, and bundled an entry importing react-native-svg/css.

Before the change:

error Unable to resolve module @react-native/assets-registry/registry from
node_modules/react-native-svg/src/lib/resolveAssetUri.ts:
@react-native/assets-registry/registry could not be found within the project
or in these directories:
  node_modules

The app had no direct node_modules/@react-native/assets-registry installation. With a tarball built from this branch, the same command succeeds:

Welcome to Metro v0.87.0
Writing bundle output to: /private/tmp/rnsvg3015-fixed.bundle
Done writing bundle output
Done in 1.89s.

Oldest supported representative

The same fixed tarball bundles successfully in an isolated React Native 0.78.3 consumer:

0.78.3 / react-native-svg 15.15.5 / assets-registry 0.78.3
Welcome to Metro v0.81.5
Writing bundle output to: /private/tmp/rnsvg3015-rn078.bundle
Done writing bundle output

Regression tests

Keeping the final tests while reverting only the native source change produces:

FAIL __tests__/resolveAssetUri.test.ts
  ✕ uses the public Image resolver for numeric native assets
  ✕ throws when the public Image resolver cannot find a native asset
  ✓ keeps using the web asset registry for numeric web assets
  ✓ throws when the web asset registry cannot find an asset
  ✓ keeps string, object and inline SVG URI behavior unchanged
  ✓ keeps string, object and inline SVG URI behavior unchanged

Tests: 2 failed, 4 passed, 6 total

Restoring the change gives 6/6 passing. I also inserted a deliberate failing sentinel into the new suite and confirmed Jest reported that exact assertion, proving the harness collects the file.

Final checks:

yarn test
# lint + tsc: pass

yarn bob
# commonjs + module + typescript: pass

yarn jest __tests__/resolveAssetUri.test.ts --runInBand \
  --config '{"rootDir":".","preset":"react-native","testEnvironment":"node"}'
# 1 suite, 6 tests: pass

npm pack --dry-run --ignore-scripts --json
# includes source, CommonJS, module, and type outputs for both platform files

yarn prettier --check src/lib/resolveAssetUri.ts \
  src/lib/resolveAssetUri.web.ts __tests__/resolveAssetUri.test.ts
# pass

Compatibility

OS Implemented
iOS
MacOS
Android
Web

Checklist

  • I have tested this on a device and a simulator (module-resolution change; verified through Metro bundles)
  • I added documentation in README.md (not applicable)
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RN 0.87 compatibility - Metro fails to resolve @react-native/assets-registry/registry when importing from react-native-svg/css

1 participant