-
Notifications
You must be signed in to change notification settings - Fork 38
/
index.tsx
46 lines (37 loc) · 1.33 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { useEffect, useRef } from 'react';
import { Animated, Easing, StyleProp, ViewStyle } from 'react-native';
import Icon from '../../components/Icon';
import useUIKitTheme from '../../theme/useUIKitTheme';
type Props = {
size?: number;
color?: string;
style?: StyleProp<ViewStyle>;
};
const LoadingSpinner = ({ size = 24, color, style }: Props) => {
const { colors } = useUIKitTheme();
return (
<Rotate style={style}>
<Icon icon={'spinner'} size={size} color={color ?? colors.primary} />
</Rotate>
);
};
const useLoopAnimated = (duration: number, useNativeDriver = true) => {
const animated = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
Animated.timing(animated, { toValue: 1, duration, useNativeDriver, easing: Easing.inOut(Easing.linear) }),
{ resetBeforeIteration: true },
).start();
return () => {
animated.stopAnimation();
animated.setValue(0);
};
}, []);
return animated;
};
const Rotate = ({ children, style }: React.PropsWithChildren<{ style: StyleProp<ViewStyle> }>) => {
const loop = useLoopAnimated(1000);
const rotate = loop.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });
return <Animated.View style={[style, { transform: [{ rotate }] }]}>{children}</Animated.View>;
};
export default LoadingSpinner;