feat: replace OnLayoutEvent with SvgOnLayoutEvent

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

@@ -22,6 +22,7 @@
 import android.graphics.RectF;
 import android.graphics.Region;
 import android.view.ViewParent;
+import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
@@ -30,7 +31,9 @@
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 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 java.lang.reflect.Field;
 import java.util.ArrayList;
@@ -98,6 +101,14 @@ public abstract class RenderableView extends VirtualView implements ReactHitSlop
   private @Nullable ArrayList<String> mAttributeList;
   private @Nullable RenderableView mCaller;
 
+  public void onReceiveNativeEvent() {
+    WritableMap event = Arguments.createMap();
+    ReactContext reactContext = (ReactContext)getContext();
+    reactContext
+        .getJSModule(RCTEventEmitter.class)
+        .receiveEvent(getId(), "topSvgLayout", event);
+  }
+
   @Nullable String mFilter;
 
   private static final Pattern regex = Pattern.compile("[0-9.-]+");

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

@@ -142,6 +142,7 @@
 import com.facebook.react.viewmanagers.RNSVGUseManagerDelegate;
 import com.facebook.react.viewmanagers.RNSVGUseManagerInterface;
 import com.horcrux.svg.events.SvgLoadEvent;
+import com.horcrux.svg.events.SvgOnLayoutEvent;
 import java.util.HashMap;
 import java.util.Locale;
 import java.util.Map;
@@ -589,6 +590,12 @@ class RenderableViewManager<T extends RenderableView> extends VirtualViewManager
     super(svgclass);
   }
 
+  public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+    Map<String, Object> eventTypes = new HashMap<>();
+    eventTypes.put(SvgOnLayoutEvent.EVENT_NAME, MapBuilder.of("registrationName", "onSvgLayout"));
+    return eventTypes;
+  }
+
   static class GroupViewManagerAbstract<U extends GroupView> extends RenderableViewManager<U> {
     GroupViewManagerAbstract(SVGClass svgClass) {
       super(svgClass);

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

@@ -20,11 +20,12 @@
 import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.common.ReactConstants;
 import com.facebook.react.uimanager.DisplayMetricsHolder;
-import com.facebook.react.uimanager.OnLayoutEvent;
 import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.view.ReactViewGroup;
+import com.horcrux.svg.events.SvgOnLayoutEvent;
+
 import java.util.ArrayList;
 import javax.annotation.Nullable;
 
@@ -603,7 +604,14 @@ void setClientRect(RectF rect) {
     EventDispatcher eventDispatcher =
         UIManagerHelper.getEventDispatcherForReactTag(mContext, getId());
     if (eventDispatcher != null) {
-      eventDispatcher.dispatchEvent(OnLayoutEvent.obtain(this.getId(), left, top, width, height));
+      eventDispatcher.dispatchEvent(
+        new SvgOnLayoutEvent(
+          UIManagerHelper.getSurfaceId(VirtualView.this),
+          this.getId(),
+          left,
+          top,
+          width,
+          height));
     }
   }
 

android/src/main/java/com/horcrux/svg/events/SvgOnLayoutEvent.java

@@ -0,0 +1,50 @@
+package com.horcrux.svg.events;
+
+import androidx.core.util.Pools.SynchronizedPool;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.PixelUtil;
+import com.facebook.react.uimanager.events.Event;
+
+public class SvgOnLayoutEvent extends Event<SvgOnLayoutEvent> {
+
+  public static final String EVENT_NAME = "topSvgLayout";
+  public int x = 0;
+  public int y = 0;
+  public int width = 0;
+  public int height = 0;
+
+  public SvgOnLayoutEvent(int surfaceId, int viewId, int x, int y, int width, int height) {
+    super(surfaceId, viewId);
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+
+  @Override
+  public String getEventName() {
+    return EVENT_NAME;
+  }
+
+  @Override
+  public short getCoalescingKey() {
+    return 0;
+  }
+
+  @Override
+  protected WritableMap getEventData() {
+    WritableMap layout = Arguments.createMap();
+    layout.putDouble("x", (double) PixelUtil.toDIPFromPixel((float) x));
+    layout.putDouble("y", (double) PixelUtil.toDIPFromPixel((float) y));
+    layout.putDouble("width", (double) PixelUtil.toDIPFromPixel((float) width));
+    layout.putDouble("height", (double) PixelUtil.toDIPFromPixel((float) height));
+
+    WritableMap event = Arguments.createMap();
+    event.putMap("layout", layout);
+    event.putInt("target", getViewTag());
+
+    return event;
+  }
+}

apple/RNSVGNode.h

@@ -62,7 +62,7 @@ extern CGFloat const RNSVG_DEFAULT_FONT_SIZE;
 @property (nonatomic, assign) CGRect fillBounds;
 @property (nonatomic, assign) CGRect strokeBounds;
 @property (nonatomic, assign) CGRect markerBounds;
-@property (nonatomic, copy) RCTDirectEventBlock onLayout;
+@property (nonatomic, copy) RCTDirectEventBlock onSvgLayout;
 
 /**
  * RNSVGSvgView which ownes current RNSVGNode

apple/RNSVGNode.mm

@@ -12,6 +12,11 @@
 #import "RNSVGGlyphContext.h"
 #import "RNSVGGroup.h"
 
+#ifdef RCT_NEW_ARCH_ENABLED
+#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
+using namespace facebook::react;
+#endif // RCT_NEW_ARCH_ENABLED
+
 @interface RNSVGNode ()
 @property (nonatomic, readwrite, weak) RNSVGSvgView *svgView;
 @property (nonatomic, readwrite, weak) RNSVGGroup *textRoot;
@@ -264,16 +269,18 @@ - (void)setClientRect:(CGRect)clientRect
   _clientRect = clientRect;
 #ifdef RCT_NEW_ARCH_ENABLED
   if (_eventEmitter != nullptr) {
-    facebook::react::LayoutMetrics customLayoutMetrics = _layoutMetrics;
-    customLayoutMetrics.frame.size.width = _clientRect.size.width;
-    customLayoutMetrics.frame.size.height = _clientRect.size.height;
-    customLayoutMetrics.frame.origin.x = _clientRect.origin.x;
-    customLayoutMetrics.frame.origin.y = _clientRect.origin.y;
-    _eventEmitter->onLayout(customLayoutMetrics);
+    static_cast<const RNSVGGroupEventEmitter &>(*_eventEmitter)
+      .onSvgLayout(
+        {.layout = {
+            .x = static_cast<int>(_clientRect.origin.x),
+            .y = static_cast<int>(_clientRect.origin.y),
+            .width = static_cast<int>(_clientRect.size.width),
+            .height = static_cast<int>(_clientRect.size.height)
+        }});
   }
 #else
-  if (self.onLayout) {
-    self.onLayout(@{
+  if (self.onSvgLayout) {
+    self.onSvgLayout(@{
       @"layout" : @{
         @"x" : @(_clientRect.origin.x),
         @"y" : @(_clientRect.origin.y),
@@ -660,7 +667,7 @@ - (void)prepareForRecycle
   _fillBounds = CGRectZero;
   _strokeBounds = CGRectZero;
   _markerBounds = CGRectZero;
-  _onLayout = nil;
+  _onSvgLayout = nil;
 
   _svgView = nil;
   _textRoot = nil;

apple/ViewManagers/RNSVGNodeManager.mm

@@ -41,7 +41,7 @@ - (RNSVGPlatformView *)view
 RCT_EXPORT_VIEW_PROPERTY(clipPath, NSString)
 RCT_EXPORT_VIEW_PROPERTY(clipRule, RNSVGCGFCRule)
 RCT_EXPORT_VIEW_PROPERTY(responsible, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(onLayout, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onSvgLayout, RCTDirectEventBlock)
 
 RCT_CUSTOM_SHADOW_PROPERTY(top, id, RNSVGNode) {}
 RCT_CUSTOM_SHADOW_PROPERTY(right, id, RNSVGNode) {}

src/elements/Svg.tsx

@@ -177,10 +177,6 @@ export default class Svg extends Shape<SvgProps> {
 
     extractResponder(props, props, this as ResponderInstanceProps);
 
-    if (onLayout != null) {
-      props.onLayout = onLayout;
-    }
-
     const gStyle = Object.assign({}, StyleSheet.flatten(style));
     if (transform) {
       if (gStyle.transform) {
@@ -214,6 +210,7 @@ export default class Svg extends Shape<SvgProps> {
             strokeLinecap,
             strokeLinejoin,
             strokeMiterlimit,
+            onLayout,
           }}
         />
       </RNSVGSvg>

src/fabric/CircleNativeComponent.ts

@@ -1,6 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ColorValue } from 'react-native';
 import type {
+  DirectEventHandler,
   Float,
   Int32,
   WithDefault,
@@ -31,6 +32,15 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  layout: {
+    x: Int32;
+    y: Int32;
+    width: Int32;
+    height: Int32;
+  };
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -56,6 +66,7 @@ interface NativeProps
   cx?: UnsafeMixed<NumberProp>;
   cy?: UnsafeMixed<NumberProp>;
   r?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGCircle', {

src/fabric/ClipPathNativeComponent.ts

@@ -1,6 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ColorValue } from 'react-native';
 import type {
+  DirectEventHandler,
   Float,
   Int32,
   WithDefault,
@@ -31,6 +32,15 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  layout: {
+    x: Int32;
+    y: Int32;
+    width: Int32;
+    height: Int32;
+  };
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -59,7 +69,9 @@ interface NativeProps
   extends ViewProps,
     SvgNodeCommonProps,
     SvgRenderableCommonProps,
-    SvgGroupCommonProps {}
+    SvgGroupCommonProps {
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
+}
 
 export default codegenNativeComponent<NativeProps>('RNSVGClipPath', {
   interfaceOnly: true,

src/fabric/EllipseNativeComponent.ts

@@ -1,6 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ColorValue } from 'react-native';
 import type {
+  DirectEventHandler,
   Float,
   Int32,
   WithDefault,
@@ -31,6 +32,15 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  layout: {
+    x: Int32;
+    y: Int32;
+    width: Int32;
+    height: Int32;
+  };
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -57,6 +67,7 @@ interface NativeProps
   cy?: UnsafeMixed<NumberProp>;
   rx?: UnsafeMixed<NumberProp>;
   ry?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGEllipse', {

src/fabric/ForeignObjectNativeComponent.ts

@@ -1,6 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ColorValue } from 'react-native';
 import type {
+  DirectEventHandler,
   Float,
   Int32,
   WithDefault,
@@ -31,6 +32,14 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  layout: {
+    x: Int32;
+    y: Int32;
+    width: Int32;
+    height: Int32;
+  };
+}>;
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -64,6 +73,7 @@ interface NativeProps
   y?: UnsafeMixed<NumberProp>;
   height?: UnsafeMixed<NumberProp>;
   width?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGForeignObject', {

src/fabric/GroupNativeComponent.ts

@@ -1,6 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ColorValue } from 'react-native';
 import type {
+  DirectEventHandler,
   Float,
   Int32,
   WithDefault,
@@ -31,6 +32,15 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  layout: {
+    x: Int32;
+    y: Int32;
+    width: Int32;
+    height: Int32;
+  };
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -59,7 +69,9 @@ interface NativeProps
   extends ViewProps,
     SvgNodeCommonProps,
     SvgRenderableCommonProps,
-    SvgGroupCommonProps {}
+    SvgGroupCommonProps {
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
+}
 
 export default codegenNativeComponent<NativeProps>('RNSVGGroup', {
   interfaceOnly: true,