fix: revert gradient transform changes

kacperzolkiewski · kacperzolkiewski · commit ed77bab33856 · 2025-08-21T12:07:29.000+02:00
diff --git 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
@@ -32,4 +32,5 @@ public interface RNSVGLinearGradientManagerInterface<T extends View> {
   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
@@ -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
@@ -34,4 +34,5 @@ public interface RNSVGRadialGradientManagerInterface<T extends View> {
   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
@@ -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<RNSVGLinearGradientProps const>(props);
diff --git 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<RNSVGRadialGradientProps const>(props);
 }
diff --git 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
@@ -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<LinearGradientProps> {
 
   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 (
-        <RNSVGLinearGradient
-          ref={(ref) =>
-            this.refMethod(ref as (LinearGradient & NativeMethods) | null)
-          }
-          {...linearGradientProps}
-          {...gradientProps}
-          style={{ transform }}
-        />
-      );
-    }
-
     return (
       <RNSVGLinearGradient
         ref={(ref) =>
           this.refMethod(ref as (LinearGradient & NativeMethods) | null)
         }
         {...linearGradientProps}
+        {...extractGradient(props, this)}
       />
     );
   }
diff --git 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<RadialGradientProps> {
 
   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<RadialGradientProps> {
       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 (
-        <RNSVGRadialGradient
-          ref={(ref) =>
-            this.refMethod(ref as (RadialGradient & NativeMethods) | null)
-          }
-          {...radialGradientProps}
-          {...gradientProps}
-          style={{ transform }}
-        />
-      );
-    }
-
     return (
       <RNSVGRadialGradient
         ref={(ref) =>
           this.refMethod(ref as (RadialGradient & NativeMethods) | null)
         }
         {...radialGradientProps}
+        {...extractGradient(props, this)}
       />
     );
   }
diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts
@@ -30,6 +30,7 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {
   y2?: UnsafeMixed<NumberProp>;
   gradient?: ReadonlyArray<Float>;
   gradientUnits?: Int32;
+  gradientTransform?: ReadonlyArray<Float> | null;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGLinearGradient', {
diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts
@@ -32,6 +32,7 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {
   ry?: UnsafeMixed<NumberProp>;
   gradient?: ReadonlyArray<Float>;
   gradientUnits?: Int32;
+  gradientTransform?: ReadonlyArray<Float> | null;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSVGRadialGradient', {
diff --git 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
+    ),
   };
 }

Original file line number	Diff line number	Diff line change
`@@ -32,4 +32,5 @@ public interface RNSVGLinearGradientManagerInterface<T extends View> {`
`32`	`32`	`void setY2(T view, Dynamic value);`
`33`	`33`	`void setGradient(T view, @Nullable ReadableArray value);`
`34`	`34`	`void setGradientUnits(T view, int value);`
	`35`	`+ void setGradientTransform(T view, @Nullable ReadableArray value);`
`35`	`36`	`}`
Original file line number	Diff line number	Diff line change
`@@ -34,4 +34,5 @@ public interface RNSVGRadialGradientManagerInterface<T extends View> {`
`34`	`34`	`void setRy(T view, Dynamic value);`
`35`	`35`	`void setGradient(T view, @Nullable ReadableArray value);`
`36`	`36`	`void setGradientUnits(T view, int value);`
	`37`	`+ void setGradientTransform(T view, @Nullable ReadableArray value);`
`37`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {`
`30`	`30`	`y2?: UnsafeMixed<NumberProp>;`
`31`	`31`	`gradient?: ReadonlyArray<Float>;`
`32`	`32`	`gradientUnits?: Int32;`
	`33`	`+ gradientTransform?: ReadonlyArray<Float> \| null;`
`33`	`34`	`}`
`34`	`35`
`35`	`36`	`export default codegenNativeComponent<NativeProps>('RNSVGLinearGradient', {`