explaingit

facebook/metro

★ 5,593JavaScriptAudience · developerComplexity · 3/5LicenseSetup · easy

TLDR

Metro is the JavaScript bundler built for React Native, it combines all your app's JS files into a single package your phone can run, with sub-second reload times.

Mindmap

mindmap
  root((metro))
    What it does
      Bundles JS files
      Fast reloads
      Scales to thousands of files
    Tech Stack
      JavaScript
      Node.js
      React Native
    Use Cases
      Mobile app builds
      Custom file transforms
      Caching tuning
    Audience
      React Native devs
      Mobile engineers
    License
      MIT permissive
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build and bundle a React Native mobile app so it can run on iOS or Android devices.

USE CASE 2

Configure custom file-type handling or caching behavior for large React Native codebases.

USE CASE 3

Speed up development reloads by tuning Metro's bundling settings for your team's project.

Tech stack

JavaScriptNode.jsReact Native

Getting it running

Difficulty · easy Time to first run · 5min

Ships bundled with React Native, no separate install needed for standard use.

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

Metro is the JavaScript bundler that powers React Native apps. A bundler takes all the separate JavaScript files in a project and combines them into a single package that a phone or device can actually run. Metro is the tool that handles this step whenever you build or reload a React Native application. It was originally built inside the React Native codebase at Meta (formerly Facebook) and later moved to its own repository so that the team could respond to issues and contributions more easily. If you have ever used React Native to build a mobile app, Metro was almost certainly running in the background without you realizing it. The project focuses on three qualities. It aims to be fast, targeting reload times under one second so developers do not spend time waiting after saving a file. It is designed to scale, meaning it can handle apps with thousands of individual JavaScript files without slowing down. It is also built to work with React Native projects out of the box, so there is no extra setup required for standard use cases. Metro ships as part of React Native, so most people do not install it separately. Advanced users who want to configure it, such as changing how certain file types are handled or adjusting caching behavior, can find the full documentation on the Metro website. The source code and documentation files both live in this repository. The project is released under the MIT license.

Copy-paste prompts

Prompt 1
I'm using React Native with Metro bundler. How do I add a custom resolver so that .svg files are handled as React components?
Prompt 2
My Metro bundler is slow on a large React Native project with 2000+ JS files. What caching and parallelism settings should I tune in metro.config.js?
Prompt 3
Show me a metro.config.js that transforms TypeScript files and aliases @components to the src/components directory.
Prompt 4
How do I enable Hot Module Replacement in Metro for a React Native app so file saves reload instantly on the simulator?
Open on GitHub → Explain another repo

← facebook on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.