February 3, 2026

The Facebook Ecosystem: React, React Native, Metro, and Yarn

Whenever attempting to construct a new automation framework from scratch, it can be difficult figuring out which automated testing toolsets should be used. This is why, before I do anything, I research the new tools and technologies used to create the app I will be testing, hoping to see if there are any industry standards already out there. I’ve paired Angular with Protractor, Ruby with Watir and Capybara. What should I pair with a React Native mobile app? Appium, like I did with the Stop & Shop mobile apps? Or is there something else?
Before building an automated testing framework, I had to do some research on the toolsets in the Facebook ecosystem that SELF’s mobile app used: React, React Native, Metro, and Yarn.

GitHub:


React.dev


According to RisingStack’s The History of React.js on a Timeline (May 2024), the developers at Facebook back in 2011 started to face serious issues with code maintenance. Pete Hunt, who later became an engineering manager at Instagram and a prominent member of Facebook's React core team, explained the problem in an ACM Queue interview: "Of all the web apps at Facebook, one of the most complex is what we use to create ads and manage ad accounts. One of the biggest problems is keeping the UI in sync with both the business logic and the state of the application."

Interested in the history of React? Check out How A Small Team of Developers Created React at Facebook | React.js: The Documentary and the Live Q & A after the documentary was released on YouTube.



The team had implemented a system called Bolt, but Hunt noted it "was pretty hard to manage since you could never be sure when your properties were going to be updated—meaning that if you changed a value, you couldn't be sure whether it was going to cause a single update, cascading updates, or no updates at all." This unpredictability in how changes propagated through the application made the codebase increasingly difficult to manage.

Jordan Walke, a software engineer on the Facebook Ads team, created React in 2011 to help. According to Wikipedia, "React was created by Jordan Walke, a software engineer at Meta, who initially developed a prototype called 'F-Bolt' before later renaming it to 'FaxJS'."

Walke created a more efficient way to build user interfaces by only re-rendering the parts of the page that had actually changed, rather than re-rendering the entire page.

When Instagram was acquired by Facebook in April of 2012, according to The History of React,js on a Timeline, Since Instagram wanted to adopt Facebook’s new technology, Facebook chose to decouple React from Facebook and make it open-source.

React was then introduced by Tom Occhino and Jordan Walke at the JavaScript Conference 2013 [ Watch on YouTube ] according to Tom Occhino’s React.js Conf 2015 Keynote - Introducing React Native first impressions were pretty skeptical. “What they told us was that we'd taken a 'huge step backwards' in terms of the maintainability of our code, simply because we were embedding our markup, our HTML, inside our JavaScript”.

React had introduced JSX, a syntax extension that allowed developers to write HTML-like code within JavaScript. This was controversial at the time because it appeared to violate the principle of separation of concerns that web developers had been taught to follow.

After Pete Hunt addressed the concerns in his talk to JS Conference EU in 2013, Rethinking Best Practices ( Watch on YouTube, Slides on SlideShare) React became more widely adopted.

React Native


Mark Zuckerberg's comment from 2012? At TechCrunch Disrupt in September 2012, he stated: "When I'm introspective about the last few years I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native… because it just wasn't there. And it's not that HTML5 is bad. I'm actually, on long-term, really excited about it."

Using HTML5 for Facebook's mobile version resulted in an unstable application that retrieved data slowly. Inside Facebook, Jordan Walke developed software that generated UI elements for iOS from a background JavaScript thread, which became the foundation for React Native.

On January 28-29, at React.js Conf 2015, Facebook released the first version of React Native during a technical talk. According to the keynote transcript, Tom Occhino asked: "What if we take the exact same React's JavaScript we've been running on Web and we can use it to power truly native applications?"

On day two of the conference, Christopher Chedeau took the stage to demonstrate React Native with an iOS movie app, showing that it was all written in JavaScript with no Objective-C code.

On March 25, Facebook announced that React Native for iOS is open and available on GitHub.

Tom Occhino explained the philosophy in his official blog post: "What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web. With a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications."

He continued: "It's worth noting that we're not chasing 'write once, run anywhere.' Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach 'learn once, write anywhere.'"

Meta announced in October 2025 that it would donate React, React Native, and JSX to a new React Foundation, part of the Linux Foundation.

According to the official announcement, the React team stated: "React has outgrown the confines of any one company. To better serve the React community, we are announcing our plans to move React and React Native from Meta to a new React Foundation. As a part of this change, we will also be implementing a new independent technical governance structure."

Andrew "Boz" Bosworth, CTO of Meta, stated: "We open sourced React 12 years ago and since then the community has made it an essential part of how our industry ships better products. Today React is used by over 20 million developers to build across mobile, desktop, TVs, gaming consoles and VR headsets."

Jim Zemlin, executive director of the Linux Foundation, said: "The move to a neutral home is the natural next step in the evolution of this important open source technology to ensure React and React Native remain open, innovative and community led."

Metro


Metro was originally known as the React Native Packager (or JS App server) when React Native launched in 2015, but was spun out into its own code repository a few years later, so companies such as AirBnb Engineering could contribute.

“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”. - Metro - JavaScript Bundler for React Native


Watch Dmitry Vinnik in Facebook’s video, Explain Metro Like I am Five.

Yarn


According to Wikipedia, “Yarn is one of the main JavaScript package managers, initially started in 2016 by Sebastian McKenzie of Meta (formerly Facebook) for the Node.js JavaScript runtime environment. An alternative to the npm package manager, Yarn was created as a collaboration of Facebook (now Meta), Exponent (now Expo.dev), Google, and Tilde (the company behind Ember.js) to solve consistency, security, and performance problems with large codebases”.


Why the switch from NPM? In “Yarn: A new package manager for JavaScript” (10/11/2016) written when Yarn was first released, “We've used the npm client successfully at Facebook for years, but as the size of our codebase and the number of engineers grew, we ran into problems with consistency, security, and performance. After trying to solve for each issue as it came up, we set out to build a new solution to help us manage our dependencies more reliably. The product of that work is called Yarn — a fast, reliable, and secure alternative npm client. [...] We're pleased to announce the open source release of Yarn, a collaboration with Exponent, Google, and Tilde. With Yarn, engineers still have access to the npm registry, but can install packages more quickly and manage dependencies consistently across machines or in secure offline environments. Yarn enables engineers to move faster and with confidence when using shared code so they can focus on what matters — building new products and features”.

In the next blog post, we will cover how Wix open-sourced its in-house automated testing platform for its React Native application to give us Detox.

Detox Demo:


Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)