@elmony/expo-metro-tagger

Metro Babel plugin + runtime that enables component inspection for Expo apps running inside Elmony's preview.

The web equivalent is @elmony/react-vite-component-tagger.

How it works

1. Babel plugin — runs during Metro bundling and wraps every uppercase JSX component with a thin <ElmonyTag> wrapper that carries the source file/line/column as props.

2. ElmonyTag — a React Native View with pointerEvents="box-none" that measures its screen bounds on layout and registers them in a global registry.

3. ElmonyInspector — a floating 🔍 button that toggles an inspection overlay. When active, the next tap finds the smallest registered component whose bounds contain the tap point and sends a postMessage (Expo Web / iframe) or WebSocket message (native) to Elmony.

Setup

1. Add the Babel plugin to babel.config.js

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    // Only include in development — strip from production builds
    ...(process.env.NODE_ENV !== 'production'
      ? [['@elmony/expo-metro-tagger/babel-plugin']]
      : []),
  ],
};

2. Wrap your app root with ElmonyInspector

// app/_layout.tsx  (Expo Router)  or  App.tsx
import { ElmonyInspector } from '@elmony/expo-metro-tagger';

export default function RootLayout() {
  return (
    <ElmonyInspector>
      {/* your existing providers / Stack / Tabs */}
    </ElmonyInspector>
  );
}

ElmonyInspector is a no-op in production (enabled defaults to __DEV__).

Notes

• The ElmonyTag wrapper adds a View layer around each tagged component. This should be transparent for most layouts but may affect components that rely on precise flex sizing from their parent. It only runs in development.
• Fragment, Suspense, Provider, NavigationContainer, and a few other structural-only components are never wrapped.
• The key prop is automatically lifted from the child to the wrapper so React list reconciliation continues to work.
• For Expo Web previewed in an iframe (the default Elmony preview mode), communication happens via window.parent.postMessage. For native, a WebSocket connects to the wsUrl you pass to ElmonyInspector (default: ws://localhost:5173).