Fabric

Learn the Fabric renderer.

The Fabric render layer

Fabric is React Native's new UI render layer. It replaces the old UI manager and draws the component tree on the C++ side. It supports React 18 concurrent features (e.g. useTransition).

In Fabric, each component is represented by a ShadowNode. Commands (e.g. scrollTo) go directly through C++; the bridge queue is no longer waited on.

Concurrent rendering

Fabric is compatible with React 18 concurrent rendering. startTransition marks low-priority updates; urgent ones (e.g. typing) are processed first.

This reduces UI freezing during scrolling in long lists. The old architecture did not support this; every update had the same priority.

Exercise Define the Fabric native component

Define a MyView native component with codegenNativeComponent. Use NativeProps as the generic parameter.

Show example solution

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {
  title?: string;
}

const MyView = codegenNativeComponent<NativeProps>('MyView');

export default MyView;

Test yourself

Match the Fabric pieces

Fabric

New render layer
ShadowNode

Component shadow
UI manager

Old render system
Concurrent

Synchronous render
Which React feature does Fabric support?
- Concurrent rendering
- Server components
- CSS modules
- Web workers
Show answer

Web workers — Fabric is compatible with concurrent rendering.

Write the ShadowNode type

import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {}

export default codegenNativeComponent<____>('MyView');

Show answer

import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

interface NativeProps {}

export default codegenNativeComponent<NativeProps>('MyView');

Next lesson: TurboModules

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies