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) needs no options:

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

const config = getDefaultConfig(__dirname)

module.exports = withPeach(config)

When your ios/ project has more than one app target, pass iosTarget to name the one whose app identity and Firebase configuration Peach reads:

module.exports = withPeach(config, { iosTarget: 'MyApp' })

#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 small footer at the end of the bundle.

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',
)

#Related

• +
  Setup
• +
  One Plugin
• +
  Installation