feat: add onSvgLayout event to native components

Kacper Żółkiewski · Kacper Żółkiewski · commit c7b03117eaa6 · 2025-08-12T10:32:27.000+02:00
diff --git a/android/src/main/java/com/horcrux/svg/RenderableView.java b/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.-]+");
diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java
@@ -589,6 +589,16 @@ class RenderableViewManager<T extends RenderableView> extends VirtualViewManager
     super(svgclass);
   }
 
+  public Map getExportedCustomBubblingEventTypeConstants() {
+    return MapBuilder.builder().put(
+        "topSvgLayout",
+        MapBuilder.of(
+            "phasedRegistrationNames",
+            MapBuilder.of("bubbled", "onSvgLayout")
+        )
+    ).build();
+  }
+
   static class GroupViewManagerAbstract<U extends GroupView> extends RenderableViewManager<U> {
     GroupViewManagerAbstract(SVGClass svgClass) {
       super(svgClass);
diff --git a/android/src/main/java/com/horcrux/svg/events/SvgOnLayoutEvent.java b/android/src/main/java/com/horcrux/svg/events/SvgOnLayoutEvent.java
@@ -6,11 +6,10 @@
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.events.Event;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 public class SvgOnLayoutEvent extends Event<SvgOnLayoutEvent> {
 
-  public static final String EVENT_NAME = "topLayout";
+  public static final String EVENT_NAME = "topSvgLayout";
   public int x = 0;
   public int y = 0;
   public int width = 0;
@@ -34,11 +33,6 @@ public short getCoalescingKey() {
     return 0;
   }
 
-  @Override
-  public void dispatch(RCTEventEmitter rctEventEmitter) {
-    rctEventEmitter.receiveEvent(getViewTag(), getEventName(), getEventData());
-  }
-
   @Override
   protected WritableMap getEventData() {
     WritableMap layout = Arguments.createMap();
diff --git a/src/fabric/CircleNativeComponent.ts b/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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -56,6 +64,7 @@ interface NativeProps
   cx?: UnsafeMixed<NumberProp>;
   cy?: UnsafeMixed<NumberProp>;
   r?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGCircle', {
diff --git a/src/fabric/ClipPathNativeComponent.ts b/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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -59,7 +67,9 @@ interface NativeProps
   extends ViewProps,
     SvgNodeCommonProps,
     SvgRenderableCommonProps,
-    SvgGroupCommonProps {}
+    SvgGroupCommonProps {
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
+}
 
 export default codegenNativeComponent<NativeProps>('RNSVGClipPath', {
   interfaceOnly: true,
diff --git a/src/fabric/EllipseNativeComponent.ts b/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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -57,6 +65,7 @@ interface NativeProps
   cy?: UnsafeMixed<NumberProp>;
   rx?: UnsafeMixed<NumberProp>;
   ry?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGEllipse', {
diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -64,6 +72,7 @@ interface NativeProps
   y?: UnsafeMixed<NumberProp>;
   height?: UnsafeMixed<NumberProp>;
   width?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGForeignObject', {
diff --git a/src/fabric/GroupNativeComponent.ts b/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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -59,7 +67,9 @@ interface NativeProps
   extends ViewProps,
     SvgNodeCommonProps,
     SvgRenderableCommonProps,
-    SvgGroupCommonProps {}
+    SvgGroupCommonProps {
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
+}
 
 export default codegenNativeComponent<NativeProps>('RNSVGGroup', {
   interfaceOnly: true,
diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts
@@ -44,6 +44,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -74,6 +81,7 @@ interface NativeProps
   align?: string;
   meetOrSlice?: Int32;
   onLoad?: DirectEventHandler<ImageLoadEventData>;
+  onLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGImage', {
diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -57,6 +65,7 @@ interface NativeProps
   y1?: UnsafeMixed<NumberProp>;
   x2?: UnsafeMixed<NumberProp>;
   y2?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGLine', {
diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -67,6 +75,7 @@ interface NativeProps
   maskUnits?: Int32;
   maskContentUnits?: Int32;
   maskType?: Int32;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGMask', {
diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -54,6 +62,7 @@ interface NativeProps
     SvgNodeCommonProps,
     SvgRenderableCommonProps {
   d?: string;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGPath', {
diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.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,13 @@ type ColorStruct = Readonly<{
   brushRef?: string;
 }>;
 
+type OnSvgLayoutEvent = Readonly<{
+  x: Int32;
+  y: Int32;
+  width: Int32;
+  height: Int32;
+}>;
+
 interface SvgRenderableCommonProps {
   color?: ColorValue;
   fill?: UnsafeMixed<ColorValue | ColorStruct>;
@@ -59,6 +67,7 @@ interface NativeProps
   width?: UnsafeMixed<NumberProp>;
   rx?: UnsafeMixed<NumberProp>;
   ry?: UnsafeMixed<NumberProp>;
+  onSvgLayout?: DirectEventHandler<OnSvgLayoutEvent>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGRect', {
diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts
diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts
diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts
diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts
diff --git a/src/lib/extract/extractProps.ts b/src/lib/extract/extractProps.ts
diff --git a/src/lib/extract/types.ts b/src/lib/extract/types.ts
