lenooby09.tech
fork
Configure Feed
Select the types of activity you want to include in your feed.
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
fork
Configure Feed
Select the types of activity you want to include in your feed.
1import React from 'react'
2import Animated, {
3 Easing,
4 useAnimatedProps,
5 useSharedValue,
6 withDelay,
7 withTiming,
8} from 'react-native-reanimated'
9import Svg, {Circle, Path} from 'react-native-svg'
10
11import {Props, useCommonSVGProps} from '#/components/icons/common'
12
13const AnimatedPath = Animated.createAnimatedComponent(Path)
14const AnimatedCircle = Animated.createAnimatedComponent(Circle)
15
16const PATH = 'M14.1 27.2l7.1 7.2 16.7-16.8'
17
18export interface AnimatedCheckRef {
19 play(cb?: () => void): void
20}
21
22export interface AnimatedCheckProps extends Props {
23 playOnMount?: boolean
24}
25
26export const AnimatedCheck = React.forwardRef<
27 AnimatedCheckRef,
28 AnimatedCheckProps
29>(function AnimatedCheck({playOnMount, ...props}, ref) {
30 const {fill, size, style, ...rest} = useCommonSVGProps(props)
31 const circleAnim = useSharedValue(0)
32 const checkAnim = useSharedValue(0)
33
34 const circleAnimatedProps = useAnimatedProps(() => ({
35 strokeDashoffset: 166 - circleAnim.value * 166,
36 }))
37 const checkAnimatedProps = useAnimatedProps(() => ({
38 strokeDashoffset: 48 - 48 * checkAnim.value,
39 }))
40
41 const play = React.useCallback(
42 (cb?: () => void) => {
43 circleAnim.value = 0
44 checkAnim.value = 0
45
46 circleAnim.value = withTiming(1, {duration: 500, easing: Easing.linear})
47 checkAnim.value = withDelay(
48 500,
49 withTiming(1, {duration: 300, easing: Easing.linear}, cb),
50 )
51 },
52 [circleAnim, checkAnim],
53 )
54
55 React.useImperativeHandle(ref, () => ({
56 play,
57 }))
58
59 React.useEffect(() => {
60 if (playOnMount) {
61 play()
62 }
63 }, [play, playOnMount])
64
65 return (
66 <Svg
67 fill="none"
68 {...rest}
69 viewBox="0 0 52 52"
70 width={size}
71 height={size}
72 style={style}>
73 <AnimatedCircle
74 animatedProps={circleAnimatedProps}
75 cx="26"
76 cy="26"
77 r="24"
78 fill="none"
79 stroke={fill}
80 strokeWidth={4}
81 strokeDasharray={166}
82 />
83 <AnimatedPath
84 animatedProps={checkAnimatedProps}
85 stroke={fill}
86 d={PATH}
87 strokeWidth={4}
88 strokeDasharray={48}
89 />
90 </Svg>
91 )
92})