Fix: propagate elements metrics to their shadow nodes

android/src/main/java/com/horcrux/svg/GroupView.java

@@ -19,10 +19,12 @@
 import android.graphics.Region;
 import android.os.Build;
 import android.view.View;
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableType;
+import com.facebook.react.bridge.WritableMap;
 import java.util.ArrayList;
 import javax.annotation.Nullable;
 
@@ -336,4 +338,20 @@ void resetProperties() {
       }
     }
   }
+
+  @Override
+  public void updateShadowNodeMetrics() {
+    SvgView svgView = this.getSvgView();
+
+    if (this.stateWrapper == null || svgView == null) {
+      return;
+    }
+
+    WritableMap map = Arguments.createMap();
+    map.putDouble("x", 0);
+    map.putDouble("y", 0);
+    map.putDouble("width", svgView.getCanvasWidth() / mScale);
+    map.putDouble("height", svgView.getCanvasHeight() / mScale);
+    this.stateWrapper.updateState(map);
+  }
 }

android/src/main/java/com/horcrux/svg/RenderableView.java

@@ -33,8 +33,8 @@
 import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.touch.ReactHitSlopView;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
 import java.lang.reflect.Field;
 import java.util.ArrayList;
 import java.util.regex.Matcher;
@@ -103,10 +103,8 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop
 
   public void onReceiveNativeEvent() {
     WritableMap event = Arguments.createMap();
-    ReactContext reactContext = (ReactContext)getContext();
-    reactContext
-        .getJSModule(RCTEventEmitter.class)
-        .receiveEvent(getId(), "topSvgLayout", event);
+    ReactContext reactContext = (ReactContext) getContext();
+    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(getId(), "topSvgLayout", event);
   }
 
   @Nullable String mFilter;
@@ -500,6 +498,8 @@ void render(Canvas canvas, Paint paint, float opacity) {
     } else {
       draw(canvas, paint, opacity);
     }
+
+    this.updateShadowNodeMetrics();
   }
 
   @Override
@@ -824,4 +824,19 @@ void resetProperties() {
   private boolean hasOwnProperty(String propName) {
     return mAttributeList != null && mAttributeList.contains(propName);
   }
+
+  protected void updateShadowNodeMetrics() {
+    RectF clientRect = this.getClientRect();
+
+    if (this.stateWrapper == null || clientRect == null) {
+      return;
+    }
+
+    WritableMap map = Arguments.createMap();
+    map.putDouble("x", clientRect.left / mScale);
+    map.putDouble("y", clientRect.top / mScale);
+    map.putDouble("width", clientRect.width() / mScale);
+    map.putDouble("height", clientRect.height() / mScale);
+    this.stateWrapper.updateState(map);
+  }
 }

android/src/main/java/com/horcrux/svg/RenderableViewManager.java

@@ -67,6 +67,9 @@
 import android.util.SparseArray;
 import android.view.View;
 import android.view.ViewGroup;
+
+import androidx.annotation.NonNull;
+
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.JavaOnlyMap;
 import com.facebook.react.bridge.ReadableArray;
@@ -78,6 +81,8 @@
 import com.facebook.react.uimanager.MatrixMathHelper;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.ReactStylesDiffMap;
+import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.TransformHelper;
 import com.facebook.react.uimanager.ViewGroupManager;
@@ -166,6 +171,12 @@ protected ViewManagerDelegate getDelegate() {
     return mDelegate;
   }
 
+  @Override
+  public Object updateState(@NonNull VirtualView view, ReactStylesDiffMap props, StateWrapper stateWrapper) {
+    view.setStateWrapper(stateWrapper);
+    return super.updateState(view, props, stateWrapper);
+  }
+
   static class RenderableShadowNode extends LayoutShadowNode {
 
     @SuppressWarnings({"unused", "EmptyMethod"})

android/src/main/java/com/horcrux/svg/VirtualView.java

@@ -21,6 +21,7 @@
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
 import com.facebook.react.uimanager.PointerEvents;
+import com.facebook.react.uimanager.StateWrapper;
 import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.view.ReactViewGroup;
@@ -85,6 +86,7 @@ public abstract class VirtualView extends ReactViewGroup {
   private float canvasHeight = -1;
   private float canvasWidth = -1;
   private GlyphContext glyphContext;
+  protected  @Nullable StateWrapper stateWrapper = null;
 
   Path mPath;
   Path mFillPath;
@@ -107,6 +109,10 @@ public void setPointerEvents(PointerEvents pointerEvents) {
     mPointerEvents = pointerEvents;
   }
 
+  public void setStateWrapper(@Nullable StateWrapper stateWrapper) {
+    this.stateWrapper = stateWrapper;
+  }
+
   @Override
   public void onInitializeAccessibilityNodeInfo(AccessibilityNodeInfo info) {
     super.onInitializeAccessibilityNodeInfo(info);

apple/Elements/RNSVGGroup.mm

@@ -16,6 +16,7 @@
 #import <react/renderer/components/view/conversions.h>
 #import <rnsvg/RNSVGComponentDescriptors.h>
 #import "RNSVGFabricConversions.h"
+#import "RNSVGRenderUtils.h"
 #endif // RCT_NEW_ARCH_ENABLED
 
 @implementation RNSVGGroup {
@@ -308,6 +309,16 @@ - (void)resetProperties
   }];
 }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateShadowNodeMetrics
+{
+  auto statePtr = [self state];
+  if (statePtr) {
+    statePtr->updateState(RNSVGLayoutableState(0, 0, [self getCanvasWidth], [self getCanvasHeight]));
+  }
+}
+#endif
+
 @end
 
 #ifdef RCT_NEW_ARCH_ENABLED

apple/RNSVGRenderable.h

@@ -16,6 +16,12 @@
 #import "RNSVGNode.h"
 #import "RNSVGVectorEffect.h"
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <rnsvg/RNSVGComponentDescriptors.h>
+
+using namespace facebook::react;
+#endif
+
 @interface RNSVGRenderable : RNSVGNode
 
 @property (class) RNSVGRenderable *contextElement;
@@ -36,6 +42,10 @@
 @property (nonatomic, assign) CGPathRef hitArea;
 @property (nonatomic, strong) NSString *filter;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (facebook::react::RNSVGRenderableShadowNode::ConcreteState::Shared)state;
+#endif
+
 - (void)setColor:(RNSVGColor *)color;
 
 - (void)setHitArea:(CGPathRef)path;
@@ -48,4 +58,8 @@
 
 - (CGColor *)getCurrentColor;
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateShadowNodeMetrics;
+#endif
+
 @end

apple/RNSVGRenderable.mm

@@ -26,6 +26,10 @@ @implementation RNSVGRenderable {
   CGFloat *_strokeDashArrayData;
   CGPathRef _srcHitPath;
   RNSVGRenderable *_caller;
+
+#ifdef RCT_NEW_ARCH_ENABLED
+  RNSVGRenderableShadowNode::ConcreteState::Shared _state;
+#endif
 }
 
 static RNSVGRenderable *_contextElement;
@@ -243,6 +247,11 @@ - (void)prepareForRecycle
   _filter = nil;
   _caller = nil;
 }
+
+- (void)updateState:(State::Shared const &)state oldState:(State::Shared const &)oldState
+{
+  _state = std::static_pointer_cast<const RNSVGRenderableShadowNode::ConcreteState>(state);
+}
 #endif // RCT_NEW_ARCH_ENABLED
 
 UInt32 saturate(CGFloat value)
@@ -432,6 +441,9 @@ - (void)renderTo:(CGContextRef)context rect:(CGRect)rect
   CGContextRestoreGState(context);
 
   [self renderMarkers:context path:self.path rect:&rect];
+#ifdef RCT_NEW_ARCH_ENABLED
+  [self updateShadowNodeMetrics];
+#endif
 }
 
 - (void)prepareStrokeDash:(NSUInteger)count strokeDasharray:(NSArray<RNSVGLength *> *)strokeDasharray
@@ -773,4 +785,17 @@ - (CGColor *)getCurrentColor
   return nil;
 }
 
+#ifdef RCT_NEW_ARCH_ENABLED
+- (void)updateShadowNodeMetrics
+{
+  if (_state) {
+    _state->updateState(RNSVGLayoutableState(self.clientRect.origin.x, self.clientRect.origin.y, self.clientRect.size.width, self.clientRect.size.height));
+  }
+}
+
+- (RNSVGRenderableShadowNode::ConcreteState::Shared)state {
+  return _state;
+}
+#endif
+
 @end

apps/fabric-example/ios/Podfile.lock

@@ -2606,7 +2606,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNSVG (15.13.0):
+  - RNSVG (15.14.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2632,10 +2632,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.13.0)
+    - RNSVG/common (= 15.14.0)
     - SocketRocket
     - Yoga
-  - RNSVG/common (15.13.0):
+  - RNSVG/common (15.14.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -2988,7 +2988,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 4f7cc97a71d4fe0fcba38c94acdd969f5f17c91c
   RNReanimated: d3ecb5fd98f70b736cb8880cc95776298ff761c7
   RNScreens: 74985ca8e102294a60cec7513fa84c936fa0b20b
-  RNSVG: eca4f6bb09bcaf582c4f082f3989a6b8513b3e93
+  RNSVG: 4a4f7d4897abbfdc6dfe30be5d6cc5ffee23ea43
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: a3ed390a19db0459bd6839823a6ac6d9c6db198d
 

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

@@ -0,0 +1,30 @@
+// RNSVGComponentDescriptor.h
+#pragma once
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include "RNSVGShadowNodes.h"
+
+namespace facebook::react {
+
+template <typename ShadowNodeT>
+class RNSVGComponentDescriptor final
+: public ConcreteComponentDescriptor<ShadowNodeT> {
+public:
+  using ConcreteComponentDescriptor<ShadowNodeT>::ConcreteComponentDescriptor;
+  void adopt(ShadowNode &shadowNode) const override {
+    react_native_assert(dynamic_cast<RNSVGLayoutableShadowNode *>(&shadowNode));
+    auto layoutableShadowNode = dynamic_cast<RNSVGLayoutableShadowNode *>(&shadowNode);
+
+    auto state = std::static_pointer_cast<const typename ShadowNodeT::ConcreteState>(shadowNode.getState());
+      auto stateData = state->getData();
+
+      if (stateData.getWidth() != 0 && stateData.getHeight() != 0) {
+        layoutableShadowNode->setSize(Size{stateData.getWidth(), stateData.getHeight()});
+        layoutableShadowNode->setShadowNodePosition(stateData.getX(), stateData.getY());
+      }
+
+    ConcreteComponentDescriptor<ShadowNodeT>::adopt(shadowNode);
+  }
+};
+
+} // namespace facebook::react