feat: custom shadow nodes (#2568)

# Summary

Implement custom shadow nodes for nearly all `Svg` components. While
it's a foundation for numerous upcoming changes, it currently addresses
and resolves #2544.

## Test Plan

There shouldn't be any noticeable changes, and everything should
function as before, except that `onLayout` will now be triggered only
once and with the correct dimensions.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅      |
| Android |    ✅      |

---------

Co-authored-by: Jakub Piasecki <jakubpiasecki67@gmail.com>

android/src/main/jni/rnsvg.h

@@ -3,6 +3,7 @@
 #include <ReactCommon/JavaTurboModule.h>
 #include <ReactCommon/TurboModule.h>
 #include <jsi/jsi.h>
+#include <react/renderer/components/rnsvg/RNSVGComponentDescriptors.h>
 #include <react/renderer/components/rnsvg/RNSVGImageComponentDescriptor.h>
 
 namespace facebook {

apple/Elements/RNSVGClipPath.mm

@@ -11,8 +11,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGDefs.mm

@@ -10,8 +10,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGForeignObject.mm

@@ -13,8 +13,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGGroup.mm

@@ -13,8 +13,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGLinearGradient.mm

@@ -12,8 +12,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGMarker.mm

@@ -14,8 +14,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGMask.mm

@@ -13,8 +13,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGPath.mm

@@ -11,8 +11,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGPattern.mm

@@ -13,8 +13,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGRadialGradient.mm

@@ -10,8 +10,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGSymbol.mm

@@ -11,8 +11,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Elements/RNSVGUse.mm

@@ -12,8 +12,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Filters/RNSVGFeBlend.mm

@@ -3,8 +3,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGConvert.h"
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED

apple/Filters/RNSVGFeColorMatrix.mm

@@ -3,8 +3,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGConvert.h"
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED

apple/Filters/RNSVGFeComposite.mm

@@ -5,8 +5,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGConvert.h"
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED

apple/Filters/RNSVGFeFlood.mm

@@ -3,8 +3,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGConvert.h"
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED

apple/Filters/RNSVGFeGaussianBlur.mm

@@ -4,8 +4,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGConvert.h"
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED

apple/Filters/RNSVGFeMerge.mm

@@ -3,8 +3,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Filters/RNSVGFeOffset.mm

@@ -6,8 +6,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Filters/RNSVGFilter.mm

@@ -5,10 +5,10 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
 #import "RNSVGConvert.h"
 #import "RNSVGFabricConversions.h"
+#import "rnsvg/RNSVGComponentDescriptors.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
 #if TARGET_OS_OSX // [macOS

apple/Filters/RNSVGFilterPrimitive.mm

@@ -5,8 +5,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Shapes/RNSVGCircle.mm

@@ -12,8 +12,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Shapes/RNSVGEllipse.mm

@@ -12,8 +12,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Shapes/RNSVGLine.mm

@@ -12,8 +12,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Shapes/RNSVGRect.mm

@@ -12,8 +12,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Text/RNSVGTSpan.mm

@@ -20,8 +20,8 @@ static CGFloat RNSVGTSpan_radToDeg = 180 / (CGFloat)M_PI;
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Text/RNSVGText.mm

@@ -16,8 +16,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

apple/Text/RNSVGTextPath.mm

@@ -11,8 +11,8 @@
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTConversions.h>
 #import <React/RCTFabricComponentsPlugins.h>
-#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
 #import <react/renderer/components/view/conversions.h>
+#import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
 #endif // RCT_NEW_ARCH_ENABLED
 

common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptors.h

@@ -0,0 +1,64 @@
+#pragma once
+
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSVGShadowNodes.h"
+
+namespace facebook::react {
+
+using RNSVGCircleComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGCircleShadowNode>;
+using RNSVGClipPathComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGClipPathShadowNode>;
+using RNSVGDefsComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGDefsShadowNode>;
+using RNSVGEllipseComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGEllipseShadowNode>;
+using RNSVGFeBlendComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeBlendShadowNode>;
+using RNSVGFeColorMatrixComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeColorMatrixShadowNode>;
+using RNSVGFeCompositeComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeCompositeShadowNode>;
+using RNSVGFeFloodComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeFloodShadowNode>;
+using RNSVGFeGaussianBlurComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeGaussianBlurShadowNode>;
+using RNSVGFeMergeComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeMergeShadowNode>;
+using RNSVGFeOffsetComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFeOffsetShadowNode>;
+using RNSVGFilterComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGFilterShadowNode>;
+using RNSVGForeignObjectComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGForeignObjectShadowNode>;
+using RNSVGGroupComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGGroupShadowNode>;
+using RNSVGLinearGradientComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGLinearGradientShadowNode>;
+using RNSVGLineComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGLineShadowNode>;
+using RNSVGMarkerComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGMarkerShadowNode>;
+using RNSVGMaskComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGMaskShadowNode>;
+using RNSVGPathComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGPathShadowNode>;
+using RNSVGPatternComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGPatternShadowNode>;
+using RNSVGRadialGradientComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGRadialGradientShadowNode>;
+using RNSVGRectComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGRectShadowNode>;
+using RNSVGSymbolComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGSymbolShadowNode>;
+using RNSVGTextComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGTextShadowNode>;
+using RNSVGTextPathComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGTextPathShadowNode>;
+using RNSVGTSpanComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGTSpanShadowNode>;
+using RNSVGUseComponentDescriptor =
+    ConcreteComponentDescriptor<RNSVGUseShadowNode>;
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h

@@ -0,0 +1,59 @@
+#pragma once
+
+#include <react/renderer/components/view/ViewEventEmitter.h>
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/ConcreteShadowNode.h>
+#include "RNSVGLayoutableShadowNode.h"
+
+namespace facebook::react {
+
+template <const char *concreteComponentName, typename PropsT = ViewProps>
+class RNSVGConcreteShadowNode : public ConcreteShadowNode<
+                                    concreteComponentName,
+                                    RNSVGLayoutableShadowNode,
+                                    PropsT,
+                                    ViewEventEmitter,
+                                    StateData,
+                                    false> {
+ public:
+  using BaseShadowNode = ConcreteShadowNode<
+      concreteComponentName,
+      RNSVGLayoutableShadowNode,
+      PropsT,
+      ViewEventEmitter,
+      StateData,
+      false>;
+
+  using ConcreteViewProps = PropsT;
+
+  using BaseShadowNode::BaseShadowNode;
+
+  static ShadowNodeTraits BaseTraits() {
+    auto traits = BaseShadowNode::BaseTraits();
+    traits.set(ShadowNodeTraits::Trait::ViewKind);
+    traits.set(ShadowNodeTraits::Trait::FormsStackingContext);
+    traits.set(ShadowNodeTraits::Trait::FormsView);
+    return traits;
+  }
+
+  Transform getTransform() const override {
+    auto layoutMetrics = BaseShadowNode::getLayoutMetrics();
+    return BaseShadowNode::getConcreteProps().resolveTransform(layoutMetrics);
+  }
+
+  bool canBeTouchTarget() const override {
+    auto pointerEvents =
+        BaseShadowNode::getConcreteProps().ViewProps::pointerEvents;
+    return pointerEvents == PointerEventsMode::Auto ||
+        pointerEvents == PointerEventsMode::BoxOnly;
+  }
+
+  bool canChildrenBeTouchTarget() const override {
+    auto pointerEvents =
+        BaseShadowNode::getConcreteProps().ViewProps::pointerEvents;
+    return pointerEvents == PointerEventsMode::Auto ||
+        pointerEvents == PointerEventsMode::BoxNone;
+  }
+};
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp

@@ -0,0 +1,42 @@
+#include "RNSVGLayoutableShadowNode.h"
+#include <react/renderer/core/LayoutContext.h>
+
+namespace facebook::react {
+
+RNSVGLayoutableShadowNode::RNSVGLayoutableShadowNode(
+    const ShadowNodeFragment &fragment,
+    const ShadowNodeFamily::Shared &family,
+    ShadowNodeTraits traits)
+    : YogaLayoutableShadowNode(fragment, family, traits) {
+  // SVG handles its layout manually on the native side and does not depend on
+  // the Yoga layout. Setting the dimensions to 0 eliminates randomly positioned
+  // views in the layout inspector when Yoga attempts to interpret SVG
+  // properties like width when viewBox scale is set.
+  auto style = yogaNode_.style();
+  style.setDimension(yoga::Dimension::Width, yoga::value::points(0));
+  style.setDimension(yoga::Dimension::Height, yoga::value::points(0));
+  yogaNode_.setStyle(style);
+}
+
+RNSVGLayoutableShadowNode::RNSVGLayoutableShadowNode(
+    const ShadowNode &sourceShadowNode,
+    const ShadowNodeFragment &fragment)
+    : YogaLayoutableShadowNode(sourceShadowNode, fragment) {
+  // SVG handles its layout manually on the native side and does not depend on
+  // the Yoga layout. Setting the dimensions to 0 eliminates randomly positioned
+  // views in the layout inspector when Yoga attempts to interpret SVG
+  // properties like width when viewBox scale is set.
+  auto style = yogaNode_.style();
+  style.setDimension(yoga::Dimension::Width, yoga::value::points(0));
+  style.setDimension(yoga::Dimension::Height, yoga::value::points(0));
+  yogaNode_.setStyle(style);
+}
+
+void RNSVGLayoutableShadowNode::layout(LayoutContext layoutContext) {
+  auto affectedNodes = layoutContext.affectedNodes;
+  layoutContext.affectedNodes = nullptr;
+  YogaLayoutableShadowNode::layout(layoutContext);
+  layoutContext.affectedNodes = affectedNodes;
+}
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.h

@@ -0,0 +1,19 @@
+#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
+
+namespace facebook::react {
+
+class RNSVGLayoutableShadowNode : public YogaLayoutableShadowNode {
+ public:
+  RNSVGLayoutableShadowNode(
+      const ShadowNodeFragment &fragment,
+      const ShadowNodeFamily::Shared &family,
+      ShadowNodeTraits traits);
+
+  RNSVGLayoutableShadowNode(
+      const ShadowNode &sourceShadowNode,
+      const ShadowNodeFragment &fragment);
+
+  void layout(LayoutContext layoutContext) override;
+};
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp

@@ -0,0 +1,33 @@
+#include <react/renderer/components/rnsvg/ShadowNodes.h>
+
+namespace facebook::react {
+
+extern const char RNSVGCircleComponentName[] = "RNSVGCircle";
+extern const char RNSVGClipPathComponentName[] = "RNSVGClipPath";
+extern const char RNSVGDefsComponentName[] = "RNSVGDefs";
+extern const char RNSVGEllipseComponentName[] = "RNSVGEllipse";
+extern const char RNSVGFeBlendComponentName[] = "RNSVGFeBlend";
+extern const char RNSVGFeColorMatrixComponentName[] = "RNSVGFeColorMatrix";
+extern const char RNSVGFeCompositeComponentName[] = "RNSVGFeComposite";
+extern const char RNSVGFeFloodComponentName[] = "RNSVGFeFlood";
+extern const char RNSVGFeGaussianBlurComponentName[] = "RNSVGFeGaussianBlur";
+extern const char RNSVGFeMergeComponentName[] = "RNSVGFeMerge";
+extern const char RNSVGFeOffsetComponentName[] = "RNSVGFeOffset";
+extern const char RNSVGFilterComponentName[] = "RNSVGFilter";
+extern const char RNSVGForeignObjectComponentName[] = "RNSVGForeignObject";
+extern const char RNSVGGroupComponentName[] = "RNSVGGroup";
+extern const char RNSVGLinearGradientComponentName[] = "RNSVGLinearGradient";
+extern const char RNSVGLineComponentName[] = "RNSVGLine";
+extern const char RNSVGMarkerComponentName[] = "RNSVGMarker";
+extern const char RNSVGMaskComponentName[] = "RNSVGMask";
+extern const char RNSVGPathComponentName[] = "RNSVGPath";
+extern const char RNSVGPatternComponentName[] = "RNSVGPattern";
+extern const char RNSVGRadialGradientComponentName[] = "RNSVGRadialGradient";
+extern const char RNSVGRectComponentName[] = "RNSVGRect";
+extern const char RNSVGSymbolComponentName[] = "RNSVGSymbol";
+extern const char RNSVGTextComponentName[] = "RNSVGText";
+extern const char RNSVGTextPathComponentName[] = "RNSVGTextPath";
+extern const char RNSVGTSpanComponentName[] = "RNSVGTSpan";
+extern const char RNSVGUseComponentName[] = "RNSVGUse";
+
+} // namespace facebook::react

common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h

@@ -0,0 +1,233 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <react/renderer/components/rnsvg/EventEmitters.h>
+#include <react/renderer/components/rnsvg/Props.h>
+#include "RNSVGConcreteShadowNode.h"
+#include "RNSVGImageState.h"
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char RNSVGCircleComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGCircle> component.
+ */
+using RNSVGCircleShadowNode =
+    RNSVGConcreteShadowNode<RNSVGCircleComponentName, RNSVGCircleProps>;
+
+JSI_EXPORT extern const char RNSVGClipPathComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGClipPath> component.
+ */
+using RNSVGClipPathShadowNode =
+    RNSVGConcreteShadowNode<RNSVGClipPathComponentName, RNSVGClipPathProps>;
+
+JSI_EXPORT extern const char RNSVGDefsComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGDefs> component.
+ */
+using RNSVGDefsShadowNode =
+    RNSVGConcreteShadowNode<RNSVGDefsComponentName, RNSVGDefsProps>;
+
+JSI_EXPORT extern const char RNSVGEllipseComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGEllipse> component.
+ */
+using RNSVGEllipseShadowNode =
+    RNSVGConcreteShadowNode<RNSVGEllipseComponentName, RNSVGEllipseProps>;
+
+JSI_EXPORT extern const char RNSVGFeBlendComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeBlend> component.
+ */
+using RNSVGFeBlendShadowNode =
+    RNSVGConcreteShadowNode<RNSVGFeBlendComponentName, RNSVGFeBlendProps>;
+
+JSI_EXPORT extern const char RNSVGFeColorMatrixComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeColorMatrix> component.
+ */
+using RNSVGFeColorMatrixShadowNode = RNSVGConcreteShadowNode<
+    RNSVGFeColorMatrixComponentName,
+    RNSVGFeColorMatrixProps>;
+
+JSI_EXPORT extern const char RNSVGFeCompositeComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeComposite> component.
+ */
+using RNSVGFeCompositeShadowNode = RNSVGConcreteShadowNode<
+    RNSVGFeCompositeComponentName,
+    RNSVGFeCompositeProps>;
+
+JSI_EXPORT extern const char RNSVGFeFloodComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeFlood> component.
+ */
+using RNSVGFeFloodShadowNode =
+    RNSVGConcreteShadowNode<RNSVGFeFloodComponentName, RNSVGFeFloodProps>;
+
+JSI_EXPORT extern const char RNSVGFeGaussianBlurComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeGaussianBlur> component.
+ */
+using RNSVGFeGaussianBlurShadowNode = RNSVGConcreteShadowNode<
+    RNSVGFeGaussianBlurComponentName,
+    RNSVGFeGaussianBlurProps>;
+
+JSI_EXPORT extern const char RNSVGFeMergeComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeMerge> component.
+ */
+using RNSVGFeMergeShadowNode =
+    RNSVGConcreteShadowNode<RNSVGFeMergeComponentName, RNSVGFeMergeProps>;
+
+JSI_EXPORT extern const char RNSVGFeOffsetComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFeOffset> component.
+ */
+using RNSVGFeOffsetShadowNode =
+    RNSVGConcreteShadowNode<RNSVGFeOffsetComponentName, RNSVGFeOffsetProps>;
+
+JSI_EXPORT extern const char RNSVGFilterComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGFilter> component.
+ */
+using RNSVGFilterShadowNode =
+    RNSVGConcreteShadowNode<RNSVGFilterComponentName, RNSVGFilterProps>;
+
+JSI_EXPORT extern const char RNSVGForeignObjectComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGForeignObject> component.
+ */
+using RNSVGForeignObjectShadowNode = RNSVGConcreteShadowNode<
+    RNSVGForeignObjectComponentName,
+    RNSVGForeignObjectProps>;
+
+JSI_EXPORT extern const char RNSVGGroupComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGGroup> component.
+ */
+using RNSVGGroupShadowNode =
+    RNSVGConcreteShadowNode<RNSVGGroupComponentName, RNSVGGroupProps>;
+
+JSI_EXPORT extern const char RNSVGLinearGradientComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGLinearGradient> component.
+ */
+using RNSVGLinearGradientShadowNode = RNSVGConcreteShadowNode<
+    RNSVGLinearGradientComponentName,
+    RNSVGLinearGradientProps>;
+
+JSI_EXPORT extern const char RNSVGLineComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGLine> component.
+ */
+using RNSVGLineShadowNode =
+    RNSVGConcreteShadowNode<RNSVGLineComponentName, RNSVGLineProps>;
+
+JSI_EXPORT extern const char RNSVGMarkerComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGMarker> component.
+ */
+using RNSVGMarkerShadowNode =
+    RNSVGConcreteShadowNode<RNSVGMarkerComponentName, RNSVGMarkerProps>;
+
+JSI_EXPORT extern const char RNSVGMaskComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGMask> component.
+ */
+using RNSVGMaskShadowNode =
+    RNSVGConcreteShadowNode<RNSVGMaskComponentName, RNSVGMaskProps>;
+
+JSI_EXPORT extern const char RNSVGPathComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGPath> component.
+ */
+using RNSVGPathShadowNode =
+    RNSVGConcreteShadowNode<RNSVGPathComponentName, RNSVGPathProps>;
+
+JSI_EXPORT extern const char RNSVGPatternComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGPattern> component.
+ */
+using RNSVGPatternShadowNode =
+    RNSVGConcreteShadowNode<RNSVGPatternComponentName, RNSVGPatternProps>;
+
+JSI_EXPORT extern const char RNSVGRadialGradientComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGRadialGradient> component.
+ */
+using RNSVGRadialGradientShadowNode = RNSVGConcreteShadowNode<
+    RNSVGRadialGradientComponentName,
+    RNSVGRadialGradientProps>;
+
+JSI_EXPORT extern const char RNSVGRectComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGRect> component.
+ */
+using RNSVGRectShadowNode =
+    RNSVGConcreteShadowNode<RNSVGRectComponentName, RNSVGRectProps>;
+
+JSI_EXPORT extern const char RNSVGSymbolComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGSymbol> component.
+ */
+using RNSVGSymbolShadowNode =
+    RNSVGConcreteShadowNode<RNSVGSymbolComponentName, RNSVGSymbolProps>;
+
+JSI_EXPORT extern const char RNSVGTextComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGText> component.
+ */
+using RNSVGTextShadowNode =
+    RNSVGConcreteShadowNode<RNSVGTextComponentName, RNSVGTextProps>;
+
+JSI_EXPORT extern const char RNSVGTextPathComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGTextPath> component.
+ */
+using RNSVGTextPathShadowNode =
+    RNSVGConcreteShadowNode<RNSVGTextPathComponentName, RNSVGTextPathProps>;
+
+JSI_EXPORT extern const char RNSVGTSpanComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGTSpan> component.
+ */
+using RNSVGTSpanShadowNode =
+    RNSVGConcreteShadowNode<RNSVGTSpanComponentName, RNSVGTSpanProps>;
+
+JSI_EXPORT extern const char RNSVGUseComponentName[];
+
+/*
+ * `ShadowNode` for <RNSVGUse> component.
+ */
+using RNSVGUseShadowNode =
+    RNSVGConcreteShadowNode<RNSVGUseComponentName, RNSVGUseProps>;
+
+} // namespace facebook::react

src/fabric/CircleNativeComponent.ts

@@ -58,4 +58,6 @@ interface NativeProps
   r?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGCircle');
+export default codegenNativeComponent<NativeProps>('RNSVGCircle', {
+  interfaceOnly: true,
+});

src/fabric/ClipPathNativeComponent.ts

@@ -61,4 +61,6 @@ interface NativeProps
     SvgRenderableCommonProps,
     SvgGroupCommonProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSVGClipPath');
+export default codegenNativeComponent<NativeProps>('RNSVGClipPath', {
+  interfaceOnly: true,
+});

src/fabric/DefsNativeComponent.ts

@@ -23,4 +23,6 @@ interface SvgNodeCommonProps {
 
 interface NativeProps extends ViewProps, SvgNodeCommonProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSVGDefs');
+export default codegenNativeComponent<NativeProps>('RNSVGDefs', {
+  interfaceOnly: true,
+});

src/fabric/EllipseNativeComponent.ts

@@ -59,4 +59,6 @@ interface NativeProps
   ry?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGEllipse');
+export default codegenNativeComponent<NativeProps>('RNSVGEllipse', {
+  interfaceOnly: true,
+});

src/fabric/FeBlendNativeComponent.ts

@@ -26,4 +26,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   mode?: WithDefault<BlendMode, 'normal'>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeBlend');
+export default codegenNativeComponent<NativeProps>('RNSVGFeBlend', {
+  interfaceOnly: true,
+});

src/fabric/FeColorMatrixNativeComponent.ts

@@ -21,4 +21,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   values?: ReadonlyArray<Float>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeColorMatrix');
+export default codegenNativeComponent<NativeProps>('RNSVGFeColorMatrix', {
+  interfaceOnly: true,
+});

src/fabric/FeCompositeNativeComponent.ts

@@ -31,4 +31,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   k4?: Float;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeComposite');
+export default codegenNativeComponent<NativeProps>('RNSVGFeComposite', {
+  interfaceOnly: true,
+});

src/fabric/FeFloodNativeComponent.ts

@@ -28,4 +28,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   floodOpacity?: WithDefault<Float, 1.0>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeFlood');
+export default codegenNativeComponent<NativeProps>('RNSVGFeFlood', {
+  interfaceOnly: true,
+});

src/fabric/FeGaussianBlurNativeComponent.ts

@@ -22,4 +22,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   edgeMode?: WithDefault<FilterEdgeMode, 'none'>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeGaussianBlur');
+export default codegenNativeComponent<NativeProps>('RNSVGFeGaussianBlur', {
+  interfaceOnly: true,
+});

src/fabric/FeMergeNativeComponent.ts

@@ -16,4 +16,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   nodes?: ReadonlyArray<string>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeMerge');
+export default codegenNativeComponent<NativeProps>('RNSVGFeMerge', {
+  interfaceOnly: true,
+});

src/fabric/FeOffsetNativeComponent.ts

@@ -18,4 +18,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
   dy?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFeOffset');
+export default codegenNativeComponent<NativeProps>('RNSVGFeOffset', {
+  interfaceOnly: true,
+});

src/fabric/FilterNativeComponent.ts

@@ -16,4 +16,6 @@ interface NativeProps extends ViewProps {
   primitiveUnits?: WithDefault<Units, 'userSpaceOnUse'>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGFilter');
+export default codegenNativeComponent<NativeProps>('RNSVGFilter', {
+  interfaceOnly: true,
+});

src/fabric/ForeignObjectNativeComponent.ts

@@ -66,4 +66,6 @@ interface NativeProps
   width?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGForeignObject');
+export default codegenNativeComponent<NativeProps>('RNSVGForeignObject', {
+  interfaceOnly: true,
+});

src/fabric/GroupNativeComponent.ts

@@ -61,4 +61,6 @@ interface NativeProps
     SvgRenderableCommonProps,
     SvgGroupCommonProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSVGGroup');
+export default codegenNativeComponent<NativeProps>('RNSVGGroup', {
+  interfaceOnly: true,
+});

src/fabric/LineNativeComponent.ts

@@ -59,4 +59,6 @@ interface NativeProps
   y2?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGLine');
+export default codegenNativeComponent<NativeProps>('RNSVGLine', {
+  interfaceOnly: true,
+});

src/fabric/LinearGradientNativeComponent.ts

@@ -34,4 +34,6 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {
   gradientTransform?: ReadonlyArray<Float> | null;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGLinearGradient');
+export default codegenNativeComponent<NativeProps>('RNSVGLinearGradient', {
+  interfaceOnly: true,
+});

src/fabric/MarkerNativeComponent.ts

@@ -74,4 +74,6 @@ interface NativeProps
   meetOrSlice?: Int32;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGMarker');
+export default codegenNativeComponent<NativeProps>('RNSVGMarker', {
+  interfaceOnly: true,
+});

src/fabric/MaskNativeComponent.ts

@@ -69,4 +69,6 @@ interface NativeProps
   maskType?: Int32;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGMask');
+export default codegenNativeComponent<NativeProps>('RNSVGMask', {
+  interfaceOnly: true,
+});

src/fabric/PathNativeComponent.ts

@@ -56,4 +56,6 @@ interface NativeProps
   d?: string;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGPath');
+export default codegenNativeComponent<NativeProps>('RNSVGPath', {
+  interfaceOnly: true,
+});

src/fabric/PatternNativeComponent.ts

@@ -75,4 +75,6 @@ interface NativeProps
   meetOrSlice?: Int32;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGPattern');
+export default codegenNativeComponent<NativeProps>('RNSVGPattern', {
+  interfaceOnly: true,
+});

src/fabric/RadialGradientNativeComponent.ts

@@ -36,4 +36,6 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {
   gradientTransform?: ReadonlyArray<Float> | null;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGRadialGradient');
+export default codegenNativeComponent<NativeProps>('RNSVGRadialGradient', {
+  interfaceOnly: true,
+});

src/fabric/RectNativeComponent.ts

@@ -61,4 +61,6 @@ interface NativeProps
   ry?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGRect');
+export default codegenNativeComponent<NativeProps>('RNSVGRect', {
+  interfaceOnly: true,
+});

src/fabric/SymbolNativeComponent.ts

@@ -68,4 +68,6 @@ interface NativeProps
   meetOrSlice?: Int32;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGSymbol');
+export default codegenNativeComponent<NativeProps>('RNSVGSymbol', {
+  interfaceOnly: true,
+});

src/fabric/TSpanNativeComponent.ts

@@ -78,4 +78,6 @@ interface NativeProps
   content?: string;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGTSpan');
+export default codegenNativeComponent<NativeProps>('RNSVGTSpan', {
+  interfaceOnly: true,
+});

src/fabric/TextNativeComponent.ts

@@ -76,4 +76,6 @@ interface NativeProps
     SvgGroupCommonProps,
     SvgTextCommonProps {}
 
-export default codegenNativeComponent<NativeProps>('RNSVGText');
+export default codegenNativeComponent<NativeProps>('RNSVGText', {
+  interfaceOnly: true,
+});

src/fabric/TextPathNativeComponent.ts

@@ -82,4 +82,6 @@ interface NativeProps
   startOffset?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGTextPath');
+export default codegenNativeComponent<NativeProps>('RNSVGTextPath', {
+  interfaceOnly: true,
+});

src/fabric/UseNativeComponent.ts

@@ -60,4 +60,6 @@ interface NativeProps
   width?: UnsafeMixed<NumberProp>;
 }
 
-export default codegenNativeComponent<NativeProps>('RNSVGUse');
+export default codegenNativeComponent<NativeProps>('RNSVGUse', {
+  interfaceOnly: true,
+});