Bounce

1import React, { useEffect } from 'react';
2import { ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withSequence,
7  withTiming,
8  withDelay,
9  Easing,
10} from 'react-native-reanimated';
11
12interface BounceProps {
13  children: React.ReactNode;
14  delay?: number;
15  duration?: number;
16  style?: StyleProp<ViewStyle>;
17  intensity?: number;
18}
19
20export const Bounce: React.FC<BounceProps> = ({
21  children,
22  delay = 0,
23  duration = 600,
24  style,
25  intensity = 1.2,
26}) => {
27  const scale = useSharedValue(0);
28  const opacity = useSharedValue(0);
29
30  useEffect(() => {
31    // Match web CSS: 0% -> scale(0), 50% -> scale(1.2), 70% -> scale(0.9), 100% -> scale(1)
32    const phaseDuration = duration / 4;
33    
34    scale.value = withDelay(
35      delay,
36      withSequence(
37        withTiming(intensity, { 
38          duration: phaseDuration * 2, 
39          easing: Easing.out(Easing.ease) 
40        }),
41        withTiming(0.9, { 
42          duration: phaseDuration, 
43          easing: Easing.inOut(Easing.ease) 
44        }),
45        withTiming(1, { 
46          duration: phaseDuration, 
47          easing: Easing.out(Easing.ease) 
48        })
49      )
50    );
51    
52    opacity.value = withDelay(
53      delay, 
54      withTiming(1, { duration: duration / 3 })
55    );
56  }, []);
57
58  const animatedStyle = useAnimatedStyle(() => ({
59    transform: [{ scale: scale.value }],
60    opacity: opacity.value,
61  }));
62
63  return (
64    <Animated.View style={[style, animatedStyle]}>
65      {children}
66    </Animated.View>
67  );
68};
69
70export default Bounce;