Pull to Refresh

1import React, { useEffect, useState } from "react"
2import { Text, View, type StyleProp, type ViewStyle } from "react-native"
3import { Gesture, GestureDetector } from "react-native-gesture-handler"
4import Animated, {
5  Easing,
6  interpolate,
7  useAnimatedProps,
8  useAnimatedScrollHandler,
9  useAnimatedStyle,
10  useReducedMotion,
11  useSharedValue,
12  withRepeat,
13  withSpring,
14  withTiming,
15} from "react-native-reanimated"
16import { scheduleOnRN } from "react-native-worklets"
17import Svg, { Circle, G, Path, Rect } from "react-native-svg"
18const AG = Animated.createAnimatedComponent(G)
19export interface PullToRefreshProps {
20  children: React.ReactNode
21  onRefresh: () => void | Promise<void>
22  refreshing?: boolean
23  disabled?: boolean
24  threshold?: number
25  maxPull?: number
26  holdHeight?: number
27  height?: number
28  contentContainerStyle?: StyleProp<ViewStyle>
29  backgroundColor?: string
30  textColor?: string
31  pullLabel?: string
32  releaseLabel?: string
33  refreshingLabel?: string
34  testID?: string
35}
36export function PullToRefresh({
37  children,
38  onRefresh,
39  refreshing,
40  disabled = false,
41  threshold = 76,
42  maxPull = 132,
43  holdHeight = 68,
44  height = 340,
45  contentContainerStyle,
46  backgroundColor = "#1e1e1e",
47  textColor = "#888",
48  pullLabel = "Pull to refresh",
49  releaseLabel = "Release to refresh",
50  refreshingLabel = "Refreshing",
51  testID,
52}: PullToRefreshProps) {
53  const [localBusy, setLocalBusy] = useState(false),
54    [ready, setReady] = useState(false),
55    busy = refreshing ?? localBusy
56  const reduced = useReducedMotion(),
57    offset = useSharedValue(0),
58    scrollY = useSharedValue(0),
59    active = useSharedValue(false),
60    readyUI = useSharedValue(false),
61    spin = useSharedValue(0)
62  async function refresh() {
63    if (busy) return
64    setLocalBusy(true)
65    try {
66      await onRefresh()
67    } finally {
68      setLocalBusy(false)
69      setReady(false)
70      offset.value = withSpring(0, { damping: 40, stiffness: 420, mass: 0.5 })
71    }
72  }
73  useEffect(() => {
74    offset.value = reduced
75      ? busy
76        ? holdHeight
77        : 0
78      : withSpring(busy ? holdHeight : 0, { damping: 40, stiffness: 420, mass: 0.5 })
79    spin.value =
80      busy && !reduced ? withRepeat(withTiming(360, { duration: 900, easing: Easing.bezier(0.77, 0, 0.175, 1) }), -1) : 0
81  }, [busy, holdHeight, reduced, offset, spin])
82  const native = Gesture.Native()
83  const pull = Gesture.Pan()
84    .simultaneousWithExternalGesture(native)
85    .activeOffsetY(8)
86    .failOffsetX([-24, 24])
87    .enabled(!disabled && !busy)
88    .onStart(() => {
89      active.value = scrollY.value <= 0
90    })
91    .onUpdate((e) => {
92      if (!active.value) return
93      offset.value =
94        maxPull * (1 - Math.exp(-Math.max(0, e.translationY) / maxPull))
95      const next = offset.value >= threshold
96      if (next !== readyUI.value) {
97        readyUI.value = next
98        scheduleOnRN(setReady, next)
99      }
100    })
101    .onEnd(() => {
102      if (active.value && readyUI.value) {
103        offset.value = withSpring(holdHeight, { damping: 40, stiffness: 420, mass: 0.5 })
104        scheduleOnRN(refresh)
105      } else offset.value = withSpring(0, { damping: 40, stiffness: 420, mass: 0.5 })
106      readyUI.value = false
107      active.value = false
108    })
109    .onFinalize(() => {
110      if (active.value)
111        offset.value = withSpring(0, { damping: 40, stiffness: 420, mass: 0.5 })
112      active.value = false
113    })
114  const scrolled = useAnimatedScrollHandler((e) => {
115    scrollY.value = e.contentOffset.y
116  })
117  const content = useAnimatedStyle(() => ({
118    transform: [{ translateY: offset.value }],
119  }))
120  const indicator = useAnimatedStyle(() => ({
121    opacity: interpolate(offset.value, [0, 10, threshold], [0, 0.45, 1], "clamp"),
122    transform: [
123      { scale: reduced ? 1 : interpolate(offset.value, [0, threshold], [0.86, 1], "clamp") },
124    ],
125  }))
126  const buddy = useAnimatedStyle(() => {
127    const p = Math.min(1, offset.value / threshold)
128    return { transform: [{ translateY: reduced ? 0 : -7+7*p }, { rotate: `${reduced ? 0 : -10+10*p}deg` }, { scaleY: reduced ? 1 : interpolate(p, [0,.55,1], [.68,1.1,.92]) }] }
129  })
130  const orbit = useAnimatedProps(() => ({ transform: `translate(18 18) rotate(${busy ? spin.value : ready ? 0 : -35}) translate(-18 -18)` }))
131  const eyes = useAnimatedProps(() => ({ transform: `translate(18 16) scale(1 ${busy && !reduced ? interpolate(spin.value,[0,90,180,270,360],[1,1,.15,1,1]) : ready ? 1.18 : 1}) translate(-18 -16)` }))
132  return (
133    <View
134      testID={testID}
135      style={{ height, borderRadius: 22, backgroundColor, overflow: "hidden" }}
136    >
137      <Animated.View
138        pointerEvents="none"
139        style={[
140          {
141            position: "absolute",
142            top: 0,
143            left: 0,
144            right: 0,
145            alignItems: "center",
146            height: 68,
147            justifyContent: "center",
148            gap: 2,
149          },
150          indicator,
151        ]}
152      >
153        <Animated.View style={buddy}>
154          <Svg width={36} height={36} viewBox="0 0 36 36">
155            <AG animatedProps={orbit} opacity={ready || busy ? 1 : 0}><Path d="M18 2.5a15.5 15.5 0 0 1 12.7 6.6" fill="none" stroke={textColor} strokeWidth={1.5} strokeLinecap="round" /><Circle cx={31.3} cy={10.2} r={2.2} fill="#fff" /></AG>
156            <Rect x={7} y={7} width={22} height={22} rx={9} fill="#fff" />
157            <AG animatedProps={eyes}><Circle cx={14.2} cy={16} r={1.45} fill="#141414" /><Circle cx={21.8} cy={16} r={1.45} fill="#141414" /></AG>
158            <Path d={ready ? "M14 20.5c1 2.4 7 2.4 8 0" : "M14.5 21h7"} fill="none" stroke="#141414" strokeWidth={1.5} strokeLinecap="round" opacity={busy ? 0 : 1} />
159            {busy && <Circle cx={18} cy={21} r={1.6} fill="#141414" />}
160          </Svg>
161        </Animated.View>
162        <Text
163          accessibilityLiveRegion="polite"
164          style={{ color: textColor, fontSize: 11 }}
165        >
166          {busy ? refreshingLabel : ready ? releaseLabel : pullLabel}
167        </Text>
168      </Animated.View>
169      <GestureDetector gesture={pull}>
170        <Animated.View style={[{ flex: 1 }, content]}>
171          <GestureDetector gesture={native}>
172            <Animated.ScrollView
173              bounces={false}
174              overScrollMode="never"
175              onScroll={scrolled}
176              scrollEventThrottle={16}
177              showsVerticalScrollIndicator={false}
178              contentContainerStyle={[{
179                padding: 20,
180                paddingBottom: maxPull + 20,
181              }, contentContainerStyle]}
182              accessibilityActions={[
183                { name: "refresh", label: "Refresh content" },
184              ]}
185              onAccessibilityAction={(e) => {
186                if (
187                  e.nativeEvent.actionName === "refresh" &&
188                  !busy &&
189                  !disabled
190                )
191                  void refresh()
192              }}
193            >
194              {children}
195            </Animated.ScrollView>
196          </GestureDetector>
197        </Animated.View>
198      </GestureDetector>
199    </View>
200  )
201}