[React Native] Reanimated.tips

foo.tsx

// TIP 1
//  - Using the useSharedValue hook
//  - Using the useAnimatedStyle hook

const AnimatedComponents = () => {
  const buttonPressed = () => {
    // Toggle the animation state based on button press
    isAnimating.value = !isAnimating.value;
  };

  // Shared values for animation
  const isAnimating = useSharedValue(false);
  const animationDuration = 500;

  // Animated styles for the first component
  const box1Style = useAnimatedStyle(() => {
    return {
      width: isAnimating.value ? withTiming(200, { duration: animationDuration }) : withTiming(100, { duration: animationDuration }),
      height: isAnimating.value ? withTiming(200, { duration: animationDuration }) : withTiming(100, { duration: animationDuration }),
      backgroundColor: isAnimating.value ? 'blue' : 'green',
    };
  });

  // Animated styles for the second component
  const box2Style = useAnimatedStyle(() => {
    return {
      transform: [
        { translateY: isAnimating.value ? withTiming(-50, { duration: animationDuration }) : withTiming(0, { duration: animationDuration }) },
      ],
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box1, box1Style]} />
      <Animated.View style={[styles.box2, box2Style]} />
      <TouchableOpacity onPress={buttonPressed} style={styles.button}>
        <Text style={styles.buttonText}>Animate</Text>
      </TouchableOpacity>
    </View>
  );
};
});