expo-duooomi-app/@share/components/SpinningLoader.tsx

24 lines
706 B
TypeScript

import { FontAwesome } from '@expo/vector-icons'
import { memo, useEffect } from 'react'
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'
const SpinningLoader = memo(() => {
const rotation = useSharedValue(0)
useEffect(() => {
rotation.value = withRepeat(withTiming(360, { duration: 1000, easing: Easing.linear }), -1, false)
}, [])
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ rotate: `${rotation.value}deg` }],
}))
return (
<Animated.View style={animatedStyle}>
<FontAwesome color="#FFE500" name="circle-o-notch" size={20} />
</Animated.View>
)
})
export default SpinningLoader