react-native-reanimated 4.3.0-rc.0 → 4.3.1

package/src/common/style/processors/colors.ts

@@ -1,5 +1,4 @@
 'use strict';
-'worklet';
 import type {
   DynamicColorIOS as RNDynamicColorIOS,
   OpaqueColorValue,
@@ -17,6 +16,7 @@ import { isRecord } from '../../utils';
  * https://github.com/facebook/react-native/blob/v0.81.0/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.d.ts
  */
 export function PlatformColor(...names: string[]): OpaqueColorValue {
+  'worklet';
   return (IS_IOS
     ? { semantic: names }
     : // eslint-disable-next-line camelcase
@@ -28,6 +28,7 @@ type PlatformColorObject =
   | { semantic?: never; resource_paths?: Array<string> };
 
 function isPlatformColorObject(value: unknown): value is PlatformColorObject {
+  'worklet';
   return (
     isRecord(value) &&
     (Array.isArray(value.semantic) || Array.isArray(value.resource_paths))
@@ -40,6 +41,7 @@ function isPlatformColorObject(value: unknown): value is PlatformColorObject {
 type DynamicColorIOSTuple = Parameters<typeof RNDynamicColorIOS>[0];
 
 export function DynamicColorIOS(tuple: DynamicColorIOSTuple): OpaqueColorValue {
+  'worklet';
   return {
     dynamic: {
       light: tuple.light,
@@ -57,6 +59,7 @@ type DynamicColorObjectIOS = {
 function isDynamicColorObjectIOS(
   value: unknown
 ): value is DynamicColorObjectIOS {
+  'worklet';
   return (
     isRecord(value) &&
     isRecord(value.dynamic) &&
@@ -66,15 +69,22 @@ function isDynamicColorObjectIOS(
 }
 
 export const ERROR_MESSAGES = {
-  invalidColor: (color: unknown) =>
-    `Invalid color value: ${JSON.stringify(color)}`,
-  invalidProcessedColor: (color: unknown) =>
-    `Invalid processed color value: ${JSON.stringify(color)}`,
-  dynamicNotAvailableOnPlatform: () =>
-    'DynamicColorIOS is not available on this platform.',
+  invalidColor(color: unknown) {
+    'worklet';
+    return `Invalid color value: ${JSON.stringify(color)}`;
+  },
+  invalidProcessedColor(color: unknown) {
+    'worklet';
+    return `Invalid processed color value: ${JSON.stringify(color)}`;
+  },
+  dynamicNotAvailableOnPlatform() {
+    'worklet';
+    return 'DynamicColorIOS is not available on this platform.';
+  },
 };
 
 export function processColorNumber(value: unknown): number | null {
+  'worklet';
   let normalizedColor = processColorInitially(value);
 
   if (IS_ANDROID && typeof normalizedColor == 'number') {
@@ -115,6 +125,7 @@ const DynamicColorIOSProperties = [
 function processDynamicColorObjectIOS(
   value: DynamicColorObjectIOS
 ): ProcessedDynamicColorObjectIOS | null {
+  'worklet';
   const result = {} as ProcessedDynamicColorObjectIOS['dynamic'];
 
   for (const property of DynamicColorIOSProperties) {
@@ -176,6 +187,7 @@ export function processColor(
   value: unknown,
   context?: ValueProcessorContext
 ): ProcessedColor {
+  'worklet';
   let result: ProcessedColor | null = processColorNumber(value); // try to convert to a number first (most common case)
 
   if (result) {
@@ -229,6 +241,7 @@ export function unprocessColor(
 }
 
 export function processColorsInProps(props: StyleProps) {
+  'worklet';
   for (const key in props) {
     if (!ColorProperties.includes(key)) continue;
     const value = props[key];

package/src/common/style/processors/filter.ts

@@ -1,8 +1,6 @@
 'use strict';
-'worklet';
 import type { DropShadowValue, FilterFunction } from 'react-native';
 
-import { ReanimatedError } from '../../errors';
 import type {
   FilterArray,
   ParsedDropShadow,
@@ -20,67 +18,56 @@ const FILTER_VALUE_REGEX = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)([a-z%]*)$/;
 // Capture drop-shadow parts "10px 5px 5px #888888" => ["10px", "5px", "5px", "#888888"]
 const DROP_SHADOW_REGEX = /[^,\s()]+(?:\([^()]*\))?/g;
 
-export const ERROR_MESSAGES = {
-  invalidFilter: (filter: string) => `Invalid filter property: ${filter}`,
-  invalidFilterType: (filter: readonly FilterFunction[]) =>
-    `Invalid filter input type: ${typeof filter}. Expected string or array.`,
-};
-
 type SingleFilterValue = {
   numberValue: number;
   unit: string;
 };
 
-const parseHueRotate = (value: SingleFilterValue): number | undefined => {
+const parseHueRotate = (value: SingleFilterValue): number | null => {
+  'worklet';
   const { numberValue, unit } = value;
-  if (numberValue === 0) {
-    return 0;
-  }
-  if (unit !== 'deg' && unit !== 'rad') {
-    throw new ReanimatedError(
-      ERROR_MESSAGES.invalidFilter(`hueRotate(${numberValue}${unit})`)
-    );
+  if (numberValue !== 0 && unit !== 'deg' && unit !== 'rad') {
+    return null;
   }
   return unit === 'rad' ? (180 * numberValue) / Math.PI : numberValue;
 };
 
-const parseBlur = (value: SingleFilterValue): number | undefined => {
+const parseBlur = (value: SingleFilterValue): number | null => {
+  'worklet';
   const { numberValue, unit } = value;
   if ((unit && unit !== 'px') || numberValue < 0) {
-    return undefined;
+    return null;
   }
   return numberValue;
 };
 
-const parsePercentageFilter = (
-  value: SingleFilterValue
-): number | undefined => {
+const parsePercentageFilter = (value: SingleFilterValue): number | null => {
+  'worklet';
   const { numberValue, unit } = value;
   if ((unit && unit !== '%') || numberValue < 0) {
-    return undefined;
+    return null;
   }
   return unit === '%' ? numberValue / 100 : numberValue;
 };
 
 const LENGTH_MAPPINGS = ['offsetX', 'offsetY', 'standardDeviation'] as const;
 
-const parseDropShadowString = (value: string) => {
+const parseDropShadowString = (value: string): DropShadowValue | null => {
+  'worklet';
   const match = value.match(DROP_SHADOW_REGEX) ?? [];
   const result: DropShadowValue = { offsetX: 0, offsetY: 0 };
   let foundLengthsCount = 0;
 
-  match.forEach((part) => {
+  for (const part of match) {
     if (isLength(part)) {
-      if (__DEV__ && !part.trim().match(FILTER_VALUE_REGEX)) {
-        throw new ReanimatedError(
-          ERROR_MESSAGES.invalidFilter(`dropShadow(${value})`)
-        );
+      if (!part.trim().match(FILTER_VALUE_REGEX)) {
+        return null;
       }
       result[LENGTH_MAPPINGS[foundLengthsCount++]] = parseFloat(part);
     } else {
       result.color = part.trim();
     }
-  });
+  }
 
   return result;
 };
@@ -88,9 +75,13 @@ const parseDropShadowString = (value: string) => {
 const parseDropShadow = (
   value: string | DropShadowValue,
   context: ValueProcessorContext | undefined
-): ParsedDropShadow => {
+): ParsedDropShadow | null => {
+  'worklet';
   const dropShadow =
     typeof value === 'string' ? parseDropShadowString(value) : value;
+  if (dropShadow === null) {
+    return null;
+  }
   const {
     color = '#000',
     offsetX = 0,
@@ -98,14 +89,22 @@ const parseDropShadow = (
     standardDeviation = 0,
   } = dropShadow;
 
+  const parsedStdDev = parseFloat(standardDeviation as string);
+  if (parsedStdDev < 0) {
+    return null;
+  }
+
   const processedColor = processColor(color, context);
+  if (processedColor === null) {
+    return null;
+  }
 
   return {
     // TODO - add support for IOS dynamic colors in CSS (for now we just assume that it's a number)
     color: processedColor as number,
     offsetX: parseFloat(offsetX as string),
     offsetY: parseFloat(offsetY as string),
-    standardDeviation: parseFloat(standardDeviation as string),
+    standardDeviation: parsedStdDev,
   };
 };
 
@@ -113,37 +112,49 @@ const parseFilterProperty = (
   filterName: string,
   filterValue: string | number | DropShadowValue,
   context: ValueProcessorContext | undefined
-): ParsedFilterFunction => {
+): ParsedFilterFunction | null => {
+  'worklet';
   // We need to handle dropShadow separately because of its complex structure
-  if (filterName == 'dropShadow') {
-    return {
-      dropShadow: parseDropShadow(
-        filterValue as string | DropShadowValue,
-        context
-      ),
-    };
+  if (filterName === 'dropShadow') {
+    const dropShadow = parseDropShadow(
+      filterValue as string | DropShadowValue,
+      context
+    );
+    if (dropShadow === null) {
+      return null;
+    }
+    return { dropShadow };
   }
 
-  if (isNumber(filterValue)) {
-    return { [filterName]: filterValue };
-  }
+  let numberValue: number;
+  let unit: string;
 
-  const stringValue = filterValue as string;
-  const match = stringValue.match(FILTER_VALUE_REGEX);
-  if (!match) {
-    throw new ReanimatedError(
-      ERROR_MESSAGES.invalidFilter(`${filterName}(${stringValue})`)
-    );
+  if (isNumber(filterValue)) {
+    // Numeric hueRotate values are treated as degrees.
+    // Unit validation only applies to string values like 'hueRotate(90deg)'.
+    if (filterName === 'hueRotate') {
+      return { hueRotate: filterValue };
+    }
+    numberValue = filterValue;
+    unit = '';
+  } else {
+    const stringValue = filterValue as string;
+    const match = stringValue.match(FILTER_VALUE_REGEX);
+    if (!match) {
+      return null;
+    }
+    numberValue = parseFloat(match[1]);
+    unit = match[2];
   }
 
-  const numberValue = parseFloat(match[1]);
-  const unit = match[2];
-
+  let amount: number | null;
   switch (filterName) {
     case 'hueRotate':
-      return { hueRotate: parseHueRotate({ numberValue, unit }) };
+      amount = parseHueRotate({ numberValue, unit });
+      break;
     case 'blur':
-      return { blur: parseBlur({ numberValue, unit }) };
+      amount = parseBlur({ numberValue, unit });
+      break;
     case 'brightness':
     case 'contrast':
     case 'grayscale':
@@ -151,32 +162,39 @@ const parseFilterProperty = (
     case 'opacity':
     case 'saturate':
     case 'sepia':
-      return { [filterName]: parsePercentageFilter({ numberValue, unit }) };
+      amount = parsePercentageFilter({ numberValue, unit });
+      break;
     default:
-      throw new ReanimatedError(
-        ERROR_MESSAGES.invalidFilter(`${filterName}(${stringValue})`)
-      );
+      return null;
   }
+
+  if (amount === null) {
+    return null;
+  }
+
+  return { [filterName]: amount };
 };
 
 const parseFilterString = (
   value: string,
   context: ValueProcessorContext | undefined
 ): FilterArray => {
+  'worklet';
   const matches = Array.from(value.matchAll(FILTER_REGEX));
 
-  if (matches.length === 0) {
-    throw new ReanimatedError(ERROR_MESSAGES.invalidFilter(value));
-  }
-
-  const filterArray = matches.map((match) => {
-    const [filter, name, content] = match;
+  const filterArray: FilterArray = [];
+  for (const match of matches) {
+    const [, name, content] = match;
     if (!name || !content) {
-      throw new ReanimatedError(ERROR_MESSAGES.invalidFilter(filter));
+      return [];
     }
 
-    return parseFilterProperty(name, content, context);
-  });
+    const parsed = parseFilterProperty(name, content, context);
+    if (parsed === null) {
+      return [];
+    }
+    filterArray.push(parsed);
+  }
   return filterArray;
 };
 
@@ -184,16 +202,23 @@ export const processFilter: ValueProcessor<
   ReadonlyArray<FilterFunction> | string,
   FilterArray
 > = (value, context) => {
+  'worklet';
   if (typeof value === 'string') {
     return parseFilterString(value, context);
   }
 
   if (Array.isArray(value)) {
-    return value.map((filter) => {
+    const filterArray: FilterArray = [];
+    for (const filter of value) {
       const filterKey = Object.keys(filter)[0];
-      return parseFilterProperty(filterKey, filter[filterKey], context);
-    });
+      const parsed = parseFilterProperty(filterKey, filter[filterKey], context);
+      if (parsed === null) {
+        return [];
+      }
+      filterArray.push(parsed);
+    }
+    return filterArray;
   }
 
-  throw new ReanimatedError(ERROR_MESSAGES.invalidFilterType(value));
+  return [];
 };

package/src/common/style/processors/font.ts

@@ -4,8 +4,10 @@ import { ReanimatedError } from '../../errors';
 import type { ValueProcessor } from '../../types';
 
 export const ERROR_MESSAGES = {
-  invalidFontWeight: (weight: string | number) =>
-    `Invalid font weight value: ${weight}`,
+  invalidFontWeight(weight: string | number) {
+    'worklet';
+    return `Invalid font weight value: ${weight}`;
+  },
 };
 
 const VALID_FONT_WEIGHTS = new Set<string>(Object.values(FONT_WEIGHT_MAPPINGS));
@@ -13,6 +15,7 @@ const VALID_FONT_WEIGHTS = new Set<string>(Object.values(FONT_WEIGHT_MAPPINGS));
 export const processFontWeight: ValueProcessor<string | number, string> = (
   value
 ) => {
+  'worklet';
   const stringValue = value.toString();
 
   if (VALID_FONT_WEIGHTS.has(stringValue)) {

package/src/common/style/processors/insets.ts

@@ -8,19 +8,28 @@ type InsetProcessor = ValueProcessor<
   Record<string, DimensionValue>
 >;
 
-export const processInset: InsetProcessor = (value) => ({
-  top: value,
-  bottom: value,
-  left: value,
-  right: value,
-});
+export const processInset: InsetProcessor = (value) => {
+  'worklet';
+  return {
+    top: value,
+    bottom: value,
+    left: value,
+    right: value,
+  };
+};
 
-export const processInsetBlock: InsetProcessor = (value) => ({
-  top: value,
-  bottom: value,
-});
+export const processInsetBlock: InsetProcessor = (value) => {
+  'worklet';
+  return {
+    top: value,
+    bottom: value,
+  };
+};
 
-export const processInsetInline: InsetProcessor = (value) => ({
-  left: value,
-  right: value,
-});
+export const processInsetInline: InsetProcessor = (value) => {
+  'worklet';
+  return {
+    left: value,
+    right: value,
+  };
+};

package/src/common/style/processors/others.ts

@@ -3,11 +3,14 @@ import { ReanimatedError } from '../../errors';
 import type { ValueProcessor } from '../../types';
 
 export const ERROR_MESSAGES = {
-  unsupportedAspectRatio: (ratio: string | number) =>
-    `Unsupported aspect ratio: ${ratio}. Expected a number or a string in "a/b" format.`,
+  unsupportedAspectRatio(ratio: string | number) {
+    'worklet';
+    return `Unsupported aspect ratio: ${ratio}. Expected a number or a string in "a/b" format.`;
+  },
 };
 
 export const processAspectRatio: ValueProcessor<number | string> = (value) => {
+  'worklet';
   if (typeof value === 'number' || !isNaN(+value)) {
     return +value;
   } else if (typeof value === 'string') {
@@ -24,7 +27,10 @@ export const processAspectRatio: ValueProcessor<number | string> = (value) => {
   throw new ReanimatedError(ERROR_MESSAGES.unsupportedAspectRatio(value));
 };
 
-export const processGap: ValueProcessor<number | string> = (value) => ({
-  rowGap: value,
-  columnGap: value,
-});
+export const processGap: ValueProcessor<number | string> = (value) => {
+  'worklet';
+  return {
+    rowGap: value,
+    columnGap: value,
+  };
+};

package/src/common/style/processors/shadows.ts

@@ -1,5 +1,4 @@
 'use strict';
-'worklet';
 import type { BoxShadowValue } from 'react-native';
 
 import { IS_ANDROID } from '../../constants';
@@ -9,11 +8,14 @@ import { parseBoxShadowString } from '../../utils';
 import { processColor } from './colors';
 
 const ERROR_MESSAGES = {
-  notArrayObject: (value: object) =>
-    `Box shadow value must be a string or an array of shadow objects (e.g. [{ offsetX, offsetY, color }]). Received: ${JSON.stringify(value)}.`,
-
-  invalidColor: (color: string, boxShadow: string) =>
-    `Invalid color "${color}" in box shadow "${boxShadow}".`,
+  notArrayObject(value: object) {
+    'worklet';
+    return `Box shadow value must be a string or an array of shadow objects (e.g. [{ offsetX, offsetY, color }]). Received: ${JSON.stringify(value)}.`;
+  },
+  invalidColor(color: string, boxShadow: string) {
+    'worklet';
+    return `Invalid color "${color}" in box shadow "${boxShadow}".`;
+  },
 };
 
 export type ProcessedBoxShadowValue = {
@@ -26,6 +28,7 @@ export type ProcessedBoxShadowValue = {
 };
 
 const parseBlurRadius = (value: string) => {
+  'worklet';
   if (IS_ANDROID) {
     // Android crashes when blurRadius is smaller than 1
     return Math.max(parseFloat(value), 1);
@@ -37,6 +40,7 @@ export const processBoxShadow: ValueProcessor<
   ReadonlyArray<BoxShadowValue> | string,
   ProcessedBoxShadowValue[] | undefined
 > = (value, context) => {
+  'worklet';
   if (value === 'none') {
     return;
   }

package/src/common/style/processors/transform.ts

@@ -1,5 +1,4 @@
 'use strict';
-'worklet';
 import { ReanimatedError } from '../../errors';
 import type { TransformsArray, ValueProcessor } from '../../types';
 import { isAngle, isNumber, isNumberArray, isPercentage } from '../../utils';
@@ -10,6 +9,7 @@ export const ERROR_MESSAGES = {
 };
 
 function parseValues(valueString: string): (string | number)[] {
+  'worklet';
   return valueString.split(',').map((value) => {
     const trimmedValue = value.trim();
     if (['deg', 'rad', '%'].some((unit) => trimmedValue.endsWith(unit))) {
@@ -21,18 +21,21 @@ function parseValues(valueString: string): (string | number)[] {
 }
 
 function parseTranslateX(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && (isNumber(values[0]) || isPercentage(values[0]))
     ? [{ translateX: values[0] }]
     : [];
 }
 
 function parseTranslateY(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && (isNumber(values[0]) || isPercentage(values[0]))
     ? [{ translateY: values[0] }]
     : [];
 }
 
 function parseTranslate(values: (number | string)[]): TransformsArray {
+  'worklet';
   if (values.length > 2) {
     return [];
   }
@@ -43,18 +46,21 @@ function parseTranslate(values: (number | string)[]): TransformsArray {
 }
 
 function parseScaleX(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && isNumber(values[0])
     ? [{ scaleX: values[0] }]
     : [];
 }
 
 function parseScaleY(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && isNumber(values[0])
     ? [{ scaleY: values[0] }]
     : [];
 }
 
 function parseScale(values: (number | string)[]): TransformsArray {
+  'worklet';
   if (values.length > 2) {
     return [];
   }
@@ -71,6 +77,7 @@ function parseRotate(
   key: string,
   values: (string | number)[]
 ): TransformsArray {
+  'worklet';
   return values.length === 1 && (isAngle(values[0]) || values[0] === 0)
     ? ([
         { [key]: values[0] === 0 ? '0deg' : values[0] },
@@ -79,18 +86,21 @@ function parseRotate(
 }
 
 function parseSkewX(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && (isAngle(values[0]) || values[0] === 0)
     ? [{ skewX: values[0] === 0 ? '0deg' : values[0] }]
     : [];
 }
 
 function parseSkewY(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && (isAngle(values[0]) || values[0] === 0)
     ? [{ skewY: values[0] === 0 ? '0deg' : values[0] }]
     : [];
 }
 
 function parseSkew(values: (number | string)[]): TransformsArray {
+  'worklet';
   if (values.length > 2) {
     return [];
   }
@@ -101,6 +111,7 @@ function parseSkew(values: (number | string)[]): TransformsArray {
 }
 
 function parseMatrix(values: (number | string)[]): TransformsArray {
+  'worklet';
   let matrixValues: number[] = [];
 
   if (isNumberArray(values)) {
@@ -121,12 +132,14 @@ function parseMatrix(values: (number | string)[]): TransformsArray {
 }
 
 function parsePerspective(values: (number | string)[]): TransformsArray {
+  'worklet';
   return values.length === 1 && isNumber(values[0])
     ? [{ perspective: values[0] }]
     : [];
 }
 
 const parseTransformProperty = (transform: string): TransformsArray => {
+  'worklet';
   const [key, valueString] = transform.split(/\(\s*/);
   const values = parseValues(valueString.replace(/\)$/g, ''));
 
@@ -166,6 +179,7 @@ const parseTransformProperty = (transform: string): TransformsArray => {
 export const processTransform: ValueProcessor<TransformsArray | string> = (
   value
 ) => {
+  'worklet';
   if (typeof value !== 'string') {
     return value;
   }