chore: Make ValueProcessor inputs non-mutable (#8317)

## Summary

This PR changes the type of the `ValueProcessor` input to disallow
mutating it in place (e.g. changing array/object elements). We don't
want to allow that as we don't want to mutate the user-provided style
inputs passed in props.

Author: MatiPl01

packages/react-native-reanimated/src/common/processors/transformOrigin.ts

@@ -51,26 +51,30 @@ function getAllowedValues(axis: Axis, isArray: boolean): string {
 }
 
 export const ERROR_MESSAGES = {
-  invalidTransformOrigin: (value: TransformOrigin) =>
+  invalidTransformOrigin: (value: Readonly<TransformOrigin>) =>
     `Invalid transformOrigin: ${JSON.stringify(value)}. Expected 1-3 values.`,
   invalidValue: (
     value: string | number,
     axis: Axis,
-    origin: TransformOrigin,
+    origin: Readonly<TransformOrigin>,
     isArray: boolean
   ) =>
     `Invalid value "${value}" for the ${axis}-axis in transformOrigin ${JSON.stringify(
       origin
     )}. Allowed values: ${getAllowedValues(axis, isArray)}.`,
 };
 
-function maybeSwapComponents(components: (string | number)[]) {
+function maybeSwapComponents(components: ReadonlyArray<string | number>) {
   if (
     components[0] in VERTICAL_CONVERSIONS &&
     (components[1] === undefined || components[1] in HORIZONTAL_CONVERSIONS)
   ) {
-    [components[0], components[1]] = [components[1], components[0]];
+    const copy = [...components];
+    [copy[0], copy[1]] = [copy[1], copy[0]];
+    return copy;
   }
+
+  return components;
 }
 
 function parseValue(
@@ -118,14 +122,14 @@ export const processTransformOrigin: ValueProcessor<TransformOrigin> = (
   value
 ) => {
   const isArray = Array.isArray(value);
-  const components = isArray ? value : value.split(/\s+/);
+  let components = typeof value === 'string' ? value.split(/\s+/) : value;
   const customParse = isArray ? () => null : parsePx;
 
   if (components.length < 1 || components.length > 3) {
     throw new ReanimatedError(ERROR_MESSAGES.invalidTransformOrigin(value));
   }
 
-  maybeSwapComponents(components);
+  components = maybeSwapComponents(components);
 
   return [
     parseValue(

packages/react-native-reanimated/src/common/types.ts

@@ -1,8 +1,15 @@
 'use strict';
 export type Maybe<T> = T | null | undefined;
 
+/**
+ * Makes only mutable types (objects, arrays) readonly while leaving primitive
+ * types unchanged. This prevents type issues caused by making other types
+ * readonly, like Readonly<string> which isn't the same as string.
+ */
+export type NonMutable<T> = T extends object ? Readonly<T> : T;
+
 export type ValueProcessor<V, R = V> = (
-  value: V
+  value: NonMutable<V>
 ) => Maybe<R> | Record<string, R>;
 
 export type TransformOrigin = string | Array<string | number>;

packages/react-native-reanimated/src/css/native/style/processors/colors.ts

@@ -8,7 +8,7 @@ import {
 } from '../../../../common';
 
 export const ERROR_MESSAGES = {
-  invalidColor: (color: Maybe<ColorValue | number>) =>
+  invalidColor: (color: Readonly<ColorValue | number>) =>
     `Invalid color value: ${String(color)}`,
 };
 

packages/react-native-reanimated/src/css/web/style/types.ts

@@ -1,9 +1,9 @@
 'use strict';
-import type { Maybe } from '../../../common';
+import type { Maybe, NonMutable } from '../../../common';
 import type { AnyRecord } from '../../types';
 
 export type ValueProcessor<V> = (
-  value: V
+  value: NonMutable<V>
 ) => Maybe<string> | Record<string, string>;
 
 type ProcessedProps<P extends AnyRecord> = {