[ Documentation ]
Metro Plugin

Metro Plugin

rnx works directly with regular Metro production bundles out of the box via fingerprint scanning. You don’t need any plugins or special configuration to get started.

If an app has unusual dependencies or fingerprint inference fails, you can optionally wrap your Metro configuration with withRNX() from rnxsim/metro. This embeds exact, deterministic module identity into your bundles and serves the in-browser simulator shell during development.

withRNX(config) takes no options:

const { getDefaultConfig } = require('expo/metro-config')
const { withRNX } = require('rnxsim/metro')
const config = getDefaultConfig(__dirname)
module.exports = withRNX(config)

What it does

Wrapping your configuration with withRNX(config) enables two integrations automatically:

1. Deterministic module identity

Metro strips module names from production bundles (dev: false). While rnx can usually infer module identity via the published fingerprint registry, withRNX makes module identity deterministic by appending Metro’s exact module map as a trailing globalThis.__sootsimModulePaths = { ... } footer.

Nothing else changes:

  • +
    Module resolution, transforms, and minification stay completely untouched.
  • +
    The annotated bundle is the exact bundle you ship. The footer assigns an unused global on native devices, and Hermes strips it during bytecode compilation.
  • +
    Development bundles (dev: true) receive the same identity map while keeping __DEV__ and their trailing source map intact.

2. In-browser dev shell

During development, withRNX serves the in-browser rnx simulator at /__soot/ on your existing Metro dev server. Navigating to http://localhost:8081/__soot/ loads your app in the simulator immediately.

Bundle URL helpers

To request production or development graphs from a running Metro server, rnxsim/metro provides URL helpers that apply standard Metro parameters:

const { toRNXProductionBundleUrl, toRNXDevelopmentBundleUrl } = require('rnxsim/metro')
// requests dev=false&minify=true
const productionUrl = toRNXProductionBundleUrl(
'http://localhost:8081/index.bundle?platform=ios',
)
// requests dev=true&minify=false
const developmentUrl = toRNXDevelopmentBundleUrl(
'http://localhost:8081/index.bundle?platform=ios',
)