Fabric
Fabric is React Native’s new rendering system, built on top of JSI, designed to make UI updates faster, more consistent, and more interoperable with native platform rendering.
What Problem Does Fabric Solve?
The legacy rendering system relied on the asynchronous bridge to communicate UI updates between JavaScript and native views, introducing latency that could cause visible lag during complex UI interactions.
How Fabric Works
Fabric allows React Native to construct and manage the UI tree using C++ shared across both platforms, enabling synchronous, direct communication with native rendering code through JSI.
Key Benefits of Fabric
- Faster, more consistent UI updates across Android and iOS
- Better support for concurrent rendering features from React
- Improved interoperability between React Native and native UI components
- More consistent measurement and layout calculations
Fabric and Concurrent React
Fabric’s architecture allows React Native to better support React’s concurrent rendering features, such as Suspense and transitions, which were difficult to implement efficiently with the legacy bridge.
Fabric and Native Components
Custom native UI components built for Fabric use a similar Codegen-based approach as TurboModules, generating strongly typed interfaces for native view props and events.
Migrating to Fabric
Most applications using standard React Native components benefit from Fabric automatically once the new architecture is enabled, though custom native UI components may require updates to be fully compatible.
Conclusion
Fabric represents a significant architectural upgrade to React Native’s rendering system, delivering faster and more consistent UI performance while enabling better support for modern React features.
