feat: android transform origin

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -14,6 +14,7 @@ import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processColor from '../../StyleSheet/processColor';
 import processFontVariant from '../../StyleSheet/processFontVariant';
 import processTransform from '../../StyleSheet/processTransform';
+import processTransformOrigin from '../../StyleSheet/processTransformOrigin';
 import sizesDiffer from '../../Utilities/differ/sizesDiffer';
 
 const colorAttributes = {process: processColor};
@@ -111,6 +112,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    * Transform
    */
   transform: {process: processTransform},
+  transformOrigin: {process: processTransformOrigin},
 
   /**
    * View

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -165,6 +165,7 @@ const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
+  transformOrigin: true,
   opacity: true,
   elevation: true,
   shadowColor: {process: require('../StyleSheet/processColor').default},

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -196,6 +196,7 @@ export interface TransformsStyle {
       >[]
     | string
     | undefined;
+  transformOrigin?: Array<string | number> | string | undefined;
   /**
    * @deprecated Use matrix in transform prop instead.
    */

packages/react-native/Libraries/StyleSheet/__tests__/__snapshots__/processTransformOrigin-test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`processTransformOrigin validation only accepts three values 1`] = `"Transform origin must have exactly 3 values."`;
+
+exports[`processTransformOrigin validation only accepts three values 2`] = `"Transform origin must have exactly 3 values."`;

packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-test.js

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall react_native
+ */
+
+import processTransformOrigin from '../processTransformOrigin';
+
+describe('processTransformOrigin', () => {
+  describe('validation', () => {
+    it('only accepts three values', () => {
+      expect(() => {
+        processTransformOrigin([]);
+      }).toThrowErrorMatchingSnapshot();
+      expect(() => {
+        processTransformOrigin(['50%', '50%']);
+      }).toThrowErrorMatchingSnapshot();
+    });
+
+    it('should transform a string', () => {
+      expect(processTransformOrigin('50% 50% 5px')).toEqual(['50%', '50%', 5]);
+    });
+
+    it('should handle one value', () => {
+      expect(processTransformOrigin('top')).toEqual(['50%', 0, 0]);
+      expect(processTransformOrigin('right')).toEqual(['100%', '50%', 0]);
+      expect(processTransformOrigin('bottom')).toEqual(['50%', '100%', 0]);
+      expect(processTransformOrigin('left')).toEqual([0, '50%', 0]);
+    });
+
+    it('should handle two values', () => {
+      expect(processTransformOrigin('30% top')).toEqual(['30%', 0, 0]);
+      expect(processTransformOrigin('right 30%')).toEqual(['100%', '30%', 0]);
+      expect(processTransformOrigin('30% bottom')).toEqual(['30%', '100%', 0]);
+      expect(processTransformOrigin('left 30%')).toEqual([0, '30%', 0]);
+    });
+
+    it('should handle two keywords in either order', () => {
+      expect(processTransformOrigin('right bottom')).toEqual([
+        '100%',
+        '100%',
+        0,
+      ]);
+      expect(processTransformOrigin('bottom right')).toEqual([
+        '100%',
+        '100%',
+        0,
+      ]);
+      expect(processTransformOrigin('right bottom 5px')).toEqual([
+        '100%',
+        '100%',
+        5,
+      ]);
+      expect(processTransformOrigin('bottom right 5px')).toEqual([
+        '100%',
+        '100%',
+        5,
+      ]);
+    });
+
+    it('should not allow specifying same position twice', () => {
+      expect(() => {
+        processTransformOrigin('top top');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Could not parse transform-origin: top top"`,
+      );
+      expect(() => {
+        processTransformOrigin('right right');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Transform-origin right can only be used for x-position"`,
+      );
+      expect(() => {
+        processTransformOrigin('bottom bottom');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Could not parse transform-origin: bottom bottom"`,
+      );
+      expect(() => {
+        processTransformOrigin('left left');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Transform-origin left can only be used for x-position"`,
+      );
+      expect(() => {
+        processTransformOrigin('top bottom');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Could not parse transform-origin: top bottom"`,
+      );
+      expect(() => {
+        processTransformOrigin('left right');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Transform-origin right can only be used for x-position"`,
+      );
+    });
+
+    it('should handle three values', () => {
+      expect(processTransformOrigin('30% top 10px')).toEqual(['30%', 0, 10]);
+      expect(processTransformOrigin('right 30% 10px')).toEqual([
+        '100%',
+        '30%',
+        10,
+      ]);
+      expect(processTransformOrigin('30% bottom 10px')).toEqual([
+        '30%',
+        '100%',
+        10,
+      ]);
+      expect(processTransformOrigin('left 30% 10px')).toEqual([0, '30%', 10]);
+    });
+
+    it('should enforce two value ordering', () => {
+      expect(() => {
+        processTransformOrigin('top 30%');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Could not parse transform-origin: top 30%"`,
+      );
+    });
+
+    it('should not allow percents for z-position', () => {
+      expect(() => {
+        processTransformOrigin('top 30% 30%');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Could not parse transform-origin: top 30% 30%"`,
+      );
+      expect(() => {
+        processTransformOrigin('top 30% center');
+      }).toThrowErrorMatchingInlineSnapshot(
+        `"Could not parse transform-origin: top 30% center"`,
+      );
+    });
+  });
+});

packages/react-native/Libraries/StyleSheet/private/_TransformStyle.js

@@ -52,4 +52,16 @@ export type ____TransformStyle_Internal = $ReadOnly<{|
           |},
       >
     | string,
+  /**
+   * `transformOrigin` accepts an array with 3 elements - each element either being
+   * a number, or a string of a number ending with `%`. The last element cannot be
+   * a percentage, so must be a number.
+   *
+   * E.g. transformOrigin: ['30%', '80%', 15]
+   *
+   * Alternatively accepts a string of the CSS syntax. You must use `%` or `px`.
+   *
+   * E.g. transformOrigin: '30% 80% 15px'
+   */
+  transformOrigin?: Array<string | number> | string,
 |}>;

packages/react-native/Libraries/StyleSheet/processTransformOrigin.js

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import invariant from 'invariant';
+
+const INDEX_X = 0;
+const INDEX_Y = 1;
+const INDEX_Z = 2;
+
+/* eslint-disable no-labels */
+export default function processTransformOrigin(
+  transformOrigin: Array<string | number> | string,
+): Array<string | number> {
+  if (typeof transformOrigin === 'string') {
+    const transformOriginString = transformOrigin;
+    const regex = /(top|bottom|left|right|center|\d+(?:%|px)|0)/gi;
+    const transformOriginArray: Array<string | number> = ['50%', '50%', 0];
+
+    let index = INDEX_X;
+    let matches;
+    outer: while ((matches = regex.exec(transformOriginString))) {
+      let nextIndex = index + 1;
+
+      const value = matches[0];
+      const valueLower = value.toLowerCase();
+
+      switch (valueLower) {
+        case 'left':
+        case 'right': {
+          invariant(
+            index === INDEX_X,
+            'Transform-origin %s can only be used for x-position',
+            value,
+          );
+          transformOriginArray[INDEX_X] = valueLower === 'left' ? 0 : '100%';
+          break;
+        }
+        case 'top':
+        case 'bottom': {
+          invariant(
+            index !== INDEX_Z,
+            'Transform-origin %s can only be used for y-position',
+            value,
+          );
+          transformOriginArray[INDEX_Y] = valueLower === 'top' ? 0 : '100%';
+
+          // Handle [[ center | left | right ] && [ center | top | bottom ]] <length>?
+          if (index === INDEX_X) {
+            const horizontal = regex.exec(transformOriginString);
+            if (horizontal == null) {
+              break outer;
+            }
+
+            switch (horizontal[0].toLowerCase()) {
+              case 'left':
+                transformOriginArray[INDEX_X] = 0;
+                break;
+              case 'right':
+                transformOriginArray[INDEX_X] = '100%';
+                break;
+              case 'center':
+                transformOriginArray[INDEX_X] = '50%';
+                break;
+              default:
+                invariant(
+                  false,
+                  'Could not parse transform-origin: %s',
+                  transformOriginString,
+                );
+            }
+            nextIndex = INDEX_Z;
+          }
+
+          break;
+        }
+        case 'center': {
+          invariant(
+            index !== INDEX_Z,
+            'Transform-origin value %s cannot be used for z-position',
+            value,
+          );
+          transformOriginArray[index] = '50%';
+          break;
+        }
+        default: {
+          if (value.endsWith('%')) {
+            transformOriginArray[index] = value;
+          } else {
+            transformOriginArray[index] = parseFloat(value); // Remove `px`
+          }
+          break;
+        }
+      }
+
+      index = nextIndex;
+    }
+
+    transformOrigin = transformOriginArray;
+  }
+
+  if (__DEV__) {
+    _validateTransformOrigin(transformOrigin);
+  }
+
+  return transformOrigin;
+}
+
+function _validateTransformOrigin(transformOrigin: Array<string | number>) {
+  invariant(
+    transformOrigin.length === 3,
+    'Transform origin must have exactly 3 values.',
+  );
+  const [x, y, z] = transformOrigin;
+  invariant(
+    typeof x === 'number' || (typeof x === 'string' && x.endsWith('%')),
+    'Transform origin x-position must be a number. Passed value: %s.',
+    x,
+  );
+  invariant(
+    typeof y === 'number' || (typeof y === 'string' && y.endsWith('%')),
+    'Transform origin y-position must be a number. Passed value: %s.',
+    y,
+  );
+  invariant(
+    typeof z === 'number',
+    'Transform origin z-position must be a number. Passed value: %s.',
+    z,
+  );
+}