Sunrising New Architecture in the New Expensify App

At Software Mansion, we’ve been working hard to enable the new React Native architecture in the New Expensify App. These efforts included migrating dozens of community libraries and many upstream changes to the React Native core. In this article, we want to give you an overview of the entire process and the benefits gained from enabling it.

What was the point of this endeavor?

The new architecture in React Native is a redesign of the framework’s internals. It enables many long-requested features like synchronous layout and effects, concurrent renderer, and fast interfacing between JavaScript and the native code. You can read more about it in this article.

Changes necessary to make these features work should not be breaking existing applications, which is still not the case. Despite that, the new architecture can no longer be treated as the bleeding edge of React Native evolution. It’s been in use for many years now at Meta, but, indeed, there’s still some way to go regarding the open-source ecosystem.

The New Architecture suffers from the chicken and egg problem, where people are hesitant to adopt it because too few applications have migrated to it. Since there are few applications, the community library support is sometimes missing.

That brings us to the mission of Expensify, which is to lean into and support open-source projects heavily. Since the broader adoption of the new architecture is a matter of time, it made sense to invest heavily in it from the very beginning, keeping up the pace with the rapid development of the framework. During the process, we have migrated dozens of third-party libraries providing plenty of resources about the new architecture for the community.

A long journey through the dependencies

When we first enabled the new architecture flag back in late 2022, there were a lot of red boxes saying that particular view does not support the new renderer yet, and the performance wasn’t great either. The process from there was relatively straightforward but definitely not easy. We needed to make sure all the native dependencies of the App were compatible with the new architecture before we made any changes to the App itself. This task consumed most of our time and dragged on until the end because new features were consistently introduced. In the meantime, we also kept upgrading React Native, and the performance issues all but disappeared by the time 0.73 rolled out.

After eliminating all of the unwelcome red boxes, we started resolving the emerging issues. Those ranged from layout being calculated incorrectly, to focus being dropped in random places with some disappearing modals in between. It took a lot of time, many upstream PRs to the core of React Native, and many QA sessions, but we were finally at the point where the new architecture was ready to be shipped.

Reaping the benefits

The main merit was unblocking the new concurrent features provided by React 18, and we are currently investigating where in the App they are applicable the most. Given that with React Native 0.75, the new architecture will be the default, it puts Expensify fairly ahead of the curve when it comes to utilizing the new and upcoming features.

During this adventure, the entire React Native Open Source team at Software Mansion gained plenty of experience with the inner workings of the framework, especially the new architecture. This knowledge is already proving essential when working with our current projects.

We also do not want to paint an overly positive picture of the state of the new architecture. It is a very exciting and welcome change but some gaps in the open source ecosystem still exist and can make adopting it challenging. In a perfect world, a simple change to the compilation flag would suffice to make the switch but we’re not there yet. Nonetheless, based on the huge progress made over the past year and a half, we can confidently say that it’s going in the right direction.

Huge thanks to Expensify and Meta

We‘d like to thank Expensify for their continued support of the React Native community and open-source initiatives. Also, huge kudos to the Meta team for their time spent reviewing the upstream PRs. The road up to this point was long and bumpy and we are grateful for traveling it together.