[ Documentation ]
Metro Plugin

Metro Plugin

Peach 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 withPeach() from peachsim/metro. This embeds exact, deterministic module identity into your bundles and serves the in-browser simulator shell during development.

withPeach(config) takes no options:

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

What it does

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

1. Deterministic module identity

Metro strips module names from production bundles (dev: false). While Peach can usually infer module identity via the published fingerprint registry, withPeach 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. The identity footer remains part of the JavaScript bundle; it does not change native module resolution.
  • +
    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, withPeach serves the in-browser Peach simulator at /__peachsim/ on your existing Metro dev server. Navigating to http://localhost:8081/__peachsim/ loads your app in the simulator immediately.

Bundle URL helpers

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

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