feat: Add support for boxShadow

[patrycjakalinska]

Summary

This PR introduces support for boxShadow - a new feature from React Native 0.76+ NewArch. At the same time it address #6687 .

• Adds parser for boxShadow prop, that transforms string into a boxShadow object.
• Adds Jest tests
• Fix colors flickering when run with withSpring

Runtime test are added for future fabric support in RuntimeTests.

Fixes #6687

Screen.Recording.2024-11-22.at.16.23.44.mov

Test plan

To test, paste this code snippet to EmptyExample and run.

EmptyExample code

import React from 'react';
import { Pressable, SafeAreaView, ScrollView, Text, View } from 'react-native';
import Animated, {
  Easing,
  interpolate,
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import processBoxShadow from 'react-native-reanimated/src/processBoxShadow';

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
const BUTTON_TRANSITION_TIME = 500;

const EmptyExample = () => {
  const pressed = useSharedValue<number>(0);

  const animatedBoxShadow = useAnimatedStyle(() => {
    const blurRadius = interpolate(pressed.value, [0, 1], [10, 0]);
    const color = interpolateColor(
      pressed.value,
      [0, 1],
      ['#57b495', '#31775d'] 
    );

    const boxShadow = `0px 4px ${blurRadius} 0px ${color}`;

    return {
      boxShadow,
    };
  });

  const backgroundColorStyle = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      pressed.value,
      [0, 1],
      ['#b1dfd0', '#57b495']
    );

    return {
      backgroundColor,
    };
  });

  const handlePressIn = () => {
    pressed.value = withTiming(1, {
      duration: BUTTON_TRANSITION_TIME,
      easing: Easing.out(Easing.ease),
    });
  };

  const handlePressOut = () => {
    pressed.value = withTiming(0, {
      duration: BUTTON_TRANSITION_TIME,
      easing: Easing.out(Easing.ease),
    });
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <ScrollView style={backgroundStyle}>
        <View
          style={{
            padding: 24,
          }}>
          <Text
            style={{
              fontSize: 18,
              color: '#001a72',
              fontWeight: 'bold',
              textAlign: 'center',
              marginBottom: 16,
            }}>
            The background color animation will work and so will the shadow ✨
          </Text>
          <Text
            style={{
              fontSize: 14,
              color: '#001a72',
              marginBottom: 8,
            }}>
            BoxShadow is officially supported by Reanimated 💅
          </Text>
          <AnimatedPressable
            style={[
              backgroundColorStyle,
              animatedBoxShadow,
              {
                padding: 16,
                borderRadius: 100,
                marginVertical: 16,
              },
            ]}
            onPressIn={handlePressIn}
            onPressOut={handlePressOut}>
            <Text style={{ color: '#001a72' }}>
              Hello I am button with shadow
            </Text>
          </AnimatedPressable>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const backgroundStyle = {
  backgroundColor: '#f8f9ff',
  flex: 1,
};

export default EmptyExample;

[tjzel]

Fix CI and we are good to go!

[tjzel]

Let's go a bit further. Let's see how boxShadow fares in both Jest and our runtime tests.

[tjzel]

Let's go!! 🥳