Sciandra reviews Paper’s main pieces: Metro, JavaScriptCore, the bridge, JSON messaging, and Yoga. Its asynchronous message queue can become a bottleneck, JavaScript and native code lack shared type awareness, and modules may load at startup even when used much later.
The New Architecture is Here…What now?
Speaker
Lorenzo Sciandra, senior software engineer at Microsoft and React Native core maintainer, explains the new React Native architecture and migration planning for the React Native Wrocław Meetup.
JSI provides a C++ interface between JavaScript and native code, enabling direct calls and lazy module loading. Fabric connects Yoga and JavaScript with multiple rendering priorities, while Codegen creates native interfaces from JavaScript, TypeScript, or Flow definitions. The bridge can remain during migration before a later bridgeless step.
Codegen has typing limits, including unsupported union and custom types in the version discussed, and TypeScript support is still in beta. Libraries may need substantial refactoring, including replacing APIs such as UIManager and findNodeHandle. Sciandra also notes that React Native Directory listed almost 1,100 libraries, with only four plus one fork reported as migrated at the time, and warns that React 18 requires compatible state management libraries.
Sciandra recommends migrating libraries first, and extracting app-specific native modules into libraries where practical. Then enable TurboModules, which can coexist with Paper libraries, and wait until key dependencies support the new architecture before enabling Fabric. He advises budgeting months for the work and using the Architecture Working Group to report issues and improve the migration path.
Takeaways
- Budget several months for a React Native new architecture migration.
- Start with libraries, then move custom native modules toward TurboModules.
- Check Codegen type support and refactor library APIs before enabling the new architecture.
- Verify state management and GraphQL dependencies support React 18 before adopting Fabric.
- Share migration problems with the Architecture Working Group to help improve tooling and guidance.
Mentioned in this talk
Search inside this talk
What was claimed 14
- role atLorenzo Sciandra is senior software engineer at
Microsoft“I'm a senior software engineer in the Office organization with Tommy.”
0:24inOur Journey of Making React Native a Preferred ChoiceYouTube Verified5 sources· Talk
- role atLorenzo Sciandra is core maintainer at React Native
“I'm a React Native core maintainer”
YouTube Unverified2 sources· Talk
- builtcross-platform C++ implementation work
“The Meta team realized these problems very early on, so they went back to the lab and tried to come up with something new.”
YouTube Verified2 sources· Talk
- featureFabric: JSI enables direct JavaScript-to-native interaction
“enable true interfacing, or awareness, between JavaScript and the native side”
YouTube Unverified1 source· Talk
- featureTurboModules: Native modules can be loaded only when needed
“we can also load a module only when we actually need it”
YouTube Unverified1 source· Talk
- featureFabric: Supports multiple rendering priorities for UI updates
“we have multiple rendering priorities”
YouTube Unverified1 source· Talk
- featurecode generation: Generates native-side interfaces from JavaScript, TypeScript, or Flow types
“takes your JavaScript, TypeScript, or Flow types and generates the equivalent native-side interfaces”
YouTube Unverified1 source· Talk
- featurecode generation: TypeScript support is still in beta
“TypeScript support is still in beta”
YouTube Unverified1 source· Talk
