React and React Native power Meta's Connect 2024 launches
Meta's Connect 2024 event showcased a range of new products and experiences built with React and React Native, from mixed reality (MR) versions of flagship social apps to desktop tools for 3D development. With over five thousand Meta engineers building with React monthly, these technologies continue to serve as the foundation for shipping high-quality products across web, mobile, desktop, and new platforms like the Meta Quest headset.
Rebuilding Instagram and Facebook for Meta Quest
Mark Zuckerberg announced at Connect that Instagram and Facebook have been rebuilt from scratch for mixed reality on Meta Quest. The goal was to deliver flagship social experiences that feel native to the headset, taking advantage of its input methods, gestures, and expansive visual interface.
The teams evaluated three approaches: reusing existing Android apps, writing new native Android apps, or building fresh with React Native. They chose React Native for its ability to support rapid iteration, robust animations, and strong performance, alongside the fact that it powers most of the 2D Meta Quest system apps.
For the new Instagram app, React Native enabled the team to introduce visually rich interactions without performance hiccups. This includes seamless transitions from video feeds to a full-screen view with comments, side-by-side navigation by controller joystick or hand pinching, and a smooth hover animation that follows controller movements over interactive elements.
Facebook for Meta Quest leveraged mature code from the Facebook.com desktop experience. Using Meta's open source projects StyleX and React Strict DOM, the team shared complex features like Newsfeed and commenting, freeing them to concentrate on Quest-specific interactions rather than reimplementing business logic.
Meta Horizon mobile app reimagined
The Meta Horizon mobile app also received a major update, with a new design and expanded features. Users can now customize their avatar and express their mood directly from their phone via a dedicated tab, and can visit Horizon Worlds and complete quests to unlock exclusive avatar styles, items, and emotes.
Performance was a key focus, with the team aiming to match the benchmark set by Facebook Marketplace. Notably, the Meta Horizon app initializes React Native during the app's cold start, unlike the Facebook app which does so only when the first React Native surface is visited. The team's profiling work with Android Systrace, React DevTools, and the new React Native DevTools identified that initiating network queries earlier—specifically when a navigation button is tapped via Relay—yielded the most significant improvement, resulting in launch performance on par with Meta's other mobile apps.
Meta Horizon Store expands with 2D apps
The Meta Horizon Store is now open to all developers for publishing apps, including 2D applications. This required major changes to the store's navigation to handle more categories, better ranking, and a new "Early Access" section. The store, which handles app discovery and acquisition for Meta Quest and discovery of Horizon Worlds, is maintained by a central team across four platforms: Android, iOS, Horizon OS, and Web. Leveraging React and React Native, even with separate implementations today, allows the team to roll out features and experiments faster with fewer resources.
The Horizon Store team has also begun adopting Meta's internal router, originally built for Facebook.com, to unify navigation across platforms. On the web, the store was converted from pure CSS to StyleX, which in combination with React Strict DOM enabled reusing the Spotlight section across web and mixed reality. This shift facilitated faster support for internationalized text and light/dark mode banners, while also accelerating future merchandising enhancements.
Meta Spatial Editor: 3D design with native desktop apps
Meta announced the Meta Spatial SDK and Meta Spatial Editor to let mobile developers build immersive experiences for Horizon OS with familiar Android tools and Meta's specific capabilities like physics and MR. The Spatial Editor is a desktop app that imports, organizes, and transforms assets into visual compositions, exporting them in the glTF standard for use in the Spatial SDK.
The editor itself was built with React Native for Desktop, delivering native Windows and macOS applications. The decision to use React Native over web-based solutions was driven by the necessity for native integrations. The main 3D scene is powered by a custom rendering engine with a custom React Native Native Component, and the surrounding React panels communicate with the renderer via C++, keeping the UI responsive at 60fps.
The Spatial Editor team included many C++ engineers previously working with Qt, who were initially skeptical of JavaScript but came to appreciate React Native's developer experience. Features like Fast Refresh, where code changes appear on file-save, were especially appealing, as this remains uncommon for native engineers and significantly accelerated their development pace.
How Meta builds React
Meta's React team points to these Connect 2024 announcements as evidence of the technology's power, expressivity, and flexibility. The products demonstrate React's ability to power delightful interactions, complex integrations, and responsive interfaces that render natively on their respective platforms.
Over the past decade, the React team has collaborated with internal product teams and the open source community to adapt React for every platform where Meta ships UI: web, mobile, desktop, and MR. In each case, optimizing for a new platform's idioms and expectations has benefited other platforms as well, an approach outlined in the Many Platform Vision.
The work to support mixed reality has focused on improving startup times, application responsiveness, and efficiency to reduce battery drain. These efforts have also benefited apps on other platforms, such as Facebook.com and Facebook Marketplace. Meta shares these improvements with the open source community once they are deemed stable, including previously released technologies like React Compiler, React 19, React Native's New Architecture, StyleX, React Strict DOM, and performance improvements to Hermes. Further innovations are under development and will be shared with the community in the future.
