Nov 01, 2021

ELI5: Metro - JavaScript Bundler for React Native

cover

By Dmitry Vinnik

Originally posted here.

This blog post explores an open source project called Metro that acts as the JavaScript bundler for React Native. We aim to keep this post brief, following the ELI5 style of explaining things in simple terms in the shortest amount of time.

If you prefer to watch an accompanying video about Metro, visit our Meta Open Source YouTube channel.

Why Metro?

Metro is a development platform for React Native. This project acts as a JavaScript bundler; it manages assets, caches builds and performs hot module reloading.



Watch the video

Metro focuses on improving the developer experience for the React Native community. As developers work on their code, nothing is more frustrating than seeing your app taking forever to reload after you make a change. That's why Metro emphasizes speed and aims for sub-second reload cycles, fast startup and quick bundling.

Because Metro has been used here at Meta ever since its launch, scalability and reliability are battle-tested on our massive codebase. Metro can efficiently work with thousands of modules in a single application.

One of the best quotes that describe a great developer experience says, "if you want people to do something, make it easy." Staying true to this statement, Metro by design supports every React Native project out of the box. In other words, you don't have to do any heavy lifting to make Metro work - it's integrated from the start!

Where is it used?

Metro was made open source in 2017 by Meta. It was initially a part of React Native itself, but it was later separated from the project, making it easier for the open source community to use, report issues and contribute to Metro.

Where can I learn more?

If you would like to learn more about Metro, visit their website. Metro has excellent documentation that includes getting startedtroubleshooting, and configuration guides for the project. If you would like to ask a question or meet the community behind the project, join #metro channel on their discord community.

About the ELI5 series

In a series of short videos (~1 min in length), one of our Developer Advocates on the Meta Open Source team explains a Meta open source project in a way that is easy to understand and use.

We will write an accompanying blog post (like the one you're reading right now) for each of these videos, which you can find on our YouTube channel.

To learn more about Meta Open Source, visit our open source site, subscribe to our YouTube channel, or follow us on Twitter and Facebook.

Interested in working with open source at Meta? Check out our open source-related job postings on our career page by taking this quick survey.