Metro

Also called Metro bundler

Part of
React Native Glossary
Also known as
Metro bundler
Related
JavaScript BundleFast RefreshJavaScript RuntimeDevelopment Build
Mentioned in
Dev MenuDevelopment BuildFast RefreshJavaScript BundleJavaScript RuntimePlatform-Specific Code
Updated

What is Metro in React Native?

Metro is React Native’s JavaScript bundler. It resolves imports, transforms code, serves the bundle to the app in development and powers Fast Refresh.

8081count 0
The module being worked onTransformed module, in the bundleSource file on diskMetro starts at index.js and follows every import, so only files the graph reaches end up in the bundle; platform extensions are resolved per build, and an iOS bundle never contains Button.android.tsx. Each file goes through Babel once and the result is cached on disk, keyed by its contents and the platform, which is why a reload is fast and why --clear makes the next one slow. In development the bundle is served on port 8081 over a socket that stays open: saving a file transforms just that file and sends just that module, and Fast Refresh swaps it in while the component keeps its state.

Metro is the bundler React Native uses, filling the role Webpack or Vite plays on the web. It takes your entry file, follows every import, transforms the code, and produces a single JavaScript bundle the app can execute.

It runs in two modes:

  • In development it is a server, usually on port 8081. The app fetches the bundle from it on launch and keeps a connection open for Fast Refresh.
  • At build time it emits the static bundle that gets embedded in the .ipa or .aab you ship.

Metro is mobile-specific in ways that surprise web developers: it resolves platform extensions such as Button.ios.tsx automatically (see platform-specific code), and it handles asset registration for images.

Most React Native error messages a newcomer sees during setup come from Metro — "Unable to resolve module", or a stale cache that npx expo start --clear fixes. See the Metro docs.