react-native-reanimated 3.17.2 → 3.17.4

package/src/layoutReanimation/defaultAnimations/Pinwheel.ts

@@ -44,7 +44,7 @@ export class PinwheelIn
               scale: delayFunction(delay, animation(1, config)),
             },
             {
-              rotate: delayFunction(delay, animation('0', config)),
+              rotate: delayFunction(delay, animation('0rad', config)),
             },
           ],
         },
@@ -55,7 +55,7 @@ export class PinwheelIn
               scale: 0,
             },
             {
-              rotate: '5',
+              rotate: '5rad',
             },
           ],
           ...initialValues,
@@ -104,7 +104,7 @@ export class PinwheelOut
               scale: delayFunction(delay, animation(0, config)),
             },
             {
-              rotate: delayFunction(delay, animation('5', config)),
+              rotate: delayFunction(delay, animation('5rad', config)),
             },
           ],
         },
@@ -115,7 +115,7 @@ export class PinwheelOut
               scale: 1,
             },
             {
-              rotate: '0',
+              rotate: '0rad',
             },
           ],
           ...initialValues,

package/src/layoutReanimation/defaultAnimations/Zoom.ts

@@ -95,7 +95,7 @@ export class ZoomInRotate
           ],
         },
         initialValues: {
-          transform: [{ scale: 0 }, { rotate }],
+          transform: [{ scale: 0 }, { rotate: `${rotate}rad` }],
           ...initialValues,
         },
         callback,
@@ -469,7 +469,7 @@ export class ZoomOutRotate
           ],
         },
         initialValues: {
-          transform: [{ scale: 1 }, { rotate: '0' }],
+          transform: [{ scale: 1 }, { rotate: '0rad' }],
           ...initialValues,
         },
         callback,

package/src/platform-specific/jsVersion.ts

@@ -4,4 +4,4 @@
  * version used to build the native part of the library in runtime. Remember to
  * keep this in sync with the version declared in `package.json`
  */
-export const jsVersion = '3.17.2';
+export const jsVersion = '3.17.4';

package/src/processBoxShadow.ts

@@ -7,6 +7,12 @@
 import type { BoxShadowValue, OpaqueColorValue } from 'react-native';
 
 import type { StyleProps } from '.';
+import { ReanimatedError } from './errors';
+
+const isLength = (value: string) => {
+  'worklet';
+  return value.endsWith('px') || !isNaN(Number(value));
+};
 
 function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
   'worklet';
@@ -29,52 +35,54 @@ function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
     // split rawBoxShadow string by all whitespaces that are not in parenthesis
     const args = rawBoxShadow.split(/\s+(?![^(]*\))/);
     for (const arg of args) {
-      if (arg === 'inset') {
-        if (boxShadow.inset != null) {
+      if (isLength(arg)) {
+        switch (lengthCount) {
+          case 0:
+            offsetX = arg;
+            lengthCount++;
+            break;
+          case 1:
+            if (keywordDetectedAfterLength) {
+              return [];
+            }
+            offsetY = arg;
+            lengthCount++;
+            break;
+          case 2:
+            if (keywordDetectedAfterLength) {
+              return [];
+            }
+            boxShadow.blurRadius = arg;
+            lengthCount++;
+            break;
+          case 3:
+            if (keywordDetectedAfterLength) {
+              return [];
+            }
+            boxShadow.spreadDistance = arg;
+            lengthCount++;
+            break;
+          default:
+            return [];
+        }
+      } else if (arg === 'inset') {
+        if (boxShadow.inset) {
           return [];
         }
-        if (offsetX != null) {
+        if (offsetX !== null) {
           keywordDetectedAfterLength = true;
         }
         boxShadow.inset = true;
         continue;
-      }
-
-      switch (lengthCount) {
-        case 0:
-          offsetX = arg;
-          lengthCount++;
-          break;
-        case 1:
-          if (keywordDetectedAfterLength) {
-            return [];
-          }
-          offsetY = arg;
-          lengthCount++;
-          break;
-        case 2:
-          if (keywordDetectedAfterLength) {
-            return [];
-          }
-          boxShadow.blurRadius = arg;
-          lengthCount++;
-          break;
-        case 3:
-          if (keywordDetectedAfterLength) {
-            return [];
-          }
-          boxShadow.spreadDistance = arg;
-          lengthCount++;
-          break;
-        case 4:
-          if (keywordDetectedAfterLength) {
-            return [];
-          }
-          boxShadow.color = arg;
-          lengthCount++;
-          break;
-        default:
+      } else {
+        if (boxShadow.color) {
           return [];
+        }
+        if (offsetX != null) {
+          keywordDetectedAfterLength = true;
+        }
+        boxShadow.color = arg;
+        continue;
       }
     }
 
@@ -96,11 +104,7 @@ function parseLength(length: string): number | null {
   const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
   const match = argsWithUnitsRegex.exec(length);
 
-  if (!match || Number.isNaN(match[1])) {
-    return null;
-  }
-
-  if (match[3] != null && match[3] !== 'px') {
+  if (!match || !isLength(length)) {
     return null;
   }
 
@@ -122,13 +126,21 @@ export function processBoxShadow(props: StyleProps) {
 
   const rawBoxShadows = props.boxShadow;
 
-  if (rawBoxShadows === '') {
+  if (rawBoxShadows === null) {
     return result;
   }
 
-  const boxShadowList = parseBoxShadowString(
-    (rawBoxShadows as string).replace(/\n/g, ' ')
-  );
+  let boxShadowList: Array<BoxShadowValue>;
+
+  if (typeof rawBoxShadows === 'string') {
+    boxShadowList = parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' '));
+  } else if (Array.isArray(rawBoxShadows)) {
+    boxShadowList = rawBoxShadows;
+  } else {
+    throw new ReanimatedError(
+      `Box shadow value must be an array of shadow objects or a string. Received: ${JSON.stringify(rawBoxShadows)}`
+    );
+  }
 
   for (const rawBoxShadow of boxShadowList) {
     const parsedBoxShadow: ParsedBoxShadow = {

package/src/screenTransition/styleUpdater.ts

@@ -2,7 +2,7 @@
 import type { ShadowNodeWrapper } from '../commonTypes';
 import type { Descriptor } from '../hook/commonTypes';
 import { isFabric } from '../PlatformChecker';
-import updateProps from '../UpdateProps';
+import { updateProps } from '../updateProps';
 import type {
   PanGestureHandlerEventPayload,
   ScreenTransitionConfig,

package/src/updateProps/index.ts

@@ -0,0 +1,4 @@
+'use strict';
+
+export { default as updateProps } from './updateProps';
+export { updatePropsJestWrapper } from './updateProps';

package/src/updateProps/processTransformOrigin.ts

@@ -0,0 +1,145 @@
+'use strict';
+import { ReanimatedError } from '../errors';
+
+const INDEX_X = 0;
+const INDEX_Y = 1;
+const INDEX_Z = 2;
+
+// Implementation based on https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js
+function validateTransformOrigin(transformOrigin: Array<string | number>) {
+  'worklet';
+  if (transformOrigin.length !== 3) {
+    throw new ReanimatedError('Transform origin must have exactly 3 values.');
+  }
+  const [x, y, z] = transformOrigin;
+  if (!(typeof x === 'number' || (typeof x === 'string' && x.endsWith('%')))) {
+    throw new ReanimatedError(
+      `Transform origin x-position must be a number or a percentage string. Passed value: ${x}.`
+    );
+  }
+  if (!(typeof y === 'number' || (typeof y === 'string' && y.endsWith('%')))) {
+    throw new ReanimatedError(
+      `Transform origin y-position must be a number or a percentage string. Passed value: ${y}.`
+    );
+  }
+  if (typeof z !== 'number') {
+    throw new ReanimatedError(
+      `Transform origin z-position must be a number. Passed value: ${z}.`
+    );
+  }
+}
+
+export function processTransformOrigin(
+  transformOriginIn: Array<string | number> | string | undefined
+): Array<string | number> {
+  'worklet';
+  let transformOrigin: Array<string | number> = Array.isArray(transformOriginIn)
+    ? transformOriginIn
+    : ['50%', '50%', 0];
+
+  if (typeof transformOriginIn === 'string') {
+    const transformOriginString = transformOriginIn;
+    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;
+    while ((matches = regex.exec(transformOriginString))) {
+      let nextIndex = index + 1;
+
+      const value = matches[0];
+      const valueLower = value.toLowerCase();
+
+      switch (valueLower) {
+        case 'left':
+        case 'right': {
+          if (index !== INDEX_X) {
+            throw new ReanimatedError(
+              `Transform-origin ${value} can only be used for x-position`
+            );
+          }
+          transformOriginArray[INDEX_X] = valueLower === 'left' ? 0 : '100%';
+          break;
+        }
+        case 'top':
+        case 'bottom': {
+          if (index === INDEX_Z) {
+            throw new ReanimatedError(
+              `Transform-origin ${value} can only be used for y-position`
+            );
+          }
+          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;
+            }
+
+            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:
+                throw new ReanimatedError(
+                  `Could not parse transform-origin: ${transformOriginString}`
+                );
+            }
+            nextIndex = INDEX_Z;
+          }
+
+          break;
+        }
+        case 'center': {
+          if (index === INDEX_Z) {
+            throw new ReanimatedError(
+              `Transform-origin value ${value} cannot be used for z-position`
+            );
+          }
+          transformOriginArray[index] = '50%';
+          break;
+        }
+        default: {
+          if (value.endsWith('%')) {
+            transformOriginArray[index] = value;
+          } else {
+            const numericValue = parseFloat(value);
+            if (isNaN(numericValue)) {
+              throw new ReanimatedError(
+                `Invalid numeric value in transform-origin: ${value}`
+              );
+            }
+            transformOriginArray[index] = numericValue;
+          }
+          break;
+        }
+      }
+
+      index = nextIndex;
+    }
+
+    transformOrigin = transformOriginArray;
+  }
+
+  if (
+    typeof transformOriginIn !== 'string' &&
+    !Array.isArray(transformOriginIn)
+  ) {
+    throw new ReanimatedError(
+      `Invalid transformOrigin type: ${typeof transformOriginIn}`
+    );
+  }
+
+  if (__DEV__) {
+    validateTransformOrigin(transformOrigin);
+  }
+
+  return transformOrigin;
+}

package/src/{UpdateProps.ts → updateProps/updateProps.ts}

@@ -1,19 +1,21 @@
-/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-explicit-any */
 'use strict';
+
 import type { MutableRefObject } from 'react';
 
-import { processColorsInProps } from './Colors';
+import { processColorsInProps } from '../Colors';
 import type {
   AnimatedStyle,
   ShadowNodeWrapper,
   StyleProps,
-} from './commonTypes';
-import { ReanimatedError } from './errors';
-import type { Descriptor } from './hook/commonTypes';
-import { isFabric, isJest, shouldBeUseWeb } from './PlatformChecker';
-import type { ReanimatedHTMLElement } from './ReanimatedModule/js-reanimated';
-import { _updatePropsJS } from './ReanimatedModule/js-reanimated';
-import { runOnUIImmediately } from './threads';
+} from '../commonTypes';
+import { ReanimatedError } from '../errors';
+import type { Descriptor } from '../hook/commonTypes';
+import { isFabric, isJest, shouldBeUseWeb } from '../PlatformChecker';
+import type { ReanimatedHTMLElement } from '../ReanimatedModule/js-reanimated';
+import { _updatePropsJS } from '../ReanimatedModule/js-reanimated';
+import { runOnUIImmediately } from '../threads';
+import { processTransformOrigin } from './processTransformOrigin';
 
 let updateProps: (
   viewDescriptors: ViewDescriptorsWrapper,
@@ -33,10 +35,8 @@ if (shouldBeUseWeb()) {
   updateProps = (viewDescriptors, updates) => {
     'worklet';
     processColorsInProps(updates);
-    if (updates.transformOrigin) {
-      if (!Array.isArray(updates.transformOrigin)) {
-        throw new ReanimatedError('Please use transformOrigin in array form');
-      }
+    if ('transformOrigin' in updates) {
+      updates.transformOrigin = processTransformOrigin(updates.transformOrigin);
     }
     global.UpdatePropsManager.update(viewDescriptors, updates);
   };
@@ -131,13 +131,16 @@ if (shouldBeUseWeb()) {
       );
     }
   };
-  global.UpdatePropsManager = new Proxy({} as UpdatePropsManager, {
-    get: maybeThrowError,
-    set: () => {
-      maybeThrowError();
-      return false;
-    },
-  });
+  global.UpdatePropsManager = new Proxy(
+    {},
+    {
+      get: maybeThrowError,
+      set: () => {
+        maybeThrowError();
+        return false;
+      },
+    }
+  );
 } else {
   runOnUIImmediately(() => {
     'worklet';
@@ -145,14 +148,6 @@ if (shouldBeUseWeb()) {
   })();
 }
 
-export interface UpdatePropsManager {
-  update(
-    viewDescriptors: ViewDescriptorsWrapper,
-    updates: StyleProps | AnimatedStyle<any>
-  ): void;
-  flush(): void;
-}
-
 /**
  * This used to be `SharedValue<Descriptors[]>` but objects holding just a
  * single `value` prop are fine too.

package/lib/module/UpdateProps.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["processColorsInProps","ReanimatedError","isFabric","isJest","shouldBeUseWeb","_updatePropsJS","runOnUIImmediately","updateProps","viewDescriptors","updates","isAnimatedProps","value","forEach","viewDescriptor","component","tag","transformOrigin","Array","isArray","global","UpdatePropsManager","update","updatePropsJestWrapper","animatedValues","adapters","adapter","current","createUpdatePropsManager","operations","push","shadowNodeWrapper","length","queueMicrotask","flush","_updatePropsFabric","name","_updatePropsPaper","maybeThrowError","Proxy","get","set"],"sourceRoot":"../../src","sources":["UpdateProps.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/UpdateProps.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UpdateProps.d.ts","sourceRoot":"","sources":["../../src/UpdateProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EACV,aAAa,EAEb,UAAU,EACX,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMrD,QAAA,IAAI,WAAW,EAAE,CACf,eAAe,EAAE,sBAAsB,EACvC,OAAO,EAAE,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,EACxC,eAAe,CAAC,EAAE,OAAO,KACtB,IAAI,CAAC;AAuBV,eAAO,MAAM,sBAAsB,oBAChB,sBAAsB,WAC9B,cAAc,GAAG,CAAC,kBACX,iBAAiB,cAAc,GAAG,CAAC,CAAC,uBAC/B,cAAc,GAAG,CAAC,KAAK,IAAI,QAC/C,IAUF,CAAC;AAEF,eAAe,WAAW,CAAC;AAsF3B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CACJ,eAAe,EAAE,sBAAsB,EACvC,OAAO,EAAE,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,GACvC,IAAI,CAAC;IACR,KAAK,IAAI,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,UAAU,sBAAsB;IAC9B,KAAK,EAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;CAC/B"}