Animating component styles

In a more complex example, I suggest creating a button with beautiful tappable feedback. This button will be built using the Pressable component that we learned about in Chapter 23, Responding to User Gestures. This component accepts the onPressIn, onLongPress, and onPressOut events. As a result of these events, we will be able to see how our touches will be reflected on the button.

Let’s start by defining SharedValue and AnimatedStyle:

  const radius = useSharedValue(30);
  const opacity = useSharedValue(1);
  const scale = useSharedValue(1);
  const color = useSharedValue(0);
  const backgroundColor = useDerivedValue(() => {
    return interpolateColor(color.value, [0, 1], ["orange",      "red"]);
     });
  const animatedStyles = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      borderRadius: radius.value,
      transform: [{ scale: scale.value }],
      backgroundColor: backgroundColor...