fix: proper transform prop handling

Example/ios/Podfile.lock

@@ -368,7 +368,34 @@ PODS:
     - React-jsi (= 0.70.0)
     - React-logger (= 0.70.0)
     - React-perflogger (= 0.70.0)
-  - RNSVG (13.2.0):
+  - RNReanimated (2.10.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNSVG (13.4.0):
     - React-Core
   - SocketRocket (0.6.0)
   - Yoga (1.14.0)
@@ -434,6 +461,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -522,6 +550,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   Yoga:
@@ -530,7 +560,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 6c76fe46345039d5cf0549e9ddaf5aa169630a4a
   FBReactNativeSpec: 1a270246542f5c52248cb26a96db119cfe3cb760
   Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
@@ -543,7 +573,7 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 476ee3e89abb49e07f822b48323c51c57124b572
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 8e84f1284180801c1a1b241f443ba64f931ff561
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -574,7 +604,8 @@ SPEC CHECKSUMS:
   React-RCTVibration: 5499b77c0fd57f346a5f0b36bb79fdb020d17d3e
   React-runtimeexecutor: 80c195ffcafb190f531fdc849dc2d19cb4bb2b34
   ReactCommon: de55f940495d7bf87b5d7bf55b5b15cdd50d7d7b
-  RNSVG: 07037623c36f12e41312730622d5f6b3656227ca
+  RNReanimated: 60e291d42c77752a0f6d6f358387bdf225a87c6e
+  RNSVG: 07dbd870b0dcdecc99b3a202fa37c8ca163caec2
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 82c9e8f652789f67d98bed5aef9d6653f71b04a9
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

Example/src/App.tsx

@@ -113,6 +113,7 @@ const names: (keyof typeof examples)[] = [
   'PanResponder',
   'Reusable',
   'Reanimated',
+  'Transforms',
 ];
 
 const initialState = {

Example/src/examples.tsx

@@ -16,6 +16,7 @@ import * as Reusable from './examples/Reusable';
 import * as TouchEvents from './examples/TouchEvents';
 import * as PanResponder from './examples/PanResponder';
 import * as Reanimated from './examples/Reanimated';
+import * as Transforms from './examples/Transforms';
 
 export {
   Svg,
@@ -36,4 +37,5 @@ export {
   Reusable,
   PanResponder,
   Reanimated,
+  Transforms,
 };

Example/src/examples/Transforms.tsx

@@ -0,0 +1,134 @@
+import React, {Component} from 'react';
+import {Platform} from 'react-native';
+
+import {
+  Svg,
+  Circle,
+  Rect,
+  Pattern,
+  RadialGradient,
+  Stop,
+  SvgXml,
+} from 'react-native-svg';
+
+const patternXml = `
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<!-- Apply a transform on the tile -->
+<pattern
+  id="p1"
+  width=".25"
+  height=".25"
+  patternTransform="rotate(20)
+                    skewX(30)
+                    scale(1 0.5)">
+  <circle cx="10" cy="10" r="10" fill="black" />
+</pattern>
+
+<rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+</svg>
+`;
+
+class PatternTransformExample extends Component {
+  static title = 'Pattern transform';
+  render() {
+    return (
+      <>
+        <Svg height="100" width="300" viewBox="0 0 200 100">
+          <Pattern
+            id="p1"
+            width="0.25"
+            height="0.25"
+            patternTransform={[
+              {rotate: '20'},
+              {skewX: '30'},
+              {scaleX: 1},
+              {scaleY: 0.5},
+            ]}>
+            <Circle fill="black" cx="10" cy="10" r="10" />
+          </Pattern>
+          <Pattern
+            id="p2"
+            width="0.25"
+            height="0.25"
+            patternTransform="rotate(20) skewX(30) scale(1 0.5)">
+            <Circle fill="black" cx="10" cy="10" r="10" />
+          </Pattern>
+          <Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+          <Rect
+            x="10"
+            y="10"
+            width="80"
+            height="80"
+            fill="url(#p2)"
+            transform={[{translateX: 100}]}
+          />
+        </Svg>
+        {Platform.OS !== 'web' && (
+          <SvgXml width="100" height="100" xml={patternXml} />
+        )}
+      </>
+    );
+  }
+}
+
+class GradientTransformExample extends Component {
+  static title = 'Gradient transform';
+  render() {
+    return (
+      <Svg height="200" width="300" viewBox="0 0 420 200">
+        <RadialGradient
+          id="gradient1"
+          gradientUnits="userSpaceOnUse"
+          cx="100"
+          cy="100"
+          r="100"
+          fx="100"
+          fy="100">
+          <Stop offset="0%" stopColor="darkblue" />
+          <Stop offset="50%" stopColor="skyblue" />
+          <Stop offset="100%" stopColor="darkblue" />
+        </RadialGradient>
+        <RadialGradient
+          id="gradient2"
+          gradientUnits="userSpaceOnUse"
+          cx="100"
+          cy="100"
+          r="100"
+          fx="100"
+          fy="100"
+          gradientTransform="skewX(20) translate(-35, 0)">
+          <Stop offset="0%" stopColor="darkblue" />
+          <Stop offset="50%" stopColor="skyblue" />
+          <Stop offset="100%" stopColor="darkblue" />
+        </RadialGradient>
+
+        <Rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" />
+        <Rect
+          x="0"
+          y="0"
+          width="200"
+          height="200"
+          fill="url(#gradient2)"
+          transform="translate(220)"
+        />
+      </Svg>
+    );
+  }
+}
+
+const icon = (
+  <Svg height="30" width="30" viewBox="0 0 100 100">
+    <Pattern
+      id="p1"
+      width="0.25"
+      height="0.25"
+      patternTransform="rotate(20) skewX(30) scale(1 0.5)">
+      <Circle fill="black" cx="10" cy="10" r="10" />
+    </Pattern>
+    <Rect x="10" y="10" width="80" height="80" fill="url(#p1)" />
+  </Svg>
+);
+
+const samples = [PatternTransformExample, GradientTransformExample];
+
+export {icon, samples};

FabricExample/ios/Podfile.lock

@@ -697,7 +697,7 @@ PODS:
     - React-jsi (= 0.70.0)
     - React-logger (= 0.70.0)
     - React-perflogger (= 0.70.0)
-  - RNSVG (13.2.0):
+  - RNSVG (13.4.0):
     - RCT-Folly
     - RCTRequired
     - RCTTypeSafety
@@ -927,7 +927,7 @@ SPEC CHECKSUMS:
   React-rncore: 8858fe6b719170c20c197a8fd2dd53507bdae04b
   React-runtimeexecutor: 80c195ffcafb190f531fdc849dc2d19cb4bb2b34
   ReactCommon: de55f940495d7bf87b5d7bf55b5b15cdd50d7d7b
-  RNSVG: fa7f6f437c90eea1fbc3d142a40365d561824ab3
+  RNSVG: 8ef4c60d9378eab6996a3f006dfb5784e6dab302
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 82c9e8f652789f67d98bed5aef9d6653f71b04a9
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

FabricExample/src/App.tsx

@@ -112,6 +112,7 @@ const names = [
   'TouchEvents',
   'PanResponder',
   'Reusable',
+  'Transforms',
 ];
 
 const initialState = {

FabricExample/src/examples.tsx

@@ -15,6 +15,7 @@ import * as Image from './examples/Image';
 import * as Reusable from './examples/Reusable';
 import * as TouchEvents from './examples/TouchEvents';
 import * as PanResponder from './examples/PanResponder';
+import * as Transforms from './examples/Transforms';
 
 export {
   Svg,
@@ -34,4 +35,5 @@ export {
   TouchEvents,
   Reusable,
   PanResponder,
+  Transforms,
 };