AnimatedList

1import React from 'react';
2import { FlatList, FlatListProps, ViewStyle, StyleProp } from 'react-native';
3import Animated, {
4  FadeIn,
5  FadeOut,
6  SlideInRight,
7  SlideInDown,
8  SlideOutLeft,
9  SlideOutUp,
10  Layout,
11  Easing,
12} from 'react-native-reanimated';
13
14type AnimationType = 'fade' | 'slide' | 'slideUp';
15
16interface AnimatedListProps<T> extends Omit<FlatListProps<T>, 'renderItem'> {
17  data: T[];
18  renderItem: (info: { item: T; index: number }) => React.ReactNode;
19  animationType?: AnimationType;
20  staggerDelay?: number;
21  duration?: number;
22  itemStyle?: StyleProp<ViewStyle>;
23}
24
25const getEnteringAnimation = (
26  type: AnimationType,
27  index: number,
28  staggerDelay: number,
29  duration: number
30) => {
31  const delay = index * staggerDelay;
32
33  switch (type) {
34    case 'fade':
35      return FadeIn
36        .delay(delay)
37        .duration(duration)
38        .easing(Easing.out(Easing.ease));
39    case 'slide':
40      return SlideInRight
41        .delay(delay)
42        .duration(duration)
43        .easing(Easing.out(Easing.ease));
44    case 'slideUp':
45      return SlideInDown
46        .delay(delay)
47        .duration(duration)
48        .easing(Easing.out(Easing.ease));
49    default:
50      return FadeIn
51        .delay(delay)
52        .duration(duration)
53        .easing(Easing.out(Easing.ease));
54  }
55};
56
57const getExitingAnimation = (type: AnimationType, duration: number) => {
58  switch (type) {
59    case 'fade':
60      return FadeOut
61        .duration(duration)
62        .easing(Easing.in(Easing.ease));
63    case 'slide':
64      return SlideOutLeft
65        .duration(duration)
66        .easing(Easing.in(Easing.ease));
67    case 'slideUp':
68      return SlideOutUp
69        .duration(duration)
70        .easing(Easing.in(Easing.ease));
71    default:
72      return FadeOut
73        .duration(duration)
74        .easing(Easing.in(Easing.ease));
75  }
76};
77
78export function AnimatedList<T extends { id: string | number }>({
79  data,
80  renderItem,
81  animationType = 'fade',
82  staggerDelay = 50,
83  duration = 300,
84  itemStyle,
85  ...flatListProps
86}: AnimatedListProps<T>) {
87  return (
88    <FlatList
89      data={data}
90      keyExtractor={(item) => String(item.id)}
91      renderItem={({ item, index }) => (
92        <Animated.View
93          style={itemStyle}
94          entering={getEnteringAnimation(animationType, index, staggerDelay, duration)}
95          exiting={getExitingAnimation(animationType, duration)}
96          layout={Layout.duration(200).easing(Easing.out(Easing.ease))}
97        >
98          {renderItem({ item, index })}
99        </Animated.View>
100      )}
101      {...flatListProps}
102    />
103  );
104}
105
106export default AnimatedList;