Bringing the New React Native Architecture to the OSS community

Rate this content

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.

Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.

But migrating an entire ecosystem to a New Architecture is no easy task.

To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.

In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

25 min
21 Jun, 2022

Video Summary and Transcription

Today's Talk introduces the new React Native architecture and its rollout to the open-source community. The new architecture eliminates the bridge component, improves performance, and enhances the developer experience. It includes features such as Fabric, Turbo Module, and Cogent component. The architecture also supports modern languages like TypeScript and Kotlin. Upgrading to the new architecture enables the use of React 18's concurrent features and new APIs. Proper documentation and a new architecture section on the website provide valuable resources for contributors and advanced developers.

Available in Español

1. Introduction to React Native New Architecture

Short description:

Today, we're going to talk about bringing the new React Native architecture to the open source community. My name is Nicola Corti, an Android engineer in the React Native team at Meta. I want to focus on the valuable videos about React Native new architecture on YouTube. We started talking about it in 2018 at React Conf, and the latest talk is from 2021 React Native EU by Joshua Gross.

Hi everyone, and thank you very much for joining me in this session. Today, we're going to talk about bringing the new React Native architecture to the open source community.

Mandatory slide about myself. My name is Nicola Corti and I work as an Android engineer in the React Native team at Meta. You can find me online as cortinico either on Twitter or on GitHub.

As we have so much to cover, let's jump straight into the content. So if you were to search today React Native new architecture on Google or on YouTube, you will find actually quite a lot of content. I want to focus a little bit on YouTube because there are several videos that are actually really valuable. And as you can see, from the dates, we actually started talking about React Native new architecture in 2018 at React Conf. So much time has passed. The last talk is from 2021 React Native EU from my colleague Joshua Gross. I actually want to invite you to watch the talk if you haven't yet.

2. React Native New Architecture Rollout

Short description:

Joshua discussed the timeline of the new architecture, which took three years to roll out. Initially planned for six months, the extensive use of React Native within the Facebook app posed challenges. In 2021, the new architecture was fully rolled out, and the focus shifted to empowering the open-source community. The new architecture eliminates the bridge component, improving performance and restructuring the framework's internals. Using C++, a single implementation of the renderer ensures consistency across platforms and enables the sharing of optimizations. The developer experience is enhanced with best practices and the Cogent component for type safety. The new architecture also enables new capabilities and is built upon several pillars.

Joshua in his talk was talking about the timeline of the new architecture and how long it took us to do the rollout of this technology, which essentially is a major rewrite of the React Native internals within the Facebook app. It took us essentially three years. And so I want to start from this timeline, from what Joshua said in that talk. And where do we go from there? So he mentioned that, again, we started in 2018 in Q2. And initially, this project was supposed to last roughly six months. But the reality is that React Native is used so extensively inside the Facebook app, and a lot of teams try to squeeze as many milliseconds of performance from every screen that rolling out such a big change was quite a challenge. That's why it took us so long.

And in 2021, we finished to fully roll out the new architecture, specifically the new render fabric on all the surfaces of the Facebook app. And then, well, what's next? What's next is that we looked at the open source community and we actually wanted to allow everyone out there to benefit from this new major rewrite of the internals of React Native. So what comes next is actually rolling out the new architecture outside of meta and empower everyone to use what we developed so far. And that's where we are now. So end of 2021 and beginning of 2022, we started creating content and material to empower people outside of meta to use the new architecture. So today I'm going to present a lot of material and content that we developed so far and that will help you embrace the new architecture of React Native.

But first, I want to reiterate a little bit on the why because I get asked over and over, why should I migrate to the new architecture? And if you still haven't got it, the why is all about the bridge. The new architecture is essentially a substantial rewrite on a lot of components of the internals of React Native that allows us first to get rid of the bridge. The bridge was a component that was making possible the communication between the JavaScript layer and the underlying native layers. With a new architecture, this component is essentially gone. And with that comes a lot of improvements in terms of performance and generally like is a restructure of the internals of the framework. As we wrote a lot of the internals, we actually took a stand to re-implement a lot of the rendering pipelines and internal components of React Native using a shared language.

So we decided to use C++ to, again, have a single implementation of the renderer that allows us essentially to reduce a lot of discrepancies between different platforms. Historically, there used to be different renders for Android and for iOS, so things will behave a little bit different on the two platforms. Thanks to the new architecture, we are essentially having a single implementation of our internals and we can ensure that whatever we develop is consistent within the two platforms. Similarly, we can also re-share a lot of the optimizations we develop for one single platform across all of them. This is possible thanks to having a single implementation of the of the renderer and internals. We also took a stance at the developer experience and we try to implement a lot of best practices and blend them inside the core component of the React Native new architecture. Specifically, we develop a component called the Cogent that allows us to bring type safety inside our code base. And finally, the new architecture is, as I said, about performance, but also about a lot of new capabilities that we are building on top of those new foundation. So it's sort of like we took a stance, we wrote a lot of internals thinking about what new capabilities this allows us to develop in the in the coming years. So whenever we refer to the new architecture, we refer to a lot of components that we often call pillars. So the new architecture of React Native is actually composed by several pillars.

3. React Native New Architecture Details

Short description:

We have Fabric, the new renderer. We have the Turbo Module, a new native module system. The Cogent component generates boilerplate code for Android and iOS. We handle the heavy lifting of typing from JavaScript to the underlying layer. The build tools have been adapted to platform standards, with references to CMake and files for building native code. The React Native Gradle plugin provides build logic and tools for Java and Kotlin.

We have Fabric, the new renderer. We have a new native module system, which we call the Turbo Module. We have a component which allows to generate code, which is the Cogent, and we also have the Bridgeless Mode.

So once all the pieces are together, we have the capability to essentially remove the bridge component, as I said before, this is called Bridgeless Mode. I want to zoom in a bit on the Cogent and give you a glimpse of what we envision is the developer experience on the new architecture.

So, as I mentioned before, type safety, and the whole idea behind the Cogent is, let's say the developer is writing a TypeScript file which defines the API of a native module. In this case, they will define a spec like an interface with a declaration of all the capabilities of this module. For example, this module is able to answer the ultimate question and takes in input a string and returns a number, and the user will then just register this to a module.

The Cogent works at this level. It focuses on this function and the input type and the return type. And from that it generates a lot of boilerplate code that in the past, developers will have to write manually for both Android and iOS. So let's take a look at that. On Android, we're going to generate an abstract class with constructor and a specific abstract method that adheres to the signature of the spec that we saw before. So we are going to have a function that takes an input, a string and returns a double. It's an abstract function, so it's up to you to implement it and provide the correct business logic. Similarly, on iOS, we are going to have an Objective-C protocol that takes in input on NSString and returns an NSNumber. So we do all the heavy lifting of all the typing from JavaScript layer to the underlying layer, and we generate code for you. So you just have to implement the business logic.

I also want to talk a little bit about the build tools, because as we worked on the developer experience and we introduced the CodeGen, we had to do a lot of changes on how things are built. Specifically, there's also a lot of C++ code that we need to build now, which previously we would have not need to. So there are some changes that you might see, and I want to clarify a little bit of topics.

As you probably know, the build world within Meta and outside is a bit different, because internally we use Buck to build a lot of our code, while externally we can't expect users to. We install Buck and use it for building everything. So we need to adapt to the platform standards. Specifically on Android, we have Gradle. So what we did, we did a lot of work around the C++ code. Users will find references to CMake files or files, which will allow them to build their native code. So we don't have just Java and Kotlin code anymore, but we also have some C++ code to build. For Java and Kotlin instead, we spent a lot of time building the React Native Gradle plugin. This is a set of build logic and tools that allows to build essentially React Native application.

4. Build Logic, Hermes, and Engine

Short description:

The new architecture replaces the React.Gradle file. CocoaPods is used on iOS. Hermes is the recommended JavaScript engine, and it will be the default engine for React Native. Each React Native version will come with a bundled Hermes version for improved stability.

And this is going to replace in the long run, the good old React.Gradle file that we all included. On iOS, we follow the similar approach. So we have CocoaPods, and we developed custom logic in Ruby that allows us to call the code gen and integrate within your build logic.

I also want to spend a couple of seconds talking about Hermes, our in-house JavaScript engine. So if you read the documentation for the new architecture, you will find that Hermes is currently recommended. So we highly suggest you to use it, because it's the way how we can support you better. We are moving towards having Hermes as the default engine for React Native. And starting from React Native 69, every version of React Native will come with a so-called bundled Hermes version. It means that for every version of React Native, we are creating a version of Hermes that we know is compatible with that specific version of React Native. This brings a lot of improvements in terms of stability for the engine and essentially gives you an engine that is ready for you to use bundled together with React Native.

5. Modern Languages and Timeline

Short description:

We added support for TypeScript in the new architecture, allowing you to write your spec in either flow or TypeScript. Kotlin is fully supported on Android, and efforts are being made to update the website to be bilingual. Swift support for iOS is being explored, but there are complications due to interoperability with C++. React Native versions 68, 69, and 70 introduce various improvements and support for React 18.

I also want to spend a couple of seconds on modern languages, because we get a lot of questions on this side. On the TypeScript side of things, whenever we release, when we release the first iteration of the new architecture documentation, we add a lot of comments from users that were unhappy that the initial iteration of our tooling supported only flow. We obviously want to make sure that React Native is used and supported within the broad ecosystem of web and mobile developers. So we spent time adding support for TypeScript. So I'm happy to announce that the code gen for the new architecture now fully supports also TypeScript. So you can write your spec in either flow or TypeScript and the code gen will just generate code for Android and iOS starting from those.

Going on Android, we have Kotlin. So on the Kotlin side of things, Kotlin is luckily fully supported in React Native. You can write your module and components in Kotlin. We are also doing a lot of effort in updating our website to be bilingual. So if you open this issue, React Native website 3018, you will find what's the current status of the immigration of the website in being bilingual. So you will find docs for Java and Kotlin on several pages already. And you can expect the new app template to be updated to be fully Kotlin in the future. We just haven't done it yet because we want to focus on the new architecture for now. Or you can expect this change to come in the near future.

On iOS instead, we have Swift. A lot of users asking us how they can do to write their component and modules with Swift. Well, that's a little bit more complicated. We're actually looking into it, but due to interoperability between Swift and C++, things are a bit complicated. So expect some news in the future. But sadly, I don't have anything to share at this point in time. So now I talked a lot about new architecture. I also want to clarify a little bit what's the timeline and what are the versions that we released to give you an idea of what we released so far and what's coming next. React Native 68 is the first version that fully supports the new architecture. Theoretically, the new architecture was already released some versions ago, but we haven't provided an easy way to use it. So 68 is the first version that has a one-liner that you can enable to just try the new architecture and start writing Fabric Components and Turbo modules. React Native 69 is the first version that adds supports for React 18. If you followed the development on the React side of things, React 18 is a major release of React, contains a lot of new features, and I'm going to talk about the implications within React and React Native in the next slide. As I mentioned, 69 also contains bundled Ermos alongside a lot of improvements on the new architecture side of things. Then we have 70, which is the next versions that we're going to cut.

6. React Native New Architecture Features

Short description:

The new architecture in React Native will include Android auto-linking support, CMake support, and Unified Code Gen config. These features were implemented based on user feedback. If you have any issues or suggestions, please reach out to us.

It will contain several other features that will help users on the new architecture, specifically Android auto-linking support, which was auto-linking support for new architecture was already there for iOS but was missing on Android. So we had to do some adaptation, and this will land in 70.

There will be also CMake support, end-to-end, so users can write their C++ code with CMake. There will be also support for Unified Code Gen config. We received a lot of feedback that the way how the Code Gen was configured was different between Android and iOS, so we took a stance and fixed this.

And well 71, I like to say to the infinity and beyond. React Native is developed at Meta, but is also a project where the community is placed first. So we really hear what's the feedback from our users and we try to integrate it as much as possible. Some of the features that will be going out in 70 are actually there because we received feedback from users which they really needed those features. So if you feel that there is something that is not working for you, please let us know, tell us what is not working, tell us how we can improve the new architecture experience. We are so looking forward to that.

7. Interactions with React 18 and Documentation

Short description:

React Native tightly couples its versioning with React. Upgrading to React Native 69 enables the use of React 18's concurrent features and new APIs. Users must update to the new architecture to benefit from these improvements. Proper documentation is crucial for understanding and utilizing the new architecture effectively. The official React Native docs contain instructions on enabling the new architecture for library and app authors.

As I said, I want to spend some seconds on the interactions between React Native and React 18. And here I have a table for you to explain. So if you are on React Native 67 or React Native 68, you're essentially on React 17. Even if you go in your package.json and you change your version of React, you are still consuming React 17. The reason is because the versioning of the two frameworks is tightly coupled. You can't just bump one or another, things would not work correctly. React Native is having a bundled version of React, the React render inside. So we'll discard the version that you pass in the package.json.

If you want to use React 18, you then need to upgrade to React Native 69, but here there is a catch. React 18 ships with a lot of concurrent features and new APIs such as star transition. Those APIs rely on the React Native new architecture. So if you are on 69 and you enable the new architecture, you can use those APIs and benefit from those concurrent features. If you are on 69 but you're still on the old architecture, you're still using a legacy version of React. Even if it's React 18, you will not benefit from those APIs. So I hope you understand how critical it is for users also to update to the new architecture because you will not benefit from those new improvements and API that we worked on in the last years.

Okay, so I spoke a lot about frameworks, updates, and so on. Now, I also mentioned about the new architecture documentation and material, but I haven't presented that yet. So I want to spend this last minute talking about which docs we have available for you. And I want to stress how docs are important because when I was listening to this episode of the React Native show, I remember they asked the audience, what are you still looking forward in 2022? And one of the comments was the new architecture. But a lot of other frameworks have been using some pieces of the new architecture. But what is missing is the docs. And that's actually true. The new architecture was there, and it could have been used in some form since previous versions of React Native. But without proper docs, the community will never understand how to use it properly. And it will be too hard for them to use. So let's look at what we have so far. First, we have the official docs. So inside the guides section of React Native, there is a new section called the new architecture that contains instructions on how to enable the new architecture. From the perspective of a library author and from the perspective of an app author. We are going to expand this documentation in the coming weeks and months.

8. New Section: Architecture and Documentation

Short description:

We have a new section on the website called architecture that contains deep dives and documentation about the internal soft react native. The documentation explains how things work internally and includes diagrams. It's not for beginners, but it's valuable for those who want to contribute or develop advanced components.

So please stay tuned as we have more to share. I also want to mention that we have a new section on the website called architecture. This section contains a lot of deep dives. And documentation about the internal soft react native. We have been asked for this kind of docs a lot in the past. We spent time polishing our documentation around internals and sharing diagrams and explaining how things work internally. Little disclaimer, this deep dives are not for everyone. If you're using react native for the first time, you probably don't want to know the internals of the frameworks. But if you want to contribute or if you want to develop a more advanced component, you might need those information. I hope you will find it useful.

9. New App Template and Configuration

Short description:

The new app template is the primary entry point to the new architecture. For iOS, set the NewArchEnabled environment variable to configure your project. On Android, change the NewArchEnabled property in the Gradle properties file. Check Metro to ensure you're using the new architecture with fabric and turbo modules.

So now let's talk about the new app template. The new app template is what you see whenever you do react native in it. My awesome app. And we wanted this to be the primary entry point to the new architecture. That's why we worked on this part so much. And so for iOS, we extended it at pod install time. So normally you would run pod install, but now you can run it with this environment variable, NewArchEnabled set to one, and that will configure your project to actually use the new architecture. You can just run with run iOS and you will be effectively running an Android app, an iOS app on the new architecture. For Android, similarly, we have a file called Gradle properties and a property there called NewArchEnabled, you can just change it from false to true, and that will enable the new architecture for you. Again, you can run it with run Android and you will be running an Android application on the new architecture. If you want to be 100% sure that you're on the new architecture, you can check on Metro that you're running an app with fabric true and initial props concurrent root set to true. That means that you are using fabric, turbo modules, the new architecture and react team with concurring capabilities and everything you need.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.