feat: Add support for boxShadow

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,100 @@
+// TODO: Restore when we add fabric support for runtime tests
+
+// import { useEffect } from 'react';
+// import { View, StyleSheet, BoxShadowValue } from 'react-native';
+// import Animated, { useSharedValue, withDelay, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+// import { ComparisonMode } from '../../ReJest/types';
+// import { describe, test, expect, render, useTestRef, getTestComponent, wait } from '../../ReJest/RuntimeTestsApi';
+
+// type BoxShadow = string | BoxShadowValue[];
+
+// describe('animation of BoxShadow', () => {
+//   enum Component {
+//     ACTIVE = 'ACTIVE',
+//     PASSIVE = 'PASSIVE',
+//   }
+//   function BoxShadowComponent({ startBoxShadow, finalBoxShadow }: { startBoxShadow: string; finalBoxShadow: string }) {
+//     const boxShadowActiveSV = useSharedValue(startBoxShadow);
+//     const boxShadowPassiveSV = useSharedValue(startBoxShadow);
+
+//     const refActive = useTestRef('ACTIVE');
+//     const refPassive = useTestRef('PASSIVE');
+
+//     const styleActive = useAnimatedStyle(() => {
+//       return {
+//         boxShadow: [withSpring(boxShadowActiveSV.value, { duration: 700 })],
+//       };
+//     });
+
+//     const stylePassive = useAnimatedStyle(() => {
+//       return {
+//         boxShadow: [boxShadowPassiveSV.value],
+//       };
+//     });
+
+//     useEffect(() => {
+//       const timeout = setTimeout(() => {
+//         boxShadowActiveSV.value = finalBoxShadow;
+//         boxShadowPassiveSV.value = finalBoxShadow;
+//       }, 1000);
+
+//       return () => clearTimeout(timeout);
+//     }, [finalBoxShadow]);
+
+//     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: BoxShadow; finalBoxShadow: BoxShadow }) => {
+//       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,23 @@ 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 nestedPropGroup = props[key] as StyleProps;
+      for (const groupKey in nestedPropGroup) {
+        const nestedProp = nestedPropGroup[groupKey] as StyleProps;
+
+        for (const propName in nestedProp) {
+          if (
+            NestedColorProperties[
+              key as keyof typeof NestedColorProperties
+            ].includes(propName)
+          ) {
+            nestedProp[propName] = processColor(nestedProp[propName]);
+          }
+        }
+      }
     }
   }
 }

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,15 @@ function styleUpdater(
           animationsActive
         );
         if (finished) {
-          last[propName] = updates[propName];
+          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;