Add getClientRects to fabric fragment instance (#34545)
Stacked on #34544 We only have getBoundingClientRect available from RN currently. This should work as a substitute for this case because the equivalent of multi-rect elements in RN is a nested Text component. We only include the rects of top-level host components here so we can assume that calling getBoundingClientRect on each child is the same result. Tested in react-native with Fantom.
Jack Pope committed
Oct 3, 2025 at 09:54 UTC
74dee8ef641c7a0a67db192f83c11ac0d9f279ff
1 file changed
+22
packages/react-native-renderer/src/ReactFiberConfigFabric.js
+22
@@ -648,6 +648,7 @@ export type FragmentInstanceType = {
648
getRootNode(getRootNodeOptions?: {
649
composed: boolean,
650
}): Node | FragmentInstanceType,
651
+ getClientRects: () => Array<DOMRect>,
652
};
653
654
function FragmentInstance(this: FragmentInstanceType, fragmentFiber: Fiber) {
@@ -772,6 +773,27 @@ FragmentInstance.prototype.getRootNode = function (
773
return rootNode;
774
};
775
776
+// $FlowFixMe[prop-missing]
777
+FragmentInstance.prototype.getClientRects = function (
778
+ this: FragmentInstanceType,
779
+): Array<DOMRect> {
780
+ const rects: Array<DOMRect> = [];
781
+ traverseFragmentInstance(this._fragmentFiber, collectClientRects, rects);
782
+ return rects;
783
+};
784
+function collectClientRects(child: Fiber, rects: Array<DOMRect>): boolean {
785
+ const instance = getPublicInstanceFromHostFiber(child);
786
+
787
+ // getBoundingClientRect is available on Fabric instances while getClientRects is not.
788
+ // This should work as a substitute in this case because the only equivalent of a multi-rect
789
+ // element in RN would be a nested Text component.
790
+ // Since we only use top-level nodes here, we can assume that getBoundingClientRect is sufficient.
791
+ // $FlowFixMe[method-unbinding]
792
+ // $FlowFixMe[incompatible-use] Fabric PublicInstance is opaque
793
+ rects.push(instance.getBoundingClientRect());
794
+ return false;
795
+}
796
+
797
export function createFragmentInstance(
798
fragmentFiber: Fiber,
799
): FragmentInstanceType {