import { useEffect } from 'react'; import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, Easing, } from 'react-native-reanimated'; import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'; import { useUnistyles } from 'react-native-unistyles'; import { Color } from '@/styles/tokens/colors'; type SpinnerProps = { size?: number; color?: Color; /** * Whether the spinner is loading or not */ loading?: boolean; /** * Speed of the spinner in milliseconds */ speed?: number; }; function Spinner({ loading = true, ...props }: SpinnerProps) { if (!loading) { return null; } return ; } function SpinnerImpl({ size = 24, color: colorProp = 'foreground', speed = 800, }: SpinnerProps) { const { theme } = useUnistyles(); const color = theme.colors[colorProp]; const rotation = useSharedValue(0); useEffect(() => { rotation.value = withRepeat( withTiming(360, { duration: speed, easing: Easing.linear }), -1, false, ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [speed]); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${rotation.value}deg` }], })); return ( ); } export { Spinner }; export type { SpinnerProps };

Spinner

Installation

Usage

On this page