Fabric
- React Native course
- Expert
- Lesson 3/47
- 5 min
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.
Practice Define the Fabric native component
Define a MyView native component with codegenNativeComponent. Use NativeProps as the generic parameter.
Starter code
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {
title?: string;
}
// Define the component here
export default MyView;Sample solution
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {
title?: string;
}
const MyView = codegenNativeComponent<NativeProps>('MyView');
export default MyView;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the Fabric pieces
| Term | Meaning |
|---|---|
Fabric |
New render layer |
ShadowNode |
Component shadow |
UI manager |
Old render system |
Concurrent |
Synchronous render |
2 Which React feature does Fabric support?
- Concurrent rendering
- Server components
- CSS modules
- Web workers Correct answer
Explanation: Fabric is compatible with concurrent rendering.
3 Write the ShadowNode type
import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {}
export default codegenNativeComponent<____>('MyView');import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
interface NativeProps {}
export default codegenNativeComponent<NativeProps>('MyView');Explanation: NativeProps is the generic parameter for native props.