What is Fabric, and how does it differ from the old rendering system in React Native?

Short answer

Fabric is the new C++-based renderer. It integrates directly with the React 18 Concurrency tree and provides synchronous UI element rendering and immediate integration with Yoga.

Explanation

In the old renderer, layout calculations on the Shadow Thread sent dimensions to the Native UI through the Bridge, causing flicker and rendering delays. In Fabric, the Shadow Tree and layout code have been unified in C++, allowing the UI element tree to be created synchronously with full support for Concurrent React and features such as Suspense and Transitions.

Code example

// MyViewNativeComponent.ts — a Fabric component spec; Codegen produces the native view classes
import type { ViewProps } from "react-native";
import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";

interface NativeProps extends ViewProps {
  color?: string;
}
export default codegenNativeComponent<NativeProps>("MyView");

// With Fabric, layout can be measured synchronously during the commit phase:
function Card() {
  const ref = useRef<View>(null);
  const [height, setHeight] = useState(0);
  useLayoutEffect(() => {
    ref.current?.measure((_x, _y, _w, h) => setHeight(h));
  }, []);
  return <View ref={ref} />;
}

Common mistakes

• Believing that enabling Fabric requires rewriting all JSX screens; the changes are in the libraries and Native Modules layer.

Follow-up questions

• What are the main threads in a React Native app, and how is work distributed among them?
• How is the Yoga Layout library connected to the React Native rendering system?

Sources

• React Native docs — Fabric