Fabric is the new rendering system in React Native, designed to replace the legacy architecture and improve the performance, interoperability, and capabilities of React Native applications. Here are the key aspects of Fabric:
Overview
Fabric is a conceptual evolution of the legacy rendering system in React Native. It aims to unify more rendering logic in C++, improve interoperability with host platforms, and unlock new capabilities for React Native applications[1][4][5].
Motivations and Benefits
The primary motivations for developing Fabric include:
Improved Interoperability: Fabric enhances the interaction between React views and host views, allowing for synchronous measurement and rendering of React surfaces, which was not possible with the asynchronous layout of the legacy architecture[1][4].
Performance Enhancements: By implementing a shared C++ core, Fabric ensures consistent performance improvements across different platforms. This includes features like view flattening, which was initially a performance solution for Android but is now available on both Android and iOS[1][4].
Type Safety: Fabric uses code generation to ensure type safety across JavaScript and host platforms, reducing the risk of mismatches and build errors[1].
Concurrent Features: Fabric supports React Concurrent Features and integrates with React Suspense, allowing for more intuitive data fetching and user interaction handling[1][4].
Server-Side Rendering: The new architecture makes it easier to implement server-side rendering for React Native applications[1][4].
Architectural Changes
Fabric introduces several architectural changes:
Synchronous and Asynchronous Tasks: Unlike the legacy architecture, which handled all tasks asynchronously, Fabric divides tasks into synchronous and asynchronous categories. This ensures that critical UI operations are performed in sync with the frame rate of the mobile screen, reducing frame drops and improving user experience[5][6].
JSI (JavaScript Interface): Fabric eliminates the need for the Bridge by u...
