Introducing Fabric to React Native Screens
Article Summary
Jakub Tkacz from Software Mansion just shipped the first native component library compatible with React Native's new Fabric architecture. This is the migration blueprint the entire RN ecosystem has been waiting for.
React Native 0.68 made Fabric adoption as simple as flipping a flag, but most libraries weren't ready. Software Mansion tackled react-native-screens first (installed 70% as often as react-native itself), creating a dual-architecture implementation that works seamlessly with both old and new RN versions.
Key Takeaways
- Single library version supports both Fabric and legacy architecture automatically
- Flow specs generate type-safe native code, ensuring JS/native consistency
- Android shares codebase across architectures; iOS required separate implementations
- Migration is gradual: base features shipped first, full compatibility rolling out
- Shopify partnership funding broader ecosystem Fabric adoption efforts
Software Mansion proved libraries can support both RN architectures simultaneously, removing a major blocker for Fabric adoption across the ecosystem.
About This Article
React Native 0.68 introduced Fabric, which required native libraries to use JSI (a C++ API) instead of the bridge. Libraries like react-native-screens faced a challenge: they needed to work with both the old and new architectures at the same time.
Jakub Tkacz's team used Flow specifications as a single source of truth for component specs. They generated type-safe native implementations for both architectures, reused Android code where possible, and wrote separate iOS implementations when needed.
react-native-screens v3.12 became the first native component library to support Fabric. This let 70% of React Native projects (measured by NPM install frequency) adopt the new architecture without waiting for the entire ecosystem to migrate.