From 7f93d84dbc3b9820c651a79fd8913d905436305c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Wed, 13 Aug 2025 14:59:02 +0200 Subject: [PATCH 01/11] feat: provide transform prop directly to native components --- src/elements/Circle.tsx | 6 +++++- src/elements/Ellipse.tsx | 7 ++++++- src/elements/ForeignObject.tsx | 10 ++++++++-- src/elements/G.tsx | 13 ++++++++++--- src/elements/Image.tsx | 8 +++++++- src/elements/Line.tsx | 7 ++++++- src/elements/Mask.tsx | 10 ++++++++-- src/elements/Path.tsx | 6 +++++- src/elements/Pattern.tsx | 13 ++++++++----- src/elements/Rect.tsx | 8 +++++++- src/elements/TSpan.tsx | 14 +++++++++----- src/elements/Text.tsx | 15 ++++++++++----- src/elements/Use.tsx | 10 ++++++++-- 13 files changed, 97 insertions(+), 30 deletions(-) diff --git a/src/elements/Circle.tsx b/src/elements/Circle.tsx index c3a242c6f..bc4409f15 100644 --- a/src/elements/Circle.tsx +++ b/src/elements/Circle.tsx @@ -4,6 +4,7 @@ import type { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGCircle from '../fabric/CircleNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface CircleProps extends CommonPathProps { cx?: NumberProp; @@ -24,12 +25,15 @@ export default class Circle extends Shape { render() { const { props } = this; const { cx, cy, r } = props; - const circleProps = { ...extract(this, props), cx, cy, r }; + const { matrix, ...circleProps } = { ...extract(this, props), cx, cy, r }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); return ( this.refMethod(ref as (Circle & NativeMethods) | null)} {...circleProps} + transform={transform} /> ); } diff --git a/src/elements/Ellipse.tsx b/src/elements/Ellipse.tsx index 218a190ca..88d6e6ef9 100644 --- a/src/elements/Ellipse.tsx +++ b/src/elements/Ellipse.tsx @@ -4,6 +4,7 @@ import type { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGEllipse from '../fabric/EllipseNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface EllipseProps extends CommonPathProps { cx?: NumberProp; @@ -26,17 +27,21 @@ export default class Ellipse extends Shape { render() { const { props } = this; const { cx, cy, rx, ry } = props; - const ellipseProps = { + const { matrix, ...ellipseProps } = { ...extract(this, props), cx, cy, rx, ry, }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (Ellipse & NativeMethods) | null)} {...ellipseProps} + transform={transform} /> ); } diff --git a/src/elements/ForeignObject.tsx b/src/elements/ForeignObject.tsx index 55f2de058..ae580362c 100644 --- a/src/elements/ForeignObject.tsx +++ b/src/elements/ForeignObject.tsx @@ -5,6 +5,7 @@ import type { NumberProp } from '../lib/extract/types'; import G from './G'; import RNSVGForeignObject from '../fabric/ForeignObjectNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface ForeignObjectProps { children?: ReactNode; @@ -28,13 +29,18 @@ export default class ForeignObject extends G { const { props } = this; const { x, y, width, height, children } = props; const foreignObjectProps = { x, y, width, height }; + const { matrix, ...extractedProps } = withoutXY(this, props); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (ForeignObject & NativeMethods) | null) } - {...withoutXY(this, props)} - {...foreignObjectProps}> + {...extractedProps} + {...foreignObjectProps} + transform={transform}> {children} ); diff --git a/src/elements/G.tsx b/src/elements/G.tsx index 602cde257..f6e0213f8 100644 --- a/src/elements/G.tsx +++ b/src/elements/G.tsx @@ -2,7 +2,9 @@ import type { ReactNode } from 'react'; import * as React from 'react'; import extractProps, { propsAndStyles } from '../lib/extract/extractProps'; import { extractFont } from '../lib/extract/extractText'; -import extractTransform from '../lib/extract/extractTransform'; +import extractTransform, { + extractTransformSvgView, +} from '../lib/extract/extractTransform'; import type { CommonPathProps, FontProps, @@ -36,15 +38,20 @@ export default class G

extends Shape { render() { const { props } = this; const prop = propsAndStyles(props); - const extractedProps = extractProps(prop, this); + const { matrix, ...extractedProps } = extractProps(prop, this); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + const font = extractFont(prop); if (hasProps(font)) { extractedProps.font = font; } + return ( this.refMethod(ref as (G

& NativeMethods) | null)} - {...extractedProps}> + {...extractedProps} + transform={transform}> {props.children} ); diff --git a/src/elements/Image.tsx b/src/elements/Image.tsx index c58e4974d..35694ee20 100644 --- a/src/elements/Image.tsx +++ b/src/elements/Image.tsx @@ -11,6 +11,7 @@ import { withoutXY } from '../lib/extract/extractProps'; import type { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGImage from '../fabric/ImageNativeComponent'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; const spacesRegExp = /\s+/; @@ -69,11 +70,16 @@ export default class SvgImage extends Shape { typeof href === 'string' ? { uri: href } : href ), }; + const { matrix, ...extractedProps } = withoutXY(this, props); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (SvgImage & NativeMethods) | null)} - {...withoutXY(this, props)} + {...extractedProps} {...imageProps} + transform={transform} /> ); } diff --git a/src/elements/Line.tsx b/src/elements/Line.tsx index dceea9b8a..67c67da41 100644 --- a/src/elements/Line.tsx +++ b/src/elements/Line.tsx @@ -4,6 +4,7 @@ import type { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGLine from '../fabric/LineNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface LineProps extends CommonPathProps { opacity?: NumberProp; @@ -26,17 +27,21 @@ export default class Line extends Shape { render() { const { props } = this; const { x1, y1, x2, y2 } = props; - const lineProps = { + const { matrix, ...lineProps } = { ...extract(this, props), x1, y1, x2, y2, }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (Line & NativeMethods) | null)} {...lineProps} + transform={transform} /> ); } diff --git a/src/elements/Mask.tsx b/src/elements/Mask.tsx index fe0eeb791..2c2979aa6 100644 --- a/src/elements/Mask.tsx +++ b/src/elements/Mask.tsx @@ -12,6 +12,7 @@ import Shape from './Shape'; import RNSVGMask from '../fabric/MaskNativeComponent'; import type { NativeMethods } from 'react-native'; import { maskType } from '../lib/maskType'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface MaskProps extends CommonPathProps { children?: ReactNode; @@ -60,11 +61,16 @@ export default class Mask extends Shape { maskContentUnits !== undefined ? units[maskContentUnits] : 1, maskType: maskType[props?.maskType || style?.maskType || 'luminance'], }; + const { matrix, ...extractedProps } = withoutXY(this, props); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (Mask & NativeMethods) | null)} - {...withoutXY(this, props)} - {...maskProps}> + {...extractedProps} + {...maskProps} + transform={transform}> {children} ); diff --git a/src/elements/Path.tsx b/src/elements/Path.tsx index ff2ab707b..a27beff39 100644 --- a/src/elements/Path.tsx +++ b/src/elements/Path.tsx @@ -4,6 +4,7 @@ import Shape from './Shape'; import RNSVGPath from '../fabric/PathNativeComponent'; import type { CommonPathProps, NumberProp } from '../lib/extract/types'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface PathProps extends CommonPathProps { d?: string; @@ -16,12 +17,15 @@ export default class Path extends Shape { render() { const { props } = this; const { d } = props; - const pathProps = { ...extract(this, props), d }; + const { matrix, ...pathProps } = { ...extract(this, props), d }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); return ( this.refMethod(ref as (Path & NativeMethods) | null)} {...pathProps} + transform={transform} /> ); } diff --git a/src/elements/Pattern.tsx b/src/elements/Pattern.tsx index 8af7d542b..8557e7da6 100644 --- a/src/elements/Pattern.tsx +++ b/src/elements/Pattern.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; import * as React from 'react'; -import extractTransform from '../lib/extract/extractTransform'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; import extractViewBox from '../lib/extract/extractViewBox'; import type { NumberProp, TransformProps, Units } from '../lib/extract/types'; import units from '../lib/units'; @@ -48,23 +48,26 @@ export default class Pattern extends Shape { viewBox, preserveAspectRatio, } = props; - const matrix = extractTransform(patternTransform || transform || props); const patternProps = { x, y, width, height, name: id, - matrix, - patternTransform: matrix, patternUnits: (patternUnits && units[patternUnits]) || 0, patternContentUnits: patternContentUnits ? units[patternContentUnits] : 1, }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const nativeTransform = extractTransformSvgView({ + transform: patternTransform || transform, + } as any); + return ( this.refMethod(ref as (Pattern & NativeMethods) | null)} {...patternProps} - {...extractViewBox({ viewBox, preserveAspectRatio })}> + {...extractViewBox({ viewBox, preserveAspectRatio })} + transform={nativeTransform}> {children} ); diff --git a/src/elements/Rect.tsx b/src/elements/Rect.tsx index b97320e49..6677bf63f 100644 --- a/src/elements/Rect.tsx +++ b/src/elements/Rect.tsx @@ -4,6 +4,7 @@ import type { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGRect from '../fabric/RectNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface RectProps extends CommonPathProps { x?: NumberProp; @@ -29,11 +30,16 @@ export default class Rect extends Shape { const { props } = this; const { x, y, width, height, rx, ry } = props; const rectProps = { x, y, width, height, rx, ry }; + const { matrix, ...extractedProps } = withoutXY(this, props); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (Rect & NativeMethods) | null)} - {...withoutXY(this, props)} + {...extractedProps} {...rectProps} + transform={transform} /> ); } diff --git a/src/elements/TSpan.tsx b/src/elements/TSpan.tsx index 0c06568fb..f00a96107 100644 --- a/src/elements/TSpan.tsx +++ b/src/elements/TSpan.tsx @@ -1,7 +1,9 @@ import type { Component } from 'react'; import * as React from 'react'; import extractProps, { propsAndStyles } from '../lib/extract/extractProps'; -import extractTransform from '../lib/extract/extractTransform'; +import extractTransform, { + extractTransformSvgView, +} from '../lib/extract/extractTransform'; import type { TextChild } from '../lib/extract/extractText'; import extractText, { setTSpan } from '../lib/extract/extractText'; import { pickNotNil } from '../lib/util'; @@ -45,7 +47,7 @@ export default class TSpan extends Shape { render() { const prop = propsAndStyles(this.props); - const props = extractProps( + const { matrix, ...extractedProps } = extractProps( { ...prop, x: null, @@ -53,9 +55,11 @@ export default class TSpan extends Shape { }, this ); - Object.assign(props, extractText(prop, false)); - props.ref = this.refMethod as (instance: Component | null) => void; - return ; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(this.props as any); + Object.assign(extractedProps, extractText(prop, false)); + extractedProps.ref = this.refMethod as (instance: Component | null) => void; + return ; } } diff --git a/src/elements/Text.tsx b/src/elements/Text.tsx index 164c0310d..e462edcd6 100644 --- a/src/elements/Text.tsx +++ b/src/elements/Text.tsx @@ -2,7 +2,9 @@ import type { Component, ReactNode } from 'react'; import * as React from 'react'; import extractText from '../lib/extract/extractText'; import extractProps, { propsAndStyles } from '../lib/extract/extractProps'; -import extractTransform from '../lib/extract/extractTransform'; +import extractTransform, { + extractTransformSvgView, +} from '../lib/extract/extractTransform'; import type { ColumnMajorTransformMatrix, NumberArray, @@ -45,7 +47,7 @@ export default class Text extends Shape { render() { const prop = propsAndStyles(this.props); - const props = extractProps( + const { matrix, ...extractedProps } = extractProps( { ...prop, x: null, @@ -53,8 +55,11 @@ export default class Text extends Shape { }, this ); - Object.assign(props, extractText(prop, true)); - props.ref = this.refMethod as (instance: Component | null) => void; - return ; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(this.props as any); + + Object.assign(extractedProps, extractText(prop, true)); + extractedProps.ref = this.refMethod as (instance: Component | null) => void; + return ; } } diff --git a/src/elements/Use.tsx b/src/elements/Use.tsx index 35763ed10..4c8e9ebc2 100644 --- a/src/elements/Use.tsx +++ b/src/elements/Use.tsx @@ -6,6 +6,7 @@ import { idPattern } from '../lib/util'; import Shape from './Shape'; import RNSVGUse from '../fabric/UseNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface UseProps extends CommonPathProps { children?: ReactNode; @@ -57,11 +58,16 @@ export default class Use extends Shape { width, height, }; + const { matrix, ...extractedProps } = withoutXY(this, props); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( this.refMethod(ref as (Use & NativeMethods) | null)} - {...withoutXY(this, props)} - {...useProps}> + {...extractedProps} + {...useProps} + transform={transform}> {children} ); From 4457dac66201f4ab94843f94a117bc5fb2f4e9a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Wed, 13 Aug 2025 15:45:52 +0200 Subject: [PATCH 02/11] feat: provide transform prop directly to native gradient components --- src/elements/LinearGradient.tsx | 22 +++++++++++++++++++++- src/elements/RadialGradient.tsx | 23 ++++++++++++++++++++++- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/src/elements/LinearGradient.tsx b/src/elements/LinearGradient.tsx index aa05fdb55..99b5aafa0 100644 --- a/src/elements/LinearGradient.tsx +++ b/src/elements/LinearGradient.tsx @@ -5,6 +5,7 @@ import type { NumberProp, TransformProps, Units } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGLinearGradient from '../fabric/LinearGradientNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface LinearGradientProps { children?: ReactElement[]; @@ -31,13 +32,32 @@ export default class LinearGradient extends Shape { const { props } = this; const { x1, y1, x2, y2 } = props; const linearGradientProps = { x1, y1, x2, y2 }; + const gradientProps = extractGradient(props, this); + + if (gradientProps) { + const { gradientTransform, ...extractedProps } = gradientProps; + const transform = extractTransformSvgView({ + transform: props.gradientTransform, + } as any); + + return ( + + this.refMethod(ref as (LinearGradient & NativeMethods) | null) + } + {...linearGradientProps} + {...extractedProps} + transform={transform} + /> + ); + } + return ( this.refMethod(ref as (LinearGradient & NativeMethods) | null) } {...linearGradientProps} - {...extractGradient(props, this)} /> ); } diff --git a/src/elements/RadialGradient.tsx b/src/elements/RadialGradient.tsx index d79ac0b78..34486f6ee 100644 --- a/src/elements/RadialGradient.tsx +++ b/src/elements/RadialGradient.tsx @@ -5,6 +5,7 @@ import type { NumberProp, TransformProps, Units } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGRadialGradient from '../fabric/RadialGradientNativeComponent'; import type { NativeMethods } from 'react-native'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface RadialGradientProps { children?: ReactElement[]; @@ -40,13 +41,33 @@ export default class RadialGradient extends Shape { cx, cy, }; + const gradientProps = extractGradient(props, this); + + if (gradientProps) { + const { gradientTransform, ...extractedProps } = gradientProps; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView({ + transform: props.gradientTransform, + } as any); + + return ( + + this.refMethod(ref as (RadialGradient & NativeMethods) | null) + } + {...radialGradientProps} + {...extractedProps} + transform={transform} + /> + ); + } + return ( this.refMethod(ref as (RadialGradient & NativeMethods) | null) } {...radialGradientProps} - {...extractGradient(props, this)} /> ); } From 90da9e2c349d040599d82c51afdbe320e495d2fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 14 Aug 2025 09:17:43 +0200 Subject: [PATCH 03/11] fix: adding transform array prop into transform matrix --- src/elements/LinearGradient.tsx | 1 + src/lib/extract/extractTransform.ts | 73 ++++++++++++++++++++--------- src/web/utils/parseTransform.ts | 6 +-- 3 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/elements/LinearGradient.tsx b/src/elements/LinearGradient.tsx index 99b5aafa0..abfd729ec 100644 --- a/src/elements/LinearGradient.tsx +++ b/src/elements/LinearGradient.tsx @@ -36,6 +36,7 @@ export default class LinearGradient extends Shape { if (gradientProps) { const { gradientTransform, ...extractedProps } = gradientProps; + // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView({ transform: props.gradientTransform, } as any); diff --git a/src/lib/extract/extractTransform.ts b/src/lib/extract/extractTransform.ts index 3a42a5bd0..f28ab766c 100644 --- a/src/lib/extract/extractTransform.ts +++ b/src/lib/extract/extractTransform.ts @@ -70,25 +70,6 @@ function universal2axis( return [x || defaultValue || 0, y || defaultValue || 0]; } -export function transformsArrayToProps( - transformObjectsArray: TransformsStyleArray -) { - const props: TransformProps = {}; - transformObjectsArray?.forEach((transformObject) => { - const keys = Object.keys(transformObject); - if (keys.length !== 1) { - console.error( - 'You must specify exactly one property per transform object.' - ); - } - const key = keys[0] as keyof TransformProps; - const value = transformObject[key as keyof typeof transformObject]; - // @ts-expect-error FIXME - props[key] = value; - }); - return props; -} - export function props2transform( props: TransformProps | undefined ): TransformedProps | null { @@ -182,11 +163,13 @@ export function transformToMatrix( columnMatrix[5] ); } else { - const transformProps = props2transform( + const stringifiedTransform = stringifyTransformArrayProps( // @ts-expect-error FIXME - transformsArrayToProps(transform as TransformsStyleArray) - ); - transformProps && appendTransformProps(transformProps); + transform as TransformsStyleArray + ).join(' '); + + const t = parse(stringifiedTransform); + append(t[0], t[3], t[1], t[4], t[2], t[5]); } } else if (typeof transform === 'string') { try { @@ -237,3 +220,47 @@ export function extractTransformSvgView( } return props.transform as TransformsStyle['transform']; } + +export function stringifyTransformArrayProps( + transformArray: TransformsStyleArray +) { + const getAngleValueInDeg = (angle: string) => { + if (angle.endsWith('rad')) { + return parseFloat(angle) * (180 / Math.PI); + } + if (angle.endsWith('deg')) { + return parseFloat(angle); + } + }; + + if (!transformArray) { + return []; + } + + return transformArray.map((transform) => { + const [key, value] = Object.entries(transform)[0]; + switch (key) { + case 'translateX': + return `translate(${value}, 0)`; + case 'translateY': + return `translate(0, ${value})`; + case 'rotate': + const rotation = getAngleValueInDeg(value); + return `rotate(${rotation})`; + case 'scale': + return `scale(${value})`; + case 'scaleX': + return `scale(${value}, 1)`; + case 'scaleY': + return `scale(1, ${value})`; + case 'skewX': + const skewX = getAngleValueInDeg(value); + return `skewX(${skewX})`; + case 'skewY': + const skewY = getAngleValueInDeg(value); + return `skewY(${skewY})`; + default: + return ''; + } + }); +} diff --git a/src/web/utils/parseTransform.ts b/src/web/utils/parseTransform.ts index 7fdd0170e..483d6bafe 100644 --- a/src/web/utils/parseTransform.ts +++ b/src/web/utils/parseTransform.ts @@ -1,6 +1,6 @@ import type { TransformProps } from '../../lib/extract/types'; import { - transformsArrayToProps, + stringifyTransformArrayProps, TransformsStyleArray, } from '../../lib/extract/extractTransform'; import type { BaseProps } from '../types'; @@ -17,11 +17,11 @@ export function parseTransformProp( if (typeof transform[0] === 'number') { transformArray.push(`matrix(${transform.join(' ')})`); } else { - const stringifiedProps = transformsArrayToProps( + const stringifiedProps = stringifyTransformArrayProps( // @ts-expect-error FIXME transform as TransformsStyleArray ); - transformArray.push(...stringifyTransformProps(stringifiedProps)); + transformArray.push(...stringifiedProps); } } else if (typeof transform === 'string') { transformArray.push(transform); From a103f6eeb9bee2645e9c0939e99125e523b6fc1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 14 Aug 2025 12:01:53 +0200 Subject: [PATCH 04/11] fix: remove unused matrix property --- src/elements/Circle.tsx | 4 ++-- src/elements/ClipPath.tsx | 10 +++++++++- src/elements/Ellipse.tsx | 4 ++-- src/elements/ForeignObject.tsx | 4 ++-- src/elements/G.tsx | 4 ++-- src/elements/Image.tsx | 4 ++-- src/elements/Line.tsx | 4 ++-- src/elements/LinearGradient.tsx | 11 +++++------ src/elements/Mask.tsx | 4 ++-- src/elements/Path.tsx | 4 ++-- src/elements/Pattern.tsx | 4 ++-- src/elements/RadialGradient.tsx | 11 +++++------ src/elements/Rect.tsx | 4 ++-- src/elements/TSpan.tsx | 4 ++-- src/elements/Text.tsx | 4 ++-- src/elements/Use.tsx | 4 ++-- src/lib/extract/extractGradient.ts | 7 +------ src/lib/extract/extractProps.ts | 6 ------ src/lib/extract/extractTransform.ts | 11 ++++++++--- src/lib/extract/types.ts | 1 - 20 files changed, 54 insertions(+), 55 deletions(-) diff --git a/src/elements/Circle.tsx b/src/elements/Circle.tsx index bc4409f15..3c667bc57 100644 --- a/src/elements/Circle.tsx +++ b/src/elements/Circle.tsx @@ -25,7 +25,7 @@ export default class Circle extends Shape { render() { const { props } = this; const { cx, cy, r } = props; - const { matrix, ...circleProps } = { ...extract(this, props), cx, cy, r }; + const circleProps = { ...extract(this, props), cx, cy, r }; // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -33,7 +33,7 @@ export default class Circle extends Shape { this.refMethod(ref as (Circle & NativeMethods) | null)} {...circleProps} - transform={transform} + style={{ transform }} /> ); } diff --git a/src/elements/ClipPath.tsx b/src/elements/ClipPath.tsx index 7877ae42f..98d0b4060 100644 --- a/src/elements/ClipPath.tsx +++ b/src/elements/ClipPath.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { extract } from '../lib/extract/extractProps'; import Shape from './Shape'; import RNSVGClipPath from '../fabric/ClipPathNativeComponent'; +import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface ClipPathProps { children?: ReactNode; @@ -14,8 +15,15 @@ export default class ClipPath extends Shape { render() { const { props } = this; + const extractedProps = extract(this, props); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const transform = extractTransformSvgView(props as any); + return ( - + {props.children} ); diff --git a/src/elements/Ellipse.tsx b/src/elements/Ellipse.tsx index 88d6e6ef9..55ac340a6 100644 --- a/src/elements/Ellipse.tsx +++ b/src/elements/Ellipse.tsx @@ -27,7 +27,7 @@ export default class Ellipse extends Shape { render() { const { props } = this; const { cx, cy, rx, ry } = props; - const { matrix, ...ellipseProps } = { + const ellipseProps = { ...extract(this, props), cx, cy, @@ -41,7 +41,7 @@ export default class Ellipse extends Shape { this.refMethod(ref as (Ellipse & NativeMethods) | null)} {...ellipseProps} - transform={transform} + style={{ transform }} /> ); } diff --git a/src/elements/ForeignObject.tsx b/src/elements/ForeignObject.tsx index ae580362c..454486a5a 100644 --- a/src/elements/ForeignObject.tsx +++ b/src/elements/ForeignObject.tsx @@ -29,7 +29,7 @@ export default class ForeignObject extends G { const { props } = this; const { x, y, width, height, children } = props; const foreignObjectProps = { x, y, width, height }; - const { matrix, ...extractedProps } = withoutXY(this, props); + const extractedProps = withoutXY(this, props); // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -40,7 +40,7 @@ export default class ForeignObject extends G { } {...extractedProps} {...foreignObjectProps} - transform={transform}> + style={{ transform }}> {children} ); diff --git a/src/elements/G.tsx b/src/elements/G.tsx index f6e0213f8..59713731d 100644 --- a/src/elements/G.tsx +++ b/src/elements/G.tsx @@ -38,7 +38,7 @@ export default class G

extends Shape { render() { const { props } = this; const prop = propsAndStyles(props); - const { matrix, ...extractedProps } = extractProps(prop, this); + const extractedProps = extractProps(prop, this); // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -51,7 +51,7 @@ export default class G

extends Shape { this.refMethod(ref as (G

& NativeMethods) | null)} {...extractedProps} - transform={transform}> + style={{ transform }}> {props.children} ); diff --git a/src/elements/Image.tsx b/src/elements/Image.tsx index 35694ee20..de63ea223 100644 --- a/src/elements/Image.tsx +++ b/src/elements/Image.tsx @@ -70,7 +70,7 @@ export default class SvgImage extends Shape { typeof href === 'string' ? { uri: href } : href ), }; - const { matrix, ...extractedProps } = withoutXY(this, props); + const extractedProps = withoutXY(this, props); // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -79,7 +79,7 @@ export default class SvgImage extends Shape { ref={(ref) => this.refMethod(ref as (SvgImage & NativeMethods) | null)} {...extractedProps} {...imageProps} - transform={transform} + style={{ transform }} /> ); } diff --git a/src/elements/Line.tsx b/src/elements/Line.tsx index 67c67da41..4af6c3cc3 100644 --- a/src/elements/Line.tsx +++ b/src/elements/Line.tsx @@ -27,7 +27,7 @@ export default class Line extends Shape { render() { const { props } = this; const { x1, y1, x2, y2 } = props; - const { matrix, ...lineProps } = { + const lineProps = { ...extract(this, props), x1, y1, @@ -41,7 +41,7 @@ export default class Line extends Shape { this.refMethod(ref as (Line & NativeMethods) | null)} {...lineProps} - transform={transform} + style={{ transform }} /> ); } diff --git a/src/elements/LinearGradient.tsx b/src/elements/LinearGradient.tsx index abfd729ec..0c9e07550 100644 --- a/src/elements/LinearGradient.tsx +++ b/src/elements/LinearGradient.tsx @@ -30,15 +30,14 @@ export default class LinearGradient extends Shape { render() { const { props } = this; - const { x1, y1, x2, y2 } = props; + const { x1, y1, x2, y2, gradientTransform } = props; const linearGradientProps = { x1, y1, x2, y2 }; const gradientProps = extractGradient(props, this); if (gradientProps) { - const { gradientTransform, ...extractedProps } = gradientProps; - // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView({ - transform: props.gradientTransform, + transform: gradientTransform, + // eslint-disable-next-line @typescript-eslint/no-explicit-any } as any); return ( @@ -47,8 +46,8 @@ export default class LinearGradient extends Shape { this.refMethod(ref as (LinearGradient & NativeMethods) | null) } {...linearGradientProps} - {...extractedProps} - transform={transform} + {...gradientProps} + style={{ transform }} /> ); } diff --git a/src/elements/Mask.tsx b/src/elements/Mask.tsx index 2c2979aa6..ee98cda89 100644 --- a/src/elements/Mask.tsx +++ b/src/elements/Mask.tsx @@ -61,7 +61,7 @@ export default class Mask extends Shape { maskContentUnits !== undefined ? units[maskContentUnits] : 1, maskType: maskType[props?.maskType || style?.maskType || 'luminance'], }; - const { matrix, ...extractedProps } = withoutXY(this, props); + const extractedProps = withoutXY(this, props); // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -70,7 +70,7 @@ export default class Mask extends Shape { ref={(ref) => this.refMethod(ref as (Mask & NativeMethods) | null)} {...extractedProps} {...maskProps} - transform={transform}> + style={{ transform }}> {children} ); diff --git a/src/elements/Path.tsx b/src/elements/Path.tsx index a27beff39..6f67b18a7 100644 --- a/src/elements/Path.tsx +++ b/src/elements/Path.tsx @@ -17,7 +17,7 @@ export default class Path extends Shape { render() { const { props } = this; const { d } = props; - const { matrix, ...pathProps } = { ...extract(this, props), d }; + const pathProps = { ...extract(this, props), d }; // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -25,7 +25,7 @@ export default class Path extends Shape { this.refMethod(ref as (Path & NativeMethods) | null)} {...pathProps} - transform={transform} + style={{ transform }} /> ); } diff --git a/src/elements/Pattern.tsx b/src/elements/Pattern.tsx index 8557e7da6..56247d7db 100644 --- a/src/elements/Pattern.tsx +++ b/src/elements/Pattern.tsx @@ -57,9 +57,9 @@ export default class Pattern extends Shape { patternUnits: (patternUnits && units[patternUnits]) || 0, patternContentUnits: patternContentUnits ? units[patternContentUnits] : 1, }; - // eslint-disable-next-line @typescript-eslint/no-explicit-any const nativeTransform = extractTransformSvgView({ transform: patternTransform || transform, + // eslint-disable-next-line @typescript-eslint/no-explicit-any } as any); return ( @@ -67,7 +67,7 @@ export default class Pattern extends Shape { ref={(ref) => this.refMethod(ref as (Pattern & NativeMethods) | null)} {...patternProps} {...extractViewBox({ viewBox, preserveAspectRatio })} - transform={nativeTransform}> + style={{ transform: nativeTransform }}> {children} ); diff --git a/src/elements/RadialGradient.tsx b/src/elements/RadialGradient.tsx index 34486f6ee..19ed9cc46 100644 --- a/src/elements/RadialGradient.tsx +++ b/src/elements/RadialGradient.tsx @@ -32,7 +32,7 @@ export default class RadialGradient extends Shape { render() { const { props } = this; - const { rx, ry, r, cx, cy, fx = cx, fy = cy } = props; + const { rx, ry, r, cx, cy, fx = cx, fy = cy, gradientTransform } = props; const radialGradientProps = { fx, fy, @@ -44,10 +44,9 @@ export default class RadialGradient extends Shape { const gradientProps = extractGradient(props, this); if (gradientProps) { - const { gradientTransform, ...extractedProps } = gradientProps; - // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView({ - transform: props.gradientTransform, + transform: gradientTransform, + // eslint-disable-next-line @typescript-eslint/no-explicit-any } as any); return ( @@ -56,8 +55,8 @@ export default class RadialGradient extends Shape { this.refMethod(ref as (RadialGradient & NativeMethods) | null) } {...radialGradientProps} - {...extractedProps} - transform={transform} + {...gradientProps} + style={{ transform }} /> ); } diff --git a/src/elements/Rect.tsx b/src/elements/Rect.tsx index 6677bf63f..89ec27adf 100644 --- a/src/elements/Rect.tsx +++ b/src/elements/Rect.tsx @@ -30,7 +30,7 @@ export default class Rect extends Shape { const { props } = this; const { x, y, width, height, rx, ry } = props; const rectProps = { x, y, width, height, rx, ry }; - const { matrix, ...extractedProps } = withoutXY(this, props); + const extractedProps = withoutXY(this, props); // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -39,7 +39,7 @@ export default class Rect extends Shape { ref={(ref) => this.refMethod(ref as (Rect & NativeMethods) | null)} {...extractedProps} {...rectProps} - transform={transform} + style={{ transform }} /> ); } diff --git a/src/elements/TSpan.tsx b/src/elements/TSpan.tsx index f00a96107..dc80f6e69 100644 --- a/src/elements/TSpan.tsx +++ b/src/elements/TSpan.tsx @@ -47,7 +47,7 @@ export default class TSpan extends Shape { render() { const prop = propsAndStyles(this.props); - const { matrix, ...extractedProps } = extractProps( + const extractedProps = extractProps( { ...prop, x: null, @@ -59,7 +59,7 @@ export default class TSpan extends Shape { const transform = extractTransformSvgView(this.props as any); Object.assign(extractedProps, extractText(prop, false)); extractedProps.ref = this.refMethod as (instance: Component | null) => void; - return ; + return ; } } diff --git a/src/elements/Text.tsx b/src/elements/Text.tsx index e462edcd6..7eb1631c6 100644 --- a/src/elements/Text.tsx +++ b/src/elements/Text.tsx @@ -47,7 +47,7 @@ export default class Text extends Shape { render() { const prop = propsAndStyles(this.props); - const { matrix, ...extractedProps } = extractProps( + const extractedProps = extractProps( { ...prop, x: null, @@ -60,6 +60,6 @@ export default class Text extends Shape { Object.assign(extractedProps, extractText(prop, true)); extractedProps.ref = this.refMethod as (instance: Component | null) => void; - return ; + return ; } } diff --git a/src/elements/Use.tsx b/src/elements/Use.tsx index 4c8e9ebc2..158f9523a 100644 --- a/src/elements/Use.tsx +++ b/src/elements/Use.tsx @@ -58,7 +58,7 @@ export default class Use extends Shape { width, height, }; - const { matrix, ...extractedProps } = withoutXY(this, props); + const extractedProps = withoutXY(this, props); // eslint-disable-next-line @typescript-eslint/no-explicit-any const transform = extractTransformSvgView(props as any); @@ -67,7 +67,7 @@ export default class Use extends Shape { ref={(ref) => this.refMethod(ref as (Use & NativeMethods) | null)} {...extractedProps} {...useProps} - transform={transform}> + style={{ transform }}> {children} ); diff --git a/src/lib/extract/extractGradient.ts b/src/lib/extract/extractGradient.ts index 42e6f4af0..dea19b114 100644 --- a/src/lib/extract/extractGradient.ts +++ b/src/lib/extract/extractGradient.ts @@ -4,7 +4,6 @@ import { Children } from 'react'; import { processColor } from 'react-native'; import extractOpacity from './extractOpacity'; -import extractTransform from './extractTransform'; import type { TransformProps } from './types'; import units from '../units'; @@ -44,12 +43,11 @@ export default function extractGradient( id?: string; children?: ReactElement[]; transform?: TransformProps['transform']; - gradientTransform?: TransformProps['transform']; gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse'; } & TransformProps, parent: unknown ) { - const { id, children, gradientTransform, transform, gradientUnits } = props; + const { id, children, gradientUnits } = props; if (!id) { return null; } @@ -97,8 +95,5 @@ export default function extractGradient( gradient, children: childArray, gradientUnits: (gradientUnits && units[gradientUnits]) || 0, - gradientTransform: extractTransform( - gradientTransform || transform || props - ), }; } diff --git a/src/lib/extract/extractProps.ts b/src/lib/extract/extractProps.ts index df192fa49..741ef8095 100644 --- a/src/lib/extract/extractProps.ts +++ b/src/lib/extract/extractProps.ts @@ -1,6 +1,5 @@ import extractFill from './extractFill'; import extractStroke from './extractStroke'; -import extractTransform from './extractTransform'; import extractResponder from './extractResponder'; import extractOpacity from './extractOpacity'; import { idPattern } from '../util'; @@ -94,11 +93,6 @@ export default function extractProps( extracted.propList = inherited; } - const matrix = extractTransform(props); - if (matrix !== null) { - extracted.matrix = matrix; - } - if (opacity != null) { extracted.opacity = extractOpacity(opacity); } diff --git a/src/lib/extract/extractTransform.ts b/src/lib/extract/extractTransform.ts index f28ab766c..db79c11fd 100644 --- a/src/lib/extract/extractTransform.ts +++ b/src/lib/extract/extractTransform.ts @@ -244,21 +244,26 @@ export function stringifyTransformArrayProps( return `translate(${value}, 0)`; case 'translateY': return `translate(0, ${value})`; - case 'rotate': + case 'rotate': { const rotation = getAngleValueInDeg(value); return `rotate(${rotation})`; + } case 'scale': return `scale(${value})`; case 'scaleX': return `scale(${value}, 1)`; case 'scaleY': return `scale(1, ${value})`; - case 'skewX': + case 'skewX': { const skewX = getAngleValueInDeg(value); return `skewX(${skewX})`; - case 'skewY': + } + case 'skewY': { const skewY = getAngleValueInDeg(value); return `skewY(${skewY})`; + } + case 'matrix': + return `matrix(${value.join(', ')})`; default: return ''; } diff --git a/src/lib/extract/types.ts b/src/lib/extract/types.ts index fdf4c5622..ceca915ec 100644 --- a/src/lib/extract/types.ts +++ b/src/lib/extract/types.ts @@ -347,7 +347,6 @@ export type extractedProps = { name?: string; mask?: string; opacity?: number; - matrix?: number[]; propList?: string[]; onLayout?: (event: LayoutChangeEvent) => void; ref?: (instance: React.Component | null) => void; From 56df49058db26a06753e663baf455fac23648d4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 14 Aug 2025 12:15:23 +0200 Subject: [PATCH 05/11] fix: remove unused matrix property from codegen types --- src/fabric/CircleNativeComponent.ts | 1 - src/fabric/ClipPathNativeComponent.ts | 1 - src/fabric/EllipseNativeComponent.ts | 1 - src/fabric/ForeignObjectNativeComponent.ts | 1 - src/fabric/GroupNativeComponent.ts | 1 - src/fabric/ImageNativeComponent.ts | 1 - src/fabric/LineNativeComponent.ts | 1 - src/fabric/LinearGradientNativeComponent.ts | 1 - src/fabric/MarkerNativeComponent.ts | 1 - src/fabric/MaskNativeComponent.ts | 1 - src/fabric/PathNativeComponent.ts | 1 - src/fabric/PatternNativeComponent.ts | 1 - src/fabric/RadialGradientNativeComponent.ts | 1 - src/fabric/RectNativeComponent.ts | 1 - src/fabric/SymbolNativeComponent.ts | 1 - src/fabric/TSpanNativeComponent.ts | 1 - src/fabric/TextNativeComponent.ts | 1 - src/fabric/TextPathNativeComponent.ts | 1 - src/fabric/UseNativeComponent.ts | 1 - 19 files changed, 19 deletions(-) diff --git a/src/fabric/CircleNativeComponent.ts b/src/fabric/CircleNativeComponent.ts index 09ec6df5e..575f08873 100644 --- a/src/fabric/CircleNativeComponent.ts +++ b/src/fabric/CircleNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/ClipPathNativeComponent.ts b/src/fabric/ClipPathNativeComponent.ts index d9c79ca4d..ced036f34 100644 --- a/src/fabric/ClipPathNativeComponent.ts +++ b/src/fabric/ClipPathNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/EllipseNativeComponent.ts b/src/fabric/EllipseNativeComponent.ts index 4773f8316..d52ad51b1 100644 --- a/src/fabric/EllipseNativeComponent.ts +++ b/src/fabric/EllipseNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts index 2acdb0342..a6fc7ab7e 100644 --- a/src/fabric/ForeignObjectNativeComponent.ts +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp, FontObject } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/GroupNativeComponent.ts b/src/fabric/GroupNativeComponent.ts index d509b8440..9f820eab5 100644 --- a/src/fabric/GroupNativeComponent.ts +++ b/src/fabric/GroupNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts index 77226f8c2..2cb2e26b2 100644 --- a/src/fabric/ImageNativeComponent.ts +++ b/src/fabric/ImageNativeComponent.ts @@ -26,7 +26,6 @@ export type ImageLoadEventData = { interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.ts index ab0e45add..c4d40a6e7 100644 --- a/src/fabric/LineNativeComponent.ts +++ b/src/fabric/LineNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts index 7b1d39c61..18df44c52 100644 --- a/src/fabric/LinearGradientNativeComponent.ts +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -12,7 +12,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/MarkerNativeComponent.ts b/src/fabric/MarkerNativeComponent.ts index a258d4571..9fde9d615 100644 --- a/src/fabric/MarkerNativeComponent.ts +++ b/src/fabric/MarkerNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.ts index dac11a35f..ccb1b5aeb 100644 --- a/src/fabric/MaskNativeComponent.ts +++ b/src/fabric/MaskNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.ts index 5520ae183..145e84665 100644 --- a/src/fabric/PathNativeComponent.ts +++ b/src/fabric/PathNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/PatternNativeComponent.ts b/src/fabric/PatternNativeComponent.ts index 014458a78..c9df514e9 100644 --- a/src/fabric/PatternNativeComponent.ts +++ b/src/fabric/PatternNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray | null; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts index 52409b049..8cd0991bf 100644 --- a/src/fabric/RadialGradientNativeComponent.ts +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -12,7 +12,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.ts index 9d8f37ba0..49cd0584a 100644 --- a/src/fabric/RectNativeComponent.ts +++ b/src/fabric/RectNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/SymbolNativeComponent.ts b/src/fabric/SymbolNativeComponent.ts index dde02a57b..4540d15e2 100644 --- a/src/fabric/SymbolNativeComponent.ts +++ b/src/fabric/SymbolNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts index 1e85f40bf..39c8033e4 100644 --- a/src/fabric/TSpanNativeComponent.ts +++ b/src/fabric/TSpanNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberArray, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts index 539b228b9..a1971728a 100644 --- a/src/fabric/TextNativeComponent.ts +++ b/src/fabric/TextNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberArray, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts index e6d630766..9871a03de 100644 --- a/src/fabric/TextPathNativeComponent.ts +++ b/src/fabric/TextPathNativeComponent.ts @@ -13,7 +13,6 @@ import { FontObject, NumberArray, NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts index e1e01bb53..9b8023330 100644 --- a/src/fabric/UseNativeComponent.ts +++ b/src/fabric/UseNativeComponent.ts @@ -13,7 +13,6 @@ import { NumberProp } from '../lib/extract/types'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string; From 6f3be36ed96f5c1eba5b68e4f9910da164b02550 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 14 Aug 2025 12:28:55 +0200 Subject: [PATCH 06/11] fix: sync architectures --- .../react/viewmanagers/RNSVGCircleManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGCircleManagerInterface.java | 1 - .../react/viewmanagers/RNSVGClipPathManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGClipPathManagerInterface.java | 1 - .../react/viewmanagers/RNSVGEllipseManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGEllipseManagerInterface.java | 1 - .../viewmanagers/RNSVGForeignObjectManagerDelegate.java | 3 --- .../viewmanagers/RNSVGForeignObjectManagerInterface.java | 1 - .../react/viewmanagers/RNSVGGroupManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGGroupManagerInterface.java | 1 - .../react/viewmanagers/RNSVGImageManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGImageManagerInterface.java | 1 - .../react/viewmanagers/RNSVGLineManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGLineManagerInterface.java | 1 - .../viewmanagers/RNSVGLinearGradientManagerDelegate.java | 6 ------ .../viewmanagers/RNSVGLinearGradientManagerInterface.java | 2 -- .../react/viewmanagers/RNSVGMarkerManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGMarkerManagerInterface.java | 1 - .../react/viewmanagers/RNSVGMaskManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGMaskManagerInterface.java | 1 - .../react/viewmanagers/RNSVGPathManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGPathManagerInterface.java | 1 - .../react/viewmanagers/RNSVGPatternManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGPatternManagerInterface.java | 1 - .../viewmanagers/RNSVGRadialGradientManagerDelegate.java | 6 ------ .../viewmanagers/RNSVGRadialGradientManagerInterface.java | 2 -- .../react/viewmanagers/RNSVGRectManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGRectManagerInterface.java | 1 - .../react/viewmanagers/RNSVGSymbolManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGSymbolManagerInterface.java | 1 - .../react/viewmanagers/RNSVGTSpanManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGTSpanManagerInterface.java | 1 - .../react/viewmanagers/RNSVGTextManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGTextManagerInterface.java | 1 - .../react/viewmanagers/RNSVGTextPathManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGTextPathManagerInterface.java | 1 - .../react/viewmanagers/RNSVGUseManagerDelegate.java | 3 --- .../react/viewmanagers/RNSVGUseManagerInterface.java | 1 - src/fabric/LinearGradientNativeComponent.ts | 1 - src/fabric/RadialGradientNativeComponent.ts | 1 - 40 files changed, 86 deletions(-) diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java index b8620b573..7176771dc 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java index 4e6761085..f7a806f94 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGCircleManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGCircleManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java index deef4310c..0ebd2d456 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java index dcde7e4e3..8c281fb3f 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGClipPathManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGClipPathManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java index ed43295b6..5ae583fab 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java index e3335fda0..337837107 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGEllipseManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGEllipseManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java index d87bf7c3e..180edfbe5 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java index a8aef1412..4bb84188a 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGForeignObjectManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGForeignObjectManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java index 47b0a7fc2..bcdf037e4 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java index 79dab3a2b..3fbb0c0f4 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGGroupManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGGroupManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java index 376589d11..d8d6303b5 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerDelegate.java @@ -32,9 +32,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java index 8e9ee1c3d..fac7c71d0 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGImageManagerInterface.java @@ -18,7 +18,6 @@ public interface RNSVGImageManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java index 6bec1efce..91d9642ec 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java index 53cedba38..b1d8a7c19 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLineManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGLineManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java index 4bcb2e198..56fab4d7c 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java @@ -30,9 +30,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; @@ -78,9 +75,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "gradientUnits": mViewManager.setGradientUnits(view, value == null ? 0 : ((Double) value).intValue()); break; - case "gradientTransform": - mViewManager.setGradientTransform(view, (ReadableArray) value); - break; default: super.setProperty(view, propName, value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java index 8da9270c2..39065a1d0 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGLinearGradientManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); @@ -33,5 +32,4 @@ public interface RNSVGLinearGradientManagerInterface { void setY2(T view, Dynamic value); void setGradient(T view, @Nullable ReadableArray value); void setGradientUnits(T view, int value); - void setGradientTransform(T view, @Nullable ReadableArray value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java index 62c831ce6..685c0d7b0 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java index 9ff3cd098..573fc8ecb 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMarkerManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGMarkerManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java index 2106b6967..6080a254e 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerInterface.java index 3dfc74a2e..23d16b7ca 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGMaskManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGMaskManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java index fba480b1a..a90d79a87 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerInterface.java index 00484fbe9..e4f11ec0c 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPathManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGPathManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java index f2aa9f87b..3fe77f935 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerInterface.java index 01271d13e..ade5f43ca 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGPatternManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGPatternManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java index 38e0767fd..a83ad6ed1 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java @@ -30,9 +30,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; @@ -84,9 +81,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "gradientUnits": mViewManager.setGradientUnits(view, value == null ? 0 : ((Double) value).intValue()); break; - case "gradientTransform": - mViewManager.setGradientTransform(view, (ReadableArray) value); - break; default: super.setProperty(view, propName, value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java index e7994c055..469723ae1 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGRadialGradientManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); @@ -35,5 +34,4 @@ public interface RNSVGRadialGradientManagerInterface { void setRy(T view, Dynamic value); void setGradient(T view, @Nullable ReadableArray value); void setGradientUnits(T view, int value); - void setGradientTransform(T view, @Nullable ReadableArray value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java index eae941243..4c15f699b 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerInterface.java index 580f1d84e..aeb4d81a4 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRectManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGRectManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java index 9bda7b55d..37501f96d 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerInterface.java index d4c5a7c5c..c28f711b6 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGSymbolManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGSymbolManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java index 1c7914577..8169f580c 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerInterface.java index 7f23f5a6e..b57f0a00c 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGTSpanManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java index 14c8fea7c..babf0364c 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerInterface.java index 2b0d3f6f4..d70b97c73 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGTextManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java index 61fab1a7b..f53f18cb9 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerInterface.java index 9479a9fc5..d3dc312ed 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGTextPathManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java index 0dd7b9940..ef681ce81 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerDelegate.java @@ -31,9 +31,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerInterface.java index 0bda3e4d6..ebca4d5e4 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGUseManagerInterface.java @@ -17,7 +17,6 @@ public interface RNSVGUseManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts index 18df44c52..7fe5f7226 100644 --- a/src/fabric/LinearGradientNativeComponent.ts +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -30,7 +30,6 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { y2?: UnsafeMixed; gradient?: ReadonlyArray; gradientUnits?: Int32; - gradientTransform?: ReadonlyArray | null; } export default codegenNativeComponent('RNSVGLinearGradient', { diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts index 8cd0991bf..cfdfd1a8c 100644 --- a/src/fabric/RadialGradientNativeComponent.ts +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -32,7 +32,6 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { ry?: UnsafeMixed; gradient?: ReadonlyArray; gradientUnits?: Int32; - gradientTransform?: ReadonlyArray | null; } export default codegenNativeComponent('RNSVGRadialGradient', { From e03a21dcd33f1be7a8fed7d39c80a2b745c7255a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 14 Aug 2025 14:01:49 +0200 Subject: [PATCH 07/11] fix: remove unused matrix property from native ios code --- apple/Elements/RNSVGLinearGradient.mm | 9 --------- apple/Elements/RNSVGRadialGradient.mm | 9 --------- apple/Utils/RNSVGFabricConversions.h | 9 --------- apple/ViewManagers/RNSVGNodeManager.mm | 1 - 4 files changed, 28 deletions(-) diff --git a/apple/Elements/RNSVGLinearGradient.mm b/apple/Elements/RNSVGLinearGradient.mm index ffaae2008..994407da2 100644 --- a/apple/Elements/RNSVGLinearGradient.mm +++ b/apple/Elements/RNSVGLinearGradient.mm @@ -72,15 +72,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & self.gradient = gradientArray; } self.gradientUnits = newProps.gradientUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse; - if (newProps.gradientTransform.size() == 6) { - self.gradientTransform = CGAffineTransformMake( - newProps.gradientTransform.at(0), - newProps.gradientTransform.at(1), - newProps.gradientTransform.at(2), - newProps.gradientTransform.at(3), - newProps.gradientTransform.at(4), - newProps.gradientTransform.at(5)); - } setCommonNodeProps(newProps, self); _props = std::static_pointer_cast(props); diff --git a/apple/Elements/RNSVGRadialGradient.mm b/apple/Elements/RNSVGRadialGradient.mm index 589ef0530..2a5ccfabf 100644 --- a/apple/Elements/RNSVGRadialGradient.mm +++ b/apple/Elements/RNSVGRadialGradient.mm @@ -78,15 +78,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & self.gradient = gradientArray; } self.gradientUnits = newProps.gradientUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse; - if (newProps.gradientTransform.size() == 6) { - self.gradientTransform = CGAffineTransformMake( - newProps.gradientTransform.at(0), - newProps.gradientTransform.at(1), - newProps.gradientTransform.at(2), - newProps.gradientTransform.at(3), - newProps.gradientTransform.at(4), - newProps.gradientTransform.at(5)); - } setCommonNodeProps(newProps, self); _props = std::static_pointer_cast(props); diff --git a/apple/Utils/RNSVGFabricConversions.h b/apple/Utils/RNSVGFabricConversions.h index 66203341a..dbe1395ab 100644 --- a/apple/Utils/RNSVGFabricConversions.h +++ b/apple/Utils/RNSVGFabricConversions.h @@ -62,15 +62,6 @@ void setCommonNodeProps(const T &nodeProps, RNSVGNode *node) { node.name = RCTNSStringFromStringNilIfEmpty(nodeProps.name); node.opacity = nodeProps.opacity; - if (nodeProps.matrix.size() == 6) { - node.matrix = CGAffineTransformMake( - nodeProps.matrix.at(0), - nodeProps.matrix.at(1), - nodeProps.matrix.at(2), - nodeProps.matrix.at(3), - nodeProps.matrix.at(4), - nodeProps.matrix.at(5)); - } if (nodeProps.transform.operations.size() > 0) { auto newTransform = nodeProps.resolveTransform(MinimalLayoutMetrics); CATransform3D transform3d = RCTCATransform3DFromTransformMatrix(newTransform); diff --git a/apple/ViewManagers/RNSVGNodeManager.mm b/apple/ViewManagers/RNSVGNodeManager.mm index dd563eb0f..775af0af2 100644 --- a/apple/ViewManagers/RNSVGNodeManager.mm +++ b/apple/ViewManagers/RNSVGNodeManager.mm @@ -27,7 +27,6 @@ - (RNSVGPlatformView *)view RCT_EXPORT_VIEW_PROPERTY(name, NSString) RCT_EXPORT_VIEW_PROPERTY(opacity, CGFloat) -RCT_EXPORT_VIEW_PROPERTY(matrix, CGAffineTransform) RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RNSVGNode) { CATransform3D transform3d = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform; From dd82f1cdb7691668768e084b150c74e6b5a881de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Tue, 19 Aug 2025 12:11:42 +0200 Subject: [PATCH 08/11] fix: transformToRn.pegjs matrix() function --- .eslintignore | 1 + apps/common/example/examples/Transforms.tsx | 4 +- src/elements/Svg.tsx | 12 ++- src/lib/extract/transformToRn.js | 111 +++++++++++--------- src/lib/extract/transformToRn.pegjs | 22 +++- 5 files changed, 90 insertions(+), 60 deletions(-) diff --git a/.eslintignore b/.eslintignore index d307ae3ee..a2cc055c3 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,3 +9,4 @@ android/ apple/ windows/ src/lib/extract/transform.js +src/lib/extract/transformToRn.js \ No newline at end of file diff --git a/apps/common/example/examples/Transforms.tsx b/apps/common/example/examples/Transforms.tsx index 8d9e6d099..651db794b 100644 --- a/apps/common/example/examples/Transforms.tsx +++ b/apps/common/example/examples/Transforms.tsx @@ -38,8 +38,8 @@ function PatternTransformExample() { width="0.25" height="0.25" patternTransform={[ - {rotate: '20'}, - {skewX: '30'}, + {rotate: '20deg'}, + {skewX: '30deg'}, {scaleX: 1}, {scaleY: 0.5}, ]}> diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx index 23f084078..e5dd1b2d9 100644 --- a/src/elements/Svg.tsx +++ b/src/elements/Svg.tsx @@ -110,7 +110,7 @@ export default class Svg extends Shape { width, height, focusable, - transform, + transform: transformProp, // Inherited G properties font, @@ -126,6 +126,7 @@ export default class Svg extends Shape { strokeLinejoin, strokeMiterlimit, } = stylesAndProps; + let transform; if (width === undefined && height === undefined) { width = height = '100%'; } @@ -177,13 +178,16 @@ export default class Svg extends Shape { } const gStyle = Object.assign({}, StyleSheet.flatten(style)); - if (transform) { + if (transformProp) { if (gStyle.transform) { - props.transform = gStyle.transform; + transform = gStyle.transform; gStyle.transform = undefined; } // eslint-disable-next-line @typescript-eslint/no-explicit-any - props.transform = extractTransformSvgView(props as any); + transform = extractTransformSvgView(props as any); + if (transform) { + props.style = [props.style, { transform }]; + } } const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS; diff --git a/src/lib/extract/transformToRn.js b/src/lib/extract/transformToRn.js index 9f2c85c80..576496c38 100644 --- a/src/lib/extract/transformToRn.js +++ b/src/lib/extract/transformToRn.js @@ -266,36 +266,43 @@ function peg$parse(input, options) { return results; }; var peg$f1 = function (a, b, c, d, e, f, g, h, i) { - return { matrix: [a, b, c, d, e, f, g, h, i] }; + return [g, h, i]; }; - var peg$f2 = function (x, y) { + var peg$f2 = function (a, b, c, d, e, f, ghi) { + if (ghi) { + return { matrix: [a, b, c, d, e, f, ghi[0], ghi[1], ghi[2]] }; + } else { + return { matrix: [a, b, c, d, e, f, 0, 0, 1] }; + } + }; + var peg$f3 = function (x, y) { if (y == undefined) { - return { translate: x }; + return { translateX: x }; } return { translate: [x, y] }; }; - var peg$f3 = function (x, y) { + var peg$f4 = function (x, y) { if (y == undefined) { return { scale: x }; } return [{ scaleX: x }, { scaleY: y }]; }; - var peg$f4 = function (x, yz) { + var peg$f5 = function (x, yz) { if (yz !== null) { return { rotate: `${x}deg` }; } return [{ rotate: `${x}deg` }]; }; - var peg$f5 = function (y, z) { + var peg$f6 = function (y, z) { return [y, z]; }; - var peg$f6 = function (x) { + var peg$f7 = function (x) { return [{ skewX: `${x}deg` }]; }; - var peg$f7 = function (y) { + var peg$f8 = function (y) { return [{ skewY: `${y}deg` }]; }; - var peg$f8 = function () { + var peg$f9 = function () { return parseFloat(text()); }; var peg$currPos = options.peg$currPos | 0; @@ -588,9 +595,7 @@ function peg$parse(input, options) { s18, s19, s20, - s21, - s22, - s23; + s21; peg$silentFails++; s0 = peg$currPos; @@ -623,41 +628,47 @@ function peg$parse(input, options) { s13 = peg$parsespaceOrComma(); s14 = peg$parseNUM(); if (s14 !== peg$FAILED) { - s15 = peg$parsespaceOrComma(); - s16 = peg$parseNUM(); - if (s16 !== peg$FAILED) { - s17 = peg$parsespaceOrComma(); - s18 = peg$parseNUM(); - if (s18 !== peg$FAILED) { - s19 = peg$parsespaceOrComma(); - s20 = peg$parseNUM(); - if (s20 !== peg$FAILED) { - s21 = peg$parse_(); - if (input.charCodeAt(peg$currPos) === 41) { - s22 = peg$c1; - peg$currPos++; - } else { - s22 = peg$FAILED; - if (peg$silentFails === 0) { - peg$fail(peg$e5); - } - } - if (s22 !== peg$FAILED) { - s23 = peg$parse_(); - peg$savedPos = s0; - s0 = peg$f1(s4, s6, s8, s10, s12, s14, s16, s18, s20); - } else { - peg$currPos = s0; - s0 = peg$FAILED; - } + s15 = peg$currPos; + s16 = peg$parsespaceOrComma(); + s17 = peg$parseNUM(); + if (s17 !== peg$FAILED) { + s18 = peg$parsespaceOrComma(); + s19 = peg$parseNUM(); + if (s19 !== peg$FAILED) { + s20 = peg$parsespaceOrComma(); + s21 = peg$parseNUM(); + if (s21 !== peg$FAILED) { + peg$savedPos = s15; + s15 = peg$f1(s4, s6, s8, s10, s12, s14, s17, s19, s21); } else { - peg$currPos = s0; - s0 = peg$FAILED; + peg$currPos = s15; + s15 = peg$FAILED; } } else { - peg$currPos = s0; - s0 = peg$FAILED; + peg$currPos = s15; + s15 = peg$FAILED; } + } else { + peg$currPos = s15; + s15 = peg$FAILED; + } + if (s15 === peg$FAILED) { + s15 = null; + } + s16 = peg$parse_(); + if (input.charCodeAt(peg$currPos) === 41) { + s17 = peg$c1; + peg$currPos++; + } else { + s17 = peg$FAILED; + if (peg$silentFails === 0) { + peg$fail(peg$e5); + } + } + if (s17 !== peg$FAILED) { + s18 = peg$parse_(); + peg$savedPos = s0; + s0 = peg$f2(s4, s6, s8, s10, s12, s14, s15); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -738,7 +749,7 @@ function peg$parse(input, options) { if (s8 !== peg$FAILED) { s9 = peg$parse_(); peg$savedPos = s0; - s0 = peg$f2(s4, s6); + s0 = peg$f3(s4, s6); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -799,7 +810,7 @@ function peg$parse(input, options) { if (s8 !== peg$FAILED) { s9 = peg$parse_(); peg$savedPos = s0; - s0 = peg$f3(s4, s6); + s0 = peg$f4(s4, s6); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -859,7 +870,7 @@ function peg$parse(input, options) { if (s7 !== peg$FAILED) { s8 = peg$parse_(); peg$savedPos = s0; - s0 = peg$f4(s4, s5); + s0 = peg$f5(s4, s5); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -895,7 +906,7 @@ function peg$parse(input, options) { s4 = peg$parseNUM(); if (s4 !== peg$FAILED) { peg$savedPos = s0; - s0 = peg$f5(s2, s4); + s0 = peg$f6(s2, s4); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -947,7 +958,7 @@ function peg$parse(input, options) { if (s6 !== peg$FAILED) { s7 = peg$parse_(); peg$savedPos = s0; - s0 = peg$f6(s4); + s0 = peg$f7(s4); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -1003,7 +1014,7 @@ function peg$parse(input, options) { if (s6 !== peg$FAILED) { s7 = peg$parse_(); peg$savedPos = s0; - s0 = peg$f7(s4); + s0 = peg$f8(s4); } else { peg$currPos = s0; s0 = peg$FAILED; @@ -1276,7 +1287,7 @@ function peg$parse(input, options) { s3 = null; } peg$savedPos = s0; - s0 = peg$f8(); + s0 = peg$f9(); } else { peg$currPos = s0; s0 = peg$FAILED; diff --git a/src/lib/extract/transformToRn.pegjs b/src/lib/extract/transformToRn.pegjs index cdeba9fc7..b82b964e6 100644 --- a/src/lib/extract/transformToRn.pegjs +++ b/src/lib/extract/transformToRn.pegjs @@ -23,14 +23,28 @@ function "transform function" / skewY matrix "matrix" - = _ "matrix(" _ a:NUM spaceOrComma b:NUM spaceOrComma c:NUM spaceOrComma d:NUM spaceOrComma e:NUM spaceOrComma f:NUM spaceOrComma g:NUM spaceOrComma h:NUM spaceOrComma i:NUM _ ")" _ { - return { matrix: [a, b, c, d, e, f, g, h, i]}; + = _ "matrix(" _ + a:NUM spaceOrComma + b:NUM spaceOrComma + c:NUM spaceOrComma + d:NUM spaceOrComma + e:NUM spaceOrComma + f:NUM + ghi:( + spaceOrComma g:NUM spaceOrComma h:NUM spaceOrComma i:NUM { return [g, h, i]; } + )? + _ ")" _ +{ + if (ghi) { + return { matrix: [a, b, c, d, e, f, ghi[0], ghi[1], ghi[2]] }; + } else { + return { matrix: [a, b, c, d, e, f, 0, 0, 1] }; } - +} translate "translate" = _ "translate(" _ x:NUM spaceOrComma y:NUM? _ ")" _ { if (y == undefined) { - return { translate: x }; + return { translateX: x }; } return { translate: [x, y] }; } From ed77bab3385697a3ba0b98c0abbe793b3d1210d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 21 Aug 2025 10:26:57 +0200 Subject: [PATCH 09/11] fix: revert gradient transform changes --- .../RNSVGLinearGradientManagerDelegate.java | 3 +++ .../RNSVGLinearGradientManagerInterface.java | 1 + .../RNSVGRadialGradientManagerDelegate.java | 3 +++ .../RNSVGRadialGradientManagerInterface.java | 1 + apple/Elements/RNSVGLinearGradient.mm | 9 +++++++ apple/Elements/RNSVGRadialGradient.mm | 11 ++++++++- apps/paper-example/ios/Podfile.lock | 4 ++-- src/elements/LinearGradient.tsx | 24 ++----------------- src/elements/RadialGradient.tsx | 24 ++----------------- src/fabric/LinearGradientNativeComponent.ts | 1 + src/fabric/RadialGradientNativeComponent.ts | 1 + src/lib/extract/extractGradient.ts | 7 +++++- 12 files changed, 41 insertions(+), 48 deletions(-) diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java index 56fab4d7c..c67b382b2 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerDelegate.java @@ -75,6 +75,9 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "gradientUnits": mViewManager.setGradientUnits(view, value == null ? 0 : ((Double) value).intValue()); break; + case "gradientTransform": + mViewManager.setGradientTransform(view, (ReadableArray) value); + break; default: super.setProperty(view, propName, value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java index 39065a1d0..a478f5ca5 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGLinearGradientManagerInterface.java @@ -32,4 +32,5 @@ public interface RNSVGLinearGradientManagerInterface { void setY2(T view, Dynamic value); void setGradient(T view, @Nullable ReadableArray value); void setGradientUnits(T view, int value); + void setGradientTransform(T view, @Nullable ReadableArray value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java index a83ad6ed1..aba93a933 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerDelegate.java @@ -81,6 +81,9 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "gradientUnits": mViewManager.setGradientUnits(view, value == null ? 0 : ((Double) value).intValue()); break; + case "gradientTransform": + mViewManager.setGradientTransform(view, (ReadableArray) value); + break; default: super.setProperty(view, propName, value); } diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java index 469723ae1..3e9aa2488 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGRadialGradientManagerInterface.java @@ -34,4 +34,5 @@ public interface RNSVGRadialGradientManagerInterface { void setRy(T view, Dynamic value); void setGradient(T view, @Nullable ReadableArray value); void setGradientUnits(T view, int value); + void setGradientTransform(T view, @Nullable ReadableArray value); } diff --git a/apple/Elements/RNSVGLinearGradient.mm b/apple/Elements/RNSVGLinearGradient.mm index 994407da2..ffaae2008 100644 --- a/apple/Elements/RNSVGLinearGradient.mm +++ b/apple/Elements/RNSVGLinearGradient.mm @@ -72,6 +72,15 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & self.gradient = gradientArray; } self.gradientUnits = newProps.gradientUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse; + if (newProps.gradientTransform.size() == 6) { + self.gradientTransform = CGAffineTransformMake( + newProps.gradientTransform.at(0), + newProps.gradientTransform.at(1), + newProps.gradientTransform.at(2), + newProps.gradientTransform.at(3), + newProps.gradientTransform.at(4), + newProps.gradientTransform.at(5)); + } setCommonNodeProps(newProps, self); _props = std::static_pointer_cast(props); diff --git a/apple/Elements/RNSVGRadialGradient.mm b/apple/Elements/RNSVGRadialGradient.mm index 2a5ccfabf..f2cace1dc 100644 --- a/apple/Elements/RNSVGRadialGradient.mm +++ b/apple/Elements/RNSVGRadialGradient.mm @@ -78,7 +78,16 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & self.gradient = gradientArray; } self.gradientUnits = newProps.gradientUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse; - + if (newProps.gradientTransform.size() == 6) { + self.gradientTransform = CGAffineTransformMake( + newProps.gradientTransform.at(0), + newProps.gradientTransform.at(1), + newProps.gradientTransform.at(2), + newProps.gradientTransform.at(3), + newProps.gradientTransform.at(4), + newProps.gradientTransform.at(5)); + } + setCommonNodeProps(newProps, self); _props = std::static_pointer_cast(props); } diff --git a/apps/paper-example/ios/Podfile.lock b/apps/paper-example/ios/Podfile.lock index fe6abfacb..89c33edf3 100644 --- a/apps/paper-example/ios/Podfile.lock +++ b/apps/paper-example/ios/Podfile.lock @@ -1645,7 +1645,7 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga - - RNSVG (15.10.0): + - RNSVG (15.12.1): - React-Core - SocketRocket (0.7.1) - Yoga (0.0.0) @@ -1940,7 +1940,7 @@ SPEC CHECKSUMS: RNGestureHandler: 511250b190a284388f9dd0d2e56c1df76f14cfb8 RNReanimated: 3e6072b3d49d4fc687b8f1ba3022f0fdc0b43969 RNScreens: c7ceced6a8384cb9be5e7a5e88e9e714401fd958 - RNSVG: 58bad41c581b62cac6265c2899f8f943db527159 + RNSVG: 61b5de449d8daa7b75da111990fee37baeb4a6f2 SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 Yoga: f8ec45ce98bba1bc93dd28f2ee37215180e6d2b6 diff --git a/src/elements/LinearGradient.tsx b/src/elements/LinearGradient.tsx index 0c9e07550..aa05fdb55 100644 --- a/src/elements/LinearGradient.tsx +++ b/src/elements/LinearGradient.tsx @@ -5,7 +5,6 @@ import type { NumberProp, TransformProps, Units } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGLinearGradient from '../fabric/LinearGradientNativeComponent'; import type { NativeMethods } from 'react-native'; -import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface LinearGradientProps { children?: ReactElement[]; @@ -30,34 +29,15 @@ export default class LinearGradient extends Shape { render() { const { props } = this; - const { x1, y1, x2, y2, gradientTransform } = props; + const { x1, y1, x2, y2 } = props; const linearGradientProps = { x1, y1, x2, y2 }; - const gradientProps = extractGradient(props, this); - - if (gradientProps) { - const transform = extractTransformSvgView({ - transform: gradientTransform, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } as any); - - return ( - - this.refMethod(ref as (LinearGradient & NativeMethods) | null) - } - {...linearGradientProps} - {...gradientProps} - style={{ transform }} - /> - ); - } - return ( this.refMethod(ref as (LinearGradient & NativeMethods) | null) } {...linearGradientProps} + {...extractGradient(props, this)} /> ); } diff --git a/src/elements/RadialGradient.tsx b/src/elements/RadialGradient.tsx index 19ed9cc46..d79ac0b78 100644 --- a/src/elements/RadialGradient.tsx +++ b/src/elements/RadialGradient.tsx @@ -5,7 +5,6 @@ import type { NumberProp, TransformProps, Units } from '../lib/extract/types'; import Shape from './Shape'; import RNSVGRadialGradient from '../fabric/RadialGradientNativeComponent'; import type { NativeMethods } from 'react-native'; -import { extractTransformSvgView } from '../lib/extract/extractTransform'; export interface RadialGradientProps { children?: ReactElement[]; @@ -32,7 +31,7 @@ export default class RadialGradient extends Shape { render() { const { props } = this; - const { rx, ry, r, cx, cy, fx = cx, fy = cy, gradientTransform } = props; + const { rx, ry, r, cx, cy, fx = cx, fy = cy } = props; const radialGradientProps = { fx, fy, @@ -41,32 +40,13 @@ export default class RadialGradient extends Shape { cx, cy, }; - const gradientProps = extractGradient(props, this); - - if (gradientProps) { - const transform = extractTransformSvgView({ - transform: gradientTransform, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } as any); - - return ( - - this.refMethod(ref as (RadialGradient & NativeMethods) | null) - } - {...radialGradientProps} - {...gradientProps} - style={{ transform }} - /> - ); - } - return ( this.refMethod(ref as (RadialGradient & NativeMethods) | null) } {...radialGradientProps} + {...extractGradient(props, this)} /> ); } diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts index 7fe5f7226..18df44c52 100644 --- a/src/fabric/LinearGradientNativeComponent.ts +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -30,6 +30,7 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { y2?: UnsafeMixed; gradient?: ReadonlyArray; gradientUnits?: Int32; + gradientTransform?: ReadonlyArray | null; } export default codegenNativeComponent('RNSVGLinearGradient', { diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts index cfdfd1a8c..8cd0991bf 100644 --- a/src/fabric/RadialGradientNativeComponent.ts +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -32,6 +32,7 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { ry?: UnsafeMixed; gradient?: ReadonlyArray; gradientUnits?: Int32; + gradientTransform?: ReadonlyArray | null; } export default codegenNativeComponent('RNSVGRadialGradient', { diff --git a/src/lib/extract/extractGradient.ts b/src/lib/extract/extractGradient.ts index dea19b114..65ff87c1b 100644 --- a/src/lib/extract/extractGradient.ts +++ b/src/lib/extract/extractGradient.ts @@ -6,6 +6,7 @@ import { processColor } from 'react-native'; import extractOpacity from './extractOpacity'; import type { TransformProps } from './types'; import units from '../units'; +import extractTransform from './extractTransform'; const percentReg = /^([+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)(%?)$/; @@ -43,11 +44,12 @@ export default function extractGradient( id?: string; children?: ReactElement[]; transform?: TransformProps['transform']; + gradientTransform?: TransformProps['transform']; gradientUnits?: 'objectBoundingBox' | 'userSpaceOnUse'; } & TransformProps, parent: unknown ) { - const { id, children, gradientUnits } = props; + const { id, children, gradientTransform, transform, gradientUnits } = props; if (!id) { return null; } @@ -95,5 +97,8 @@ export default function extractGradient( gradient, children: childArray, gradientUnits: (gradientUnits && units[gradientUnits]) || 0, + gradientTransform: extractTransform( + gradientTransform || transform || props + ), }; } From 656e9208ca99d239c93963272d5e02194df44a4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kacper=20=C5=BB=C3=B3=C5=82kiewski?= Date: Thu, 21 Aug 2025 15:50:58 +0200 Subject: [PATCH 10/11] fix: revert pattern transform changes --- apps/fabric-example/ios/Podfile.lock | 8 ++++---- src/elements/Pattern.tsx | 15 ++++++++++----- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/apps/fabric-example/ios/Podfile.lock b/apps/fabric-example/ios/Podfile.lock index 2fc5a0f18..fb61d269d 100644 --- a/apps/fabric-example/ios/Podfile.lock +++ b/apps/fabric-example/ios/Podfile.lock @@ -1954,7 +1954,7 @@ PODS: - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - Yoga - - RNSVG (15.12.0): + - RNSVG (15.12.1): - DoubleConversion - glog - hermes-engine @@ -1977,9 +1977,9 @@ PODS: - ReactCodegen - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - RNSVG/common (= 15.12.0) + - RNSVG/common (= 15.12.1) - Yoga - - RNSVG/common (15.12.0): + - RNSVG/common (15.12.1): - DoubleConversion - glog - hermes-engine @@ -2324,7 +2324,7 @@ SPEC CHECKSUMS: RNGestureHandler: 5d8431415d4b8518e86e289e9ad5bb9be78f6dba RNReanimated: 8b24b49fc13fce9a6e1729ccff645a63d2b7a6d1 RNScreens: c5c07a86e4088ce92f0d3854082250dfa9c61f75 - RNSVG: 50819276c95d91ccd8fbe5cfea7e09a416c9beaa + RNSVG: ab2249cc665e5d0b2d30657a766a86c99a649a65 SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748 Yoga: c758bfb934100bb4bf9cbaccb52557cee35e8bdf diff --git a/src/elements/Pattern.tsx b/src/elements/Pattern.tsx index 56247d7db..e3ae5d3ae 100644 --- a/src/elements/Pattern.tsx +++ b/src/elements/Pattern.tsx @@ -1,6 +1,8 @@ import type { ReactNode } from 'react'; import * as React from 'react'; -import { extractTransformSvgView } from '../lib/extract/extractTransform'; +import extractTransform, { + extractTransformSvgView, +} from '../lib/extract/extractTransform'; import extractViewBox from '../lib/extract/extractViewBox'; import type { NumberProp, TransformProps, Units } from '../lib/extract/types'; import units from '../lib/units'; @@ -48,19 +50,22 @@ export default class Pattern extends Shape { viewBox, preserveAspectRatio, } = props; + const transformObj = { transform: patternTransform || transform }; + const patternTransformMatrix = extractTransform( + patternTransform ? transformObj : props + ); const patternProps = { x, y, width, height, name: id, + patternTransform: patternTransformMatrix, patternUnits: (patternUnits && units[patternUnits]) || 0, patternContentUnits: patternContentUnits ? units[patternContentUnits] : 1, }; - const nativeTransform = extractTransformSvgView({ - transform: patternTransform || transform, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - } as any); + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const nativeTransform = extractTransformSvgView(transformObj as any); return ( Date: Fri, 22 Aug 2025 09:31:07 +0200 Subject: [PATCH 11/11] fix: remove unused setMatrix function --- .eslintignore | 2 +- .../horcrux/svg/RenderableViewManager.java | 9 ------- .../java/com/horcrux/svg/VirtualView.java | 27 ------------------- .../RNSVGDefsManagerDelegate.java | 4 --- .../RNSVGDefsManagerInterface.java | 2 -- apple/Elements/RNSVGRadialGradient.mm | 2 +- apple/RNSVGNode.mm | 15 ----------- src/fabric/DefsNativeComponent.ts | 1 - 8 files changed, 2 insertions(+), 60 deletions(-) diff --git a/.eslintignore b/.eslintignore index a2cc055c3..f53950fc8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -9,4 +9,4 @@ android/ apple/ windows/ src/lib/extract/transform.js -src/lib/extract/transformToRn.js \ No newline at end of file +src/lib/extract/transformToRn.js diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java index dccc8d900..6b4cca1bf 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java +++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java @@ -389,15 +389,6 @@ public void setDisplay(V node, String display) { node.setDisplay(display); } - @ReactProp(name = "matrix") - public void setMatrix(V node, Dynamic matrixArray) { - node.setMatrix(matrixArray); - } - - public void setMatrix(V view, @Nullable ReadableArray value) { - view.setMatrix(value); - } - @Override public void setTransform(VirtualView node, @Nullable ReadableArray matrix) { setTransformProperty(node, matrix); diff --git a/android/src/main/java/com/horcrux/svg/VirtualView.java b/android/src/main/java/com/horcrux/svg/VirtualView.java index 815b236d6..d19e1322d 100644 --- a/android/src/main/java/com/horcrux/svg/VirtualView.java +++ b/android/src/main/java/com/horcrux/svg/VirtualView.java @@ -310,33 +310,6 @@ public void setOpacity(float opacity) { invalidate(); } - public void setMatrix(Dynamic matrixArray) { - boolean isArrayType = !matrixArray.isNull() && matrixArray.getType().equals(ReadableType.Array); - setMatrix(isArrayType ? matrixArray.asArray() : null); - } - - public void setMatrix(@Nullable ReadableArray matrixArray) { - if (matrixArray != null) { - int matrixSize = PropHelper.toMatrixData(matrixArray, sRawMatrix, mScale); - if (matrixSize == 6) { - if (mMatrix == null) { - mMatrix = new Matrix(); - mInvMatrix = new Matrix(); - } - mMatrix.setValues(sRawMatrix); - mInvertible = mMatrix.invert(mInvMatrix); - } else if (matrixSize != -1) { - FLog.w(ReactConstants.TAG, "RNSVG: Transform matrices must be of size 6"); - } - } else { - mMatrix.reset(); - mInvMatrix.reset(); - mInvertible = true; - } - super.invalidate(); - clearParentCache(); - } - public void setResponsible(boolean responsible) { mResponsible = responsible; invalidate(); diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerDelegate.java index 8d22e8835..4717c402d 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerDelegate.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerDelegate.java @@ -11,7 +11,6 @@ import android.view.View; import androidx.annotation.Nullable; -import com.facebook.react.bridge.ReadableArray; import com.facebook.react.uimanager.BaseViewManager; import com.facebook.react.uimanager.BaseViewManagerDelegate; import com.facebook.react.uimanager.LayoutShadowNode; @@ -29,9 +28,6 @@ public void setProperty(T view, String propName, @Nullable Object value) { case "opacity": mViewManager.setOpacity(view, value == null ? 1f : ((Double) value).floatValue()); break; - case "matrix": - mViewManager.setMatrix(view, (ReadableArray) value); - break; case "mask": mViewManager.setMask(view, value == null ? null : (String) value); break; diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerInterface.java index d405b61a6..9416fa1c0 100644 --- a/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerInterface.java +++ b/android/src/paper/java/com/facebook/react/viewmanagers/RNSVGDefsManagerInterface.java @@ -11,12 +11,10 @@ import android.view.View; import androidx.annotation.Nullable; -import com.facebook.react.bridge.ReadableArray; public interface RNSVGDefsManagerInterface { void setName(T view, @Nullable String value); void setOpacity(T view, float value); - void setMatrix(T view, @Nullable ReadableArray value); void setMask(T view, @Nullable String value); void setMarkerStart(T view, @Nullable String value); void setMarkerMid(T view, @Nullable String value); diff --git a/apple/Elements/RNSVGRadialGradient.mm b/apple/Elements/RNSVGRadialGradient.mm index f2cace1dc..589ef0530 100644 --- a/apple/Elements/RNSVGRadialGradient.mm +++ b/apple/Elements/RNSVGRadialGradient.mm @@ -87,7 +87,7 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & newProps.gradientTransform.at(4), newProps.gradientTransform.at(5)); } - + setCommonNodeProps(newProps, self); _props = std::static_pointer_cast(props); } diff --git a/apple/RNSVGNode.mm b/apple/RNSVGNode.mm index 7e7b98fc8..8df321e20 100644 --- a/apple/RNSVGNode.mm +++ b/apple/RNSVGNode.mm @@ -231,21 +231,6 @@ - (void)setOpacity:(CGFloat)opacity _opacity = opacity; } -- (void)setMatrix:(CGAffineTransform)matrix -{ - if (CGAffineTransformEqualToTransform(matrix, _matrix)) { - return; - } - _matrix = matrix; - _invmatrix = CGAffineTransformInvert(matrix); - RNSVGPlatformView *container = self.superview; - // on Fabric, when the child components are added to hierarchy and their props are set, - // their superview is still their componentView, we change it in `mountChildComponentView` method. - if ([container conformsToProtocol:@protocol(RNSVGContainer)]) { - [(id)container invalidate]; - } -} - - (void)setTransforms:(CGAffineTransform)transforms { if (CGAffineTransformEqualToTransform(transforms, _matrix)) { diff --git a/src/fabric/DefsNativeComponent.ts b/src/fabric/DefsNativeComponent.ts index b0392a9d6..aaf37c4fd 100644 --- a/src/fabric/DefsNativeComponent.ts +++ b/src/fabric/DefsNativeComponent.ts @@ -9,7 +9,6 @@ import type { ViewProps } from './utils'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; mask?: string; markerStart?: string; markerMid?: string;