The React Native Fabric renderer is the next-generation renderer for React Native. It aims to improve performance, consistency across platforms, and deeper integration with the native UI infrastructure. This document provides a detailed technical overview of the Fabric renderer, covering its core APIs, type systems (ViewConfig and AttributeConfiguration), the interface to the native Fabric UIManager, event dispatching architecture, the public instance model, and the Fabric host config implementation.
The ReactFabric object is the primary JavaScript interface to the Fabric renderer. It exposes methods to mount, update, and unmount React Native components, facilitate portals, dispatch native commands, and query native view instances.
Key API functions provided by ReactFabric include:
| Function | Purpose | Source File & Lines |
|---|---|---|
render(element, containerTag, callback, concurrentRoot, options) | Renders a React element tree into a native container specified by a containerTag. Supports both legacy and concurrent roots. | packages/react-native-renderer/src/ReactFabric.js108-174 |
stopSurface(containerTag) | Unmounts and cleans up the React tree on a given container (surface). Deprecated alias: unmountComponentAtNode. | packages/react-native-renderer/src/ReactFabric.js181-192 |
createPortal(children, containerTag, key) | Creates a React Portal allowing children to be rendered into a different native container. | packages/react-native-renderer/src/ReactFabric.js194-200 |
findHostInstance_DEPRECATED(componentOrHandle) | Returns the host native instance for a given component or handle. Deprecated. | packages/react-native-renderer/src/ReactNativePublicCompat.js32-80 |
findNodeHandle(componentOrHandle) | Returns the numeric native tag for a component or handle. | packages/react-native-renderer/src/ReactNativePublicCompat.js82-141 |
dispatchCommand(handle, command, args) | Dispatches imperative commands to native views identified by handle. | packages/react-native-renderer/src/ReactNativePublicCompat.js143-160 |
sendAccessibilityEvent(handle, eventType) | Sends an accessibility event to a native view. | packages/react-native-renderer/src/ReactNativePublicCompat.js162-175 |
getNodeFromInternalInstanceHandle(internalInstanceHandle) | Retrieves the native node (opaque) from an internal Fiber instance handle. | packages/react-native-renderer/src/ReactNativePublicCompat.js177-188 |
getPublicInstanceFromInternalInstanceHandle(internalInstanceHandle) | Retrieves the public native instance from an internal instance handle. | packages/react-native-renderer/src/ReactFiberConfigFabric.js41 |
getPublicInstanceFromRootTag(rootTag) | Retrieves the public root instance from a root tag. | packages/react-native-renderer/src/ReactFabric.js202-210 |
isChildPublicInstance(parent, child) | Returns whether one public instance is a child of another. | packages/react-native-renderer/src/ReactNativePublicCompat.js190-216 |
Diagram: ReactFabric API to Code Entity Mapping
Sources: packages/react-native-renderer/src/ReactFabric.js108-192 packages/react-native-renderer/src/ReactNativePublicCompat.js82-160 scripts/flow/react-native-host-hooks.js141-218
Fabric components are described to the renderer using ViewConfig objects, which define supported commands, events, props, and native view metadata. These configs enable the renderer to efficiently create and update native views.
A ViewConfig details the specifications and capabilities of a native component:
captured, bubbled, and optional skipBubbling flag).AttributeConfiguration describing valid props and their processing/diffing info.The AttributeConfiguration defines per-prop rules for processing and diffing:
Each prop maps to:
true for a simple direct pass-through AND shallow equality diff.diff(prevProp, nextProp): boolean - determines if value changed.process(value): T - transforms JavaScript prop value to native payload.The style prop is itself a map of subkeys to AttributeType, enabling nested style diffing.
Diagram: ViewConfig and AttributeConfiguration Structure
Sources: packages/react-native-renderer/src/ReactNativeTypes.js25-70 scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js14-124
nativeFabricUIManager InterfaceThe nativeFabricUIManager is a crucial native bridge object exposed in the JavaScript runtime. It provides imperative methods to create, clone, update, and destroy native UI nodes. This interface acts as the direct conduit between the Fabric renderer's host config and the native platform UI.
createNode(reactTag, viewName, rootTag, props, eventTarget): Creates a native view node instance.cloneNode(node): Clones an existing native view node.cloneNodeWithNewChildren(node, children?): Clones a node replacing its children.cloneNodeWithNewProps(node, newProps?): Clones a node updating its properties.cloneNodeWithNewChildrenAndProps(node, newPropsOrChildren?, newProps?): Clones updating both children and props.appendChild(node, childNode): Appends a child to a native node.createChildSet(): Creates a child set batch for optimized insertions.appendChildToSet(childSet, childNode): Adds child to a child set.completeRoot(rootTag, childSet): Completes a root update applying a batched child set.registerEventHandler(callback): Registers the top-level event handler callback for native events.measure(node, callback): Measures a native node's layout.setNativeProps(node, nativeProps): Sets native props imperatively.dispatchCommand(node, command, args): Dispatches a command to a native node.sendAccessibilityEvent(node, eventType): Sends accessibility events.setIsJSResponder(node, isJSResponder, blockNativeResponder): Manages JS responder state.applyViewTransitionName(node, name, className?): Manages view transition names.suspendOnActiveViewTransition(): Suspends rendering during active view transitions.Diagram: React Reconciler to nativeFabricUIManager Bridge
Sources: scripts/flow/react-native-host-hooks.js141-218 packages/react-native-renderer/src/ReactFiberConfigFabric.js packages/react-native-renderer/src/ReactFabric.js27-60
Fabric event handling bridges native events with React's synthetic event system. Events originate in the native nativeFabricUIManager and flow through the Fabric event emitter and plugins to result in React event callbacks.
Native Event Handler Registration:
nativeFabricUIManager.registerEventHandler(callback) registers a JavaScript callback to receive native events scripts/flow/react-native-host-hooks.js165-171
dispatchEvent Function:
The callback invokes ReactFabricEventEmitter.dispatchEvent passing the native event and target Fiber packages/react-native-renderer/src/ReactFabricEventEmitter.js90-153
Raw Event Emission:
Events are emitted via RawEventEmitter.emit for instrumentation and diagnostics.
Native Event Target Dispatch:
If native event target dispatching is enabled (enableNativeEventTargetEventDispatching), the event is dispatched directly on the native event target packages/react-native-renderer/src/ReactFabricEventEmitter.js137-140
Legacy Plugin Event System:
Otherwise, events are processed with the legacy plugin system (extractPluginEvents), which uses registered plugins (e.g., ReactNativeBridgeEventPlugin) to extract synthetic events packages/react-native-renderer/src/ReactFabricEventEmitter.js47-73
Event Accumulation and Batched Dispatch:
Synthetic events are accumulated and dispatched in batched updates for performance packages/react-native-renderer/src/ReactFabricEventEmitter.js87
Diagram: Fabric Event Dispatching Architecture
Sources: packages/react-native-renderer/src/ReactFabricEventEmitter.js10-154 packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js169-216 scripts/flow/react-native-host-hooks.js165-171
In Fabric, the public instance model represents native components and their associated instances exposed to user code. This model abstracts the internal Fiber nodes and native nodes behind a public interface.
The ReactNativePublicCompat module contains utilities to bridge between React Fiber internals and these public instances. It includes functions to:
This abstraction layer ensures a stable API for components and external tooling (e.g., accessibility, commands) without exposing internal reconciler state.
The Fabric host config is the bridge between the React reconciler and the native platform. It implements the required host config interface used by the React reconciler, handling creation, updating, mutation, and deletion of native nodes.
Node Creation / Cloning:
createInstance, cloneInstance, and related methods call nativeFabricUIManager.createNode and cloning methods to manage the native view tree packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js45-162
Property Diffing & Payloads:
Uses createAttributePayload and diffAttributePayloads functions from the React Native Private Interface to create efficient payloads for native updates, sending only changed props scripts/flow/react-native-host-hooks.js109-117
Event Handling:
Integrates with ReactFabricEventEmitter for event dispatching and mapping native events to React synthetic events.
Error Handling:
Employs ReactFiberErrorDialog to handle uncaught and caught errors gracefully via native redbox dialogs packages/react-native-renderer/src/ReactFabric.js44-103
Responder System Integration:
Coordinates with the global JS responder system using nativeFabricUIManager.setIsJSResponder for touch event management packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js10-30
View Transitions Support:
Supports applyViewTransitionName, restoreViewTransitionName, and cancelViewTransitionName for smooth animated transitions between UI states, and provides a suspension mechanism (suspendOnActiveViewTransition) to coordinate with ongoing transitions packages/react-native-renderer/src/ReactFiberConfigFabric.js63-172
Diagram: Fabric Host Config and Native UI Manager Integration
Sources: packages/react-native-renderer/src/ReactFabric.js15-103 packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js10-30 packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js45-162 scripts/flow/react-native-host-hooks.js109-218 packages/react-native-renderer/src/ReactFabricEventEmitter.js90-153 packages/react-native-renderer/src/ReactFiberConfigFabric.js1-30000
The React Native Fabric renderer is a sophisticated system integrating React's reconciliation with native view management through a well-defined host config and bridged native UI manager interface. Its design optimizes property updates, event handling, and error management, while extending support for advanced platform features like view transitions and independent event dispatching models. Understanding the key APIs, type definitions, native bridges, event propagation, and host config mechanisms is essential for working deeply with React Native Fabric or contributing to its continued development.
Refresh this wiki