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!! 🥳

[piaskowyk]

Instead of commenting out the entire file, you could use the skip method from the tests

[piaskowyk]

Suggested change

	boxShadow: ['color'],
	boxShadow: 'color',

I think we can just use a simple string instead of an array since we don't know of any more complicated structures. I understand that using an array would be a more flexible solution, but let's keep it simple for now.

[piaskowyk]

Instead of iterating over the entire prop object, let's iterate over NestedColorProperties and check if those properties exist in the prop object because the prop object can potentially have more fields than those listed in NestedColorProperties

[patrycjakalinska]

prop object being the general object with all the props passed (backgroundColor, width, boxShadow etc.)? Because in current approach I use the loop that was there before (loop through keys in props), and if there is a boxShadow in props (boxShadow being an array by default), I iterate through objects in array (most cases one object), and check for if there is a color prop in boxShadow object

Can you elaborate more? Do you want to move checking the NestedProp outside the parent loop?

[piaskowyk]

Do we also need to copy other objects from the style, such as transforms? 🤔

[patrycjakalinska]

In this approach we also copy transform yes, but it doesn't affect it - it only makes sure any nested the color property will work

[piaskowyk]

1. When updates[propName] is an array?
2. What about spreed operator?
3. We also need a proper commentary, as this change is not obvious :/
4. Is any change to avoid that copying here? - just wondering 🤔

[patrycjakalinska]

1. transform and boxShadow
2. spread operator removed problem of reference, but only copying prop to prop assured the independence of toValue and current (in other words it made sure the animation wouldn't jump)
3. on it!
4. in a meaning to avoid copying prop to prop? I tried some other approaches but only this guaranteed smooth animation