React Native: How to implement a pull-to-refresh with custom animation in React Native?

1import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
2import { Gesture, GestureDetector } from 'react-native-gesture-handler';
3
4function CustomRefresh({ onRefresh }) {
5  const translateY = useSharedValue(0);
6  const rotation = useSharedValue(0);
7
8  const gesture = Gesture.Pan()
9    .onUpdate((e) => {
10      if (e.translationY > 0) {
11        translateY.value = Math.min(e.translationY * 0.5, 100);
12        rotation.value = e.translationY * 2;
13      }
14    })
15    .onEnd(() => {
16      if (translateY.value > 60) {
17        onRefresh();
18      }
19      translateY.value = withTiming(0);
20      rotation.value = withTiming(0);
21    });
22
23  const animatedStyle = useAnimatedStyle(() => ({
24    transform: [
25      { translateY: translateY.value },
26      { rotate: `${rotation.value}deg` },
27    ],
28  }));
29
30  return (
31    <GestureDetector gesture={gesture}>
32      <Animated.View style={[styles.indicator, animatedStyle]}>
33        <Text>Pull to refresh</Text>
34      </Animated.View>
35    </GestureDetector>
36  );
37}