SlideIn

1import React, { useEffect } from 'react';
2import { ViewStyle, StyleProp, Dimensions } from 'react-native';
3import Animated, {
4  useSharedValue,
5  useAnimatedStyle,
6  withTiming,
7  withDelay,
8  Easing,
9} from 'react-native-reanimated';
10
11type Direction = 'left' | 'right' | 'top' | 'bottom';
12
13interface SlideInProps {
14  children: React.ReactNode;
15  direction?: Direction;
16  distance?: number;
17  delay?: number;
18  duration?: number;
19  style?: StyleProp<ViewStyle>;
20}
21
22const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
23
24export const SlideIn: React.FC<SlideInProps> = ({
25  children,
26  direction = 'left',
27  distance,
28  delay = 0,
29  duration = 500,
30  style,
31}) => {
32  const getInitialOffset = () => {
33    const defaultDistance = direction === 'left' || direction === 'right'
34      ? SCREEN_WIDTH
35      : SCREEN_HEIGHT;
36    const dist = distance ?? defaultDistance * 0.3;
37
38    switch (direction) {
39      case 'left': return { x: -dist, y: 0 };
40      case 'right': return { x: dist, y: 0 };
41      case 'top': return { x: 0, y: -dist };
42      case 'bottom': return { x: 0, y: dist };
43    }
44  };
45
46  const initialOffset = getInitialOffset();
47  const translateX = useSharedValue(initialOffset.x);
48  const translateY = useSharedValue(initialOffset.y);
49  const opacity = useSharedValue(0);
50
51  useEffect(() => {
52    const timingConfig = {
53      duration,
54      easing: Easing.out(Easing.ease),
55    };
56    
57    translateX.value = withDelay(delay, withTiming(0, timingConfig));
58    translateY.value = withDelay(delay, withTiming(0, timingConfig));
59    opacity.value = withDelay(delay, withTiming(1, { duration }));
60  }, []);
61
62  const animatedStyle = useAnimatedStyle(() => ({
63    transform: [
64      { translateX: translateX.value },
65      { translateY: translateY.value },
66    ],
67    opacity: opacity.value,
68  }));
69
70  return (
71    <Animated.View style={[style, animatedStyle]}>
72      {children}
73    </Animated.View>
74  );
75};
76
77export default SlideIn;