(cherry-pick) fix: Support optional arguments in boxShadow string (#7386)

[patrycjakalinska]

Cherry pick of #7386
This PR updates the parseBoxShadowString function to handle boxShadow strings with missing optional arguments (blurRadius, spreadDistance, color).

It now gracefully handles input like:

• 10px 10px white (defaults blurRadius and spreadDistance to 0px)

• 10px 10px 5px white (defaults spreadDistance to 0px)

• 10px 10px (defaults remaining values, uses black as color)

The default happen on Native side where RN process it and defaults the missing values.

I've also added unit test with stripped string that make sure styles behave correctly.

I've also moved the string type check into the processBoxShadow.js file, since we want to support boxShadow values that are arrays of objects where individual properties can be strings with units. (The possibility to support this was already implemented but typeof newValue.boxShadow === 'string' prevented it from existing)

      boxShadow: [
       {
        // before that's how value had been provided
         offsetX: 10
         // now they can be provided also as strings with units
         offsetY: '4px',
         blurRadius,
         color,
       },
     ],

Test plan

Example Code

import React from 'react';
import { Pressable, Text, View } from 'react-native';
import Animated, {
  interpolate,
  interpolateColor,
  useAnimatedProps,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';
import { DefaultStyle } from 'react-native-reanimated/lib/typescript/hook/commonTypes';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

export default function EmptyExample() {
  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)']
    );

    return {
      boxShadow: `0px 4px ${blurRadius}px ${color}`,
    };
  });

  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 rgba(255, 0, 0, 1)',
          },
        ]}
        onPress={handlePress}>
        <Text>Button</Text>
      </AnimatedPressable>
    </View>
  );
}

Summary

Test plan

[MatiPl01]

LGTM