Metro: The JavaScript Bundler for React Native
Metro bundles your React Native app's JavaScript, finding all modules, transpiling them for the device, and merging them into one file. It's what powers npx react-native start.
Why it exists
A React Native app consists of hundreds or thousands of separate JavaScript files (modules). A mobile device can't efficiently load all these files individually over the network or from disk. Metro exists to solve this by combining all necessary code into a single, optimized file—a bundle—that the JavaScript engine can execute efficiently.
The mental model
Think of Metro as a specialized compiler for your app's JavaScript. It's not just pasting files together. It takes your many source files as input, builds a complete map of your app's dependencies, transforms code along the way, and produces a single, executable file as output, much like a C++ compiler produces a binary from source code.
How it works
Metro operates in three main stages. First is Resolution, where it starts at your app's entry point (like index.js) and builds a graph of every module your app imports. Second is Transformation, where each file in the graph is passed through a "transformer" (like Babel) to convert modern JavaScript, JSX, and TypeScript into plain JavaScript that the target engine understands. These two stages happen in parallel. Finally, Serialization combines all the transformed modules into a single JavaScript file, ready to be sent to the device.
When to use it
Metro is the default, out-of-the-box bundler for React Native projects. You use it implicitly every time you run npx react-native start to launch the development server or when you package your app for a production release to an app store. Its tight integration and optimizations, like Fast Refresh, make it the standard choice.
When not to use it
For most React Native projects, replacing Metro is an unnecessary complexity. However, teams with complex web-and-native monorepos might opt for a different bundler like Webpack to unify their entire build process under one tool. Even then, it's more common to customize one of Metro's swappable modules (resolver, transformer, serializer) than to replace it entirely.
One canonical example
When you run npx react-native start, the Metro server starts up. When your native app launches in development, it requests the bundle from this server. On the fly, Metro performs its three stages—Resolution, Transformation, and Serialization—to deliver an up-to-date JavaScript bundle directly to your running application, enabling instant feedback as you code.
Interview question
Which statement accurately describes Metro's primary role in a React Native project?
- a.It handles the compilation of platform-specific native code for iOS and Android.
- b.It manages the installation and versioning of third-party JavaScript libraries.
- c.It compiles multiple JavaScript source files into a single, optimized bundle for execution.Correct
- d.It provides the core framework for building user interfaces with React components.
Why? this is the answer
Metro's core function is to act as a "specialized compiler" that takes numerous JavaScript files, resolves dependencies, transforms code, and combines them into a single, optimized bundle for efficient loading on devices. Option B describes a package manager, C describes native build tools, and D describes the React Native framework itself.
Just read this? Test yourself on what you have been reading.
Read the original → metrobundler.dev
- #react native
- #javascript
- #bundler
- #tooling
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles