[fix] Support array syntax on transformOrigin

necolas · Dec 27, 2024 · a6ee2e1 · a6ee2e1
1 parent a5ba27c
commit a6ee2e1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/preprocess-test.js
@@ -151,6 +151,28 @@ describe('StyleSheet/preprocess', () => {
         });
       });
     });
+
+    describe('transformOrigin', () => {
+      // passthrough if transformOrigin value is ever a string
+      test('string', () => {
+        const transformOrigin = '2px 30% 10px';
+        const style = { transformOrigin };
+        const resolved = preprocess(style);
+
+        expect(resolved).toEqual({ transformOrigin });
+      });
+
+      test('array', () => {
+        const style = {
+          transformOrigin: [2, '30%', 10]
+        };
+        const resolved = preprocess(style);
+
+        expect(resolved).toEqual({
+          transformOrigin: '2px 30% 10px'
+        });
+      });
+    });
   });
 
   describe('preprocesses multiple shadow styles into a single declaration', () => {

diff --git a/packages/react-native-web/src/exports/StyleSheet/preprocess.js b/packages/react-native-web/src/exports/StyleSheet/preprocess.js
@@ -73,6 +73,13 @@ export const createTransformValue = (value: Array<Object>): string => {
   return value.map(mapTransform).join(' ');
 };
 
+// [2, '30%', 10] => '2px 30% 10px'
+export const createTransformOriginValue = (
+  value: Array<number | string>
+): string => {
+  return value.map((v) => normalizeValueWithProperty(v)).join(' ');
+};
+
 const PROPERTIES_STANDARD: { [key: string]: string } = {
   borderBottomEndRadius: 'borderEndEndRadius',
   borderBottomStartRadius: 'borderEndStartRadius',
@@ -210,6 +217,11 @@ export const preprocess = <T: {| [key: string]: any |}>(
         value = createTransformValue(value);
       }
       nextStyle.transform = value;
+    } else if (prop === 'transformOrigin') {
+      if (Array.isArray(value)) {
+        value = createTransformOriginValue(value);
+      }
+      nextStyle.transformOrigin = value;
     } else {
       nextStyle[prop] = value;
     }

diff --git a/packages/react-native-web/src/types/styles.js b/packages/react-native-web/src/types/styles.js
@@ -341,6 +341,6 @@ export type TransformStyles = {|
         | {| +translateZ: NumberOrString |}
         | {| +translate3d: string |}
       >,
-  transformOrigin?: ?string,
+  transformOrigin?: ?string | Array<NumberOrString>,
   transformStyle?: ?('flat' | 'preserve-3d')
 |};