feat: Add support for boxShadow

apps/common-app/src/examples/RuntimeTests/ReJest/matchers/Comparators.ts

@@ -113,6 +113,7 @@ export function getComparisonModeForProp(prop: ValidPropNames): ComparisonMode {
     top: ComparisonMode.PIXEL,
     left: ComparisonMode.PIXEL,
     backgroundColor: ComparisonMode.COLOR,
+    boxShadow: ComparisonMode.ARRAY,
   };
   return propToComparisonModeDict[prop];
 }

apps/common-app/src/examples/RuntimeTests/ReJest/types.ts

@@ -59,11 +59,19 @@ export type TestSuite = {
   decorator?: DescribeDecorator | null;
 };
 
-export type ValidPropNames = 'zIndex' | 'opacity' | 'width' | 'height' | 'top' | 'left' | 'backgroundColor';
+export type ValidPropNames =
+  | 'zIndex'
+  | 'opacity'
+  | 'width'
+  | 'height'
+  | 'top'
+  | 'left'
+  | 'backgroundColor'
+  | 'boxShadow';
 
 export function isValidPropName(propName: string): propName is ValidPropNames {
   'worklet';
-  return ['zIndex', 'opacity', 'width', 'height', 'top', 'left', 'backgroundColor'].includes(propName);
+  return ['zIndex', 'opacity', 'width', 'height', 'top', 'left', 'backgroundColor', 'boxShadow'].includes(propName);
 }
 
 export enum ComparisonMode {

apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -53,6 +53,12 @@ export default function RuntimeTestsExample() {
             require('./tests/core/useSharedValue/animationsCompilerApi.test');
           },
         },
+        {
+          testSuiteName: 'props',
+          importTest: () => {
+            require('./tests/props/boxShadow.test');
+          },
+        },
         {
           testSuiteName: 'utilities',
           importTest: () => {

apps/common-app/src/examples/RuntimeTests/tests/props/boxShadow.test.tsx

@@ -0,0 +1,107 @@
+// TODO: Enable this test after RuntimeTests are implemented on Fabric
+
+import { useEffect } from 'react';
+import type { BoxShadowValue } from 'react-native';
+import type { AnimatableValue } from 'react-native-reanimated';
+import type { DefaultStyle } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+import { ComparisonMode } from '../../ReJest/types';
+import { View, StyleSheet } from 'react-native';
+import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+import { describe, test, expect, render, useTestRef, getTestComponent, wait } from '../../ReJest/RuntimeTestsApi';
+
+describe.skip('animation of BoxShadow', () => {
+  enum Component {
+    ACTIVE = 'ACTIVE',
+    PASSIVE = 'PASSIVE',
+  }
+  function BoxShadowComponent({
+    startBoxShadow,
+    finalBoxShadow,
+  }: {
+    startBoxShadow: BoxShadowValue;
+    finalBoxShadow: BoxShadowValue;
+  }) {
+    const boxShadowActiveSV = useSharedValue(startBoxShadow);
+    const boxShadowPassiveSV = useSharedValue(startBoxShadow);
+
+    const refActive = useTestRef('ACTIVE');
+    const refPassive = useTestRef('PASSIVE');
+
+    const styleActive = useAnimatedStyle(() => {
+      return {
+        boxShadow: [withSpring(boxShadowActiveSV.value as unknown as AnimatableValue, { duration: 700 })],
+      } as DefaultStyle;
+    });
+
+    const stylePassive = useAnimatedStyle(() => {
+      return {
+        boxShadow: [boxShadowPassiveSV.value],
+      } as DefaultStyle;
+    });
+
+    useEffect(() => {
+      const timeout = setTimeout(() => {
+        boxShadowActiveSV.value = finalBoxShadow;
+        boxShadowPassiveSV.value = finalBoxShadow;
+      }, 1000);
+
+      return () => clearTimeout(timeout);
+    }, [finalBoxShadow, boxShadowActiveSV, boxShadowPassiveSV]);
+
+    return (
+      <View style={styles.container}>
+        <Animated.View ref={refActive} style={[styles.animatedBox, styleActive]} />
+        <Animated.View ref={refPassive} style={[styles.animatedBox, stylePassive]} />
+      </View>
+    );
+  }
+
+  test.each([
+    {
+      startBoxShadow: {
+        offsetX: -10,
+        offsetY: 6,
+        blurRadius: 7,
+        spreadDistance: 10,
+        color: 'rgba(245, 40, 145, 0.8)',
+      },
+
+      finalBoxShadow: {
+        offsetX: -20,
+        offsetY: 4,
+        blurRadius: 10,
+        spreadDistance: 20,
+        color: 'rgba(39, 185, 245, 0.8)',
+      },
+
+      description: 'one boxShadow',
+    },
+  ])(
+    '${description}, from ${startBoxShadow} to ${finalBoxShadow}',
+    async ({ startBoxShadow, finalBoxShadow }: { startBoxShadow: BoxShadowValue; finalBoxShadow: BoxShadowValue }) => {
+      await render(<BoxShadowComponent startBoxShadow={startBoxShadow} finalBoxShadow={finalBoxShadow} />);
+
+      const activeComponent = getTestComponent(Component.ACTIVE);
+      const passiveComponent = getTestComponent(Component.PASSIVE);
+
+      await wait(200);
+
+      expect(await activeComponent.getAnimatedStyle('boxShadow')).toBe([finalBoxShadow], ComparisonMode.ARRAY);
+      expect(await passiveComponent.getAnimatedStyle('boxShadow')).toBe([finalBoxShadow], ComparisonMode.ARRAY);
+    },
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  animatedBox: {
+    backgroundColor: 'palevioletred',
+    width: 100,
+    height: 100,
+    margin: 30,
+  },
+});

packages/react-native-reanimated/__tests__/props.test.tsx

@@ -0,0 +1,158 @@
+import { View, Pressable, Text } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { render, fireEvent } from '@testing-library/react-native';
+import Animated, {
+  interpolate,
+  interpolateColor,
+  useSharedValue,
+  useAnimatedStyle,
+} from '../src';
+import { getAnimatedStyle } from '../src/jestUtils';
+import { processBoxShadow } from '../src/processBoxShadow';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const AnimatedComponent = () => {
+  const pressed = useSharedValue(0);
+
+  const animatedBoxShadow = useAnimatedStyle(() => {
+    const blurRadius = interpolate(pressed.value, [0, 1], [10, 0]);
+    const color = interpolateColor(
+      pressed.value,
+      [0, 1],
+      ['rgba(255, 0, 0, 1)', 'rgba(0, 0, 255, 1)']
+    );
+
+    const boxShadow = `0px 4px ${blurRadius}px 0px ${color}`;
+
+    return {
+      boxShadow,
+    };
+  });
+
+  const handlePress = () => {
+    pressed.value = pressed.value === 0 ? 1 : 0;
+  };
+
+  return (
+    <View
+      style={{
+        padding: 24,
+      }}>
+      <AnimatedPressable
+        testID={'pressable'}
+        style={[
+          animatedBoxShadow,
+          {
+            backgroundColor: 'red',
+            padding: 16,
+            boxShadow: '0px 4px 10px 0px rgba(255, 0, 0, 1)',
+          },
+        ]}
+        onPress={handlePress}>
+        <Text>Button</Text>
+      </AnimatedPressable>
+    </View>
+  );
+};
+
+const getDefaultStyle = () => ({
+  padding: 16,
+  backgroundColor: 'red',
+  boxShadow: '0px 4px 10px 0px rgba(255, 0, 0, 1)',
+});
+
+const getMultipleBoxShadowStyle = () => ({
+  padding: 16,
+  backgroundColor: 'red',
+  boxShadow:
+    '-10px 6px 8px 10px rgba(255, 0, 0, 1), 10px 0px 15px 6px rgba(0, 0, 255, 1)',
+});
+
+describe('Test of boxShadow prop', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  test('boxShadow prop animation', () => {
+    const style = getDefaultStyle();
+
+    const { getByTestId } = render(<AnimatedComponent />);
+    const pressable = getByTestId('pressable');
+
+    expect(pressable.props.style.boxShadow).toBe(
+      '0px 4px 10px 0px rgba(255, 0, 0, 1)'
+    );
+    expect(pressable).toHaveAnimatedStyle(style);
+    fireEvent.press(pressable);
+    jest.advanceTimersByTime(600);
+    style.boxShadow = '0px 4px 0px 0px rgba(0, 0, 255, 1)';
+    expect(pressable).toHaveAnimatedStyle(style);
+  });
+
+  test('boxShadow prop animation, get animated style', () => {
+    const { getByTestId } = render(<AnimatedComponent />);
+    const pressable = getByTestId('pressable');
+
+    fireEvent.press(pressable);
+    jest.advanceTimersByTime(600);
+
+    const style = getAnimatedStyle(pressable);
+    expect((style as ViewStyle).boxShadow).toBe(
+      '0px 4px 0px 0px rgba(0, 0, 255, 1)'
+    );
+  });
+  test('one boxShadow string parsing', () => {
+    const { getByTestId } = render(<AnimatedComponent />);
+    const pressable = getByTestId('pressable');
+
+    expect(pressable.props.style.boxShadow).toBe(
+      '0px 4px 10px 0px rgba(255, 0, 0, 1)'
+    );
+
+    processBoxShadow(pressable.props.style);
+
+    expect(pressable.props.style.boxShadow).toEqual([
+      {
+        offsetX: 0,
+        offsetY: 4,
+        blurRadius: 10,
+        spreadDistance: 0,
+        color: 'rgba(255, 0, 0, 1)',
+      },
+    ]);
+
+    const style = getAnimatedStyle(pressable);
+    expect((style as ViewStyle).boxShadow).toBe(
+      '0px 4px 10px 0px rgba(255, 0, 0, 1)'
+    );
+  });
+
+  test('two boxShadows string parsing', () => {
+    const multipleBoxShadowStyle = getMultipleBoxShadowStyle();
+
+    processBoxShadow(multipleBoxShadowStyle);
+
+    expect(multipleBoxShadowStyle.boxShadow).toEqual([
+      {
+        offsetX: -10,
+        offsetY: 6,
+        blurRadius: 8,
+        spreadDistance: 10,
+        color: 'rgba(255, 0, 0, 1)',
+      },
+      {
+        offsetX: 10,
+        offsetY: 0,
+        blurRadius: 15,
+        spreadDistance: 6,
+        color: 'rgba(0, 0, 255, 1)',
+      },
+    ]);
+  });
+});

packages/react-native-reanimated/src/Colors.ts

@@ -349,6 +349,10 @@ export const ColorProperties = makeShareable([
   'stroke',
 ]);
 
+const NestedColorProperties = makeShareable({
+  boxShadow: 'color',
+});
+
 // // ts-prune-ignore-next Exported for the purpose of tests only
 export function normalizeColor(color: unknown): number | null {
   'worklet';
@@ -675,6 +679,19 @@ export function processColorsInProps(props: StyleProps) {
   for (const key in props) {
     if (ColorProperties.includes(key)) {
       props[key] = processColor(props[key]);
+    } else if (
+      NestedColorProperties[key as keyof typeof NestedColorProperties]
+    ) {
+      const propGroupList = props[key] as StyleProps[];
+      for (const propGroup of propGroupList) {
+        const nestedPropertyName =
+          NestedColorProperties[key as keyof typeof NestedColorProperties];
+        if (propGroup[nestedPropertyName] !== undefined) {
+          propGroup[nestedPropertyName] = processColor(
+            propGroup[nestedPropertyName]
+          );
+        }
+      }
     }
   }
 }

packages/react-native-reanimated/src/hook/useAnimatedStyle.ts

@@ -34,6 +34,7 @@ import type {
   AnimatedStyle,
 } from '../commonTypes';
 import { isWorkletFunction } from '../commonTypes';
+import { processBoxShadow } from '../processBoxShadow';
 import { ReanimatedError } from '../errors';
 
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
@@ -150,7 +151,16 @@ function runAnimations(
         animation.callback && animation.callback(true /* finished */);
       }
     }
-    result[key] = animation.current;
+    /*
+     * If `animation.current` is an object, spread its properties into a new object
+     * to avoid modifying the original reference. This ensures when `newValues` has a nested color prop, it stays unparsed
+     * in rgba format, allowing the animation to run correctly.
+     */
+    if (typeof animation.current === 'object') {
+      result[key] = { ...animation.current };
+    } else {
+      result[key] = animation.current;
+    }
     return finished;
   } else if (typeof animation === 'object') {
     result[key] = {};
@@ -191,6 +201,9 @@ function styleUpdater(
   let hasAnimations = false;
   let frameTimestamp: number | undefined;
   let hasNonAnimatedValues = false;
+  if (typeof newValues.boxShadow === 'string') {
+    processBoxShadow(newValues);
+  }
   for (const key in newValues) {
     const value = newValues[key];
     if (isAnimated(value)) {
@@ -226,7 +239,21 @@ function styleUpdater(
           animationsActive
         );
         if (finished) {
-          last[propName] = updates[propName];
+          /**
+           * If the animated prop is an array, we need to directly set each
+           * property (manually spread it). This prevents issues where the color
+           * prop might be incorrectly linked with its `toValue` and `current`
+           * states, causing abrupt transitions or 'jumps' in animation states.
+           */
+          if (Array.isArray(updates[propName])) {
+            updates[propName].forEach((obj: StyleProps) => {
+              for (const prop in obj) {
+                last[propName][prop] = obj[prop];
+              }
+            });
+          } else {
+            last[propName] = updates[propName];
+          }
           delete animations[propName];
         } else {
           allFinished = false;