Stagger

1import React, { useEffect } from 'react';
2import { ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withDelay,
7  withTiming,
8  Easing,
9} from 'react-native-reanimated';
10
11interface StaggerProps {
12  children: React.ReactNode[];
13  staggerDelay?: number;
14  initialDelay?: number;
15  duration?: number;
16  direction?: 'up' | 'down' | 'left' | 'right';
17  distance?: number;
18  style?: StyleProp<ViewStyle>;
19}
20
21interface StaggerItemProps {
22  children: React.ReactNode;
23  index: number;
24  staggerDelay: number;
25  initialDelay: number;
26  duration: number;
27  direction: 'up' | 'down' | 'left' | 'right';
28  distance: number;
29}
30
31const StaggerItem: React.FC<StaggerItemProps> = ({
32  children,
33  index,
34  staggerDelay,
35  initialDelay,
36  duration,
37  direction,
38  distance,
39}) => {
40  const opacity = useSharedValue(0);
41  const translateX = useSharedValue(
42    direction === 'left' ? -distance : direction === 'right' ? distance : 0
43  );
44  const translateY = useSharedValue(
45    direction === 'up' ? distance : direction === 'down' ? -distance : 0
46  );
47
48  useEffect(() => {
49    const delay = initialDelay + index * staggerDelay;
50    
51    const timingConfig = {
52      duration,
53      easing: Easing.out(Easing.ease),
54    };
55
56    opacity.value = withDelay(delay, withTiming(1, { duration }));
57    translateX.value = withDelay(delay, withTiming(0, timingConfig));
58    translateY.value = withDelay(delay, withTiming(0, timingConfig));
59  }, []);
60
61  const animatedStyle = useAnimatedStyle(() => ({
62    opacity: opacity.value,
63    transform: [
64      { translateX: translateX.value },
65      { translateY: translateY.value },
66    ],
67  }));
68
69  return (
70    <Animated.View style={animatedStyle}>
71      {children}
72    </Animated.View>
73  );
74};
75
76export const Stagger: React.FC<StaggerProps> = ({
77  children,
78  staggerDelay = 100,
79  initialDelay = 0,
80  duration = 400,
81  direction = 'up',
82  distance = 20,
83  style,
84}) => {
85  return (
86    <Animated.View style={style}>
87      {React.Children.map(children, (child, index) => (
88        <StaggerItem
89          key={index}
90          index={index}
91          staggerDelay={staggerDelay}
92          initialDelay={initialDelay}
93          duration={duration}
94          direction={direction}
95          distance={distance}
96        >
97          {child}
98        </StaggerItem>
99      ))}
100    </Animated.View>
101  );
102};
103
104export default Stagger;