33 lines
791 B
TypeScript
33 lines
791 B
TypeScript
import React, { useEffect } from 'react';
|
|
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
|
|
|
|
import { CustomIcon } from '../../../CustomIcon';
|
|
import { useTheme } from '../../../../theme';
|
|
|
|
const Loading = () => {
|
|
const rotation = useSharedValue(0);
|
|
const { colors } = useTheme();
|
|
|
|
useEffect(() => {
|
|
rotation.value = withRepeat(
|
|
withTiming(360, {
|
|
duration: 1000,
|
|
easing: Easing.inOut(Easing.linear)
|
|
}),
|
|
-1
|
|
);
|
|
}, []);
|
|
|
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
transform: [{ rotate: `${rotation.value}deg` }]
|
|
}));
|
|
|
|
return (
|
|
<Animated.View style={[animatedStyle]}>
|
|
<CustomIcon name={'loading'} size={24} color={colors.buttonText} />
|
|
</Animated.View>
|
|
);
|
|
};
|
|
|
|
export default Loading;
|