Animating styling components

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 24, 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 animatedStyles = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      color.value,
      [0, 1],
      ["orange", "red"]
    );
 &...