The state of React Native

Vacca says React Native is used in both new and existing apps. Examples include Ads Manager, Analytics, the Oculus companion app, Instagram screens, and Facebook features such as Crisis Response, blood donations, and privacy settings. Marketplace, a Facebook app tab with more than 800 million users and over 100 screens, is one of the framework’s most complex deployments.

The team is working to make React Native screens load faster, with a focus on time to interact. Loading involves starting the JavaScript VM, loading the bundle, initializing managers and native modules, and fetching data. Vacca says the team will share performance improvements and better documentation so open source users can enable existing optimizations.

The current design uses a JavaScript thread, a shadow thread for the native view tree and layout, and the main thread to draw the UI. Communication between threads is asynchronous, which helps keep the UI thread from blocking but can make synchronous updates and layout difficult. When a native screen embeds React Native content sized to that content, delayed layout can cause a visible shift.

The proposed architecture aims to allow synchronous rendering and layout when needed, including layout computation on the UI thread. The team is making the shadow tree immutable by creating a new tree version for updates, and rebuilding parts of the UI layer in C++. A new bridge is intended to support synchronous and asynchronous calls at different priorities, while a compatibility layer limits breaking changes for existing apps.

Vacca says the architecture should improve gestures, text input, touch interactions, scrolling, and integration with native platforms. The first milestone tested it on smaller Facebook app screens for iOS and Android without major performance or memory issues. The team was extending the refactor across the framework and integrating the C++ work into Android; new features would follow a full production rollout.