@mtec-solutions-org/design-system/dist/components/atoms/spinner/Spinner.js

A React Native Web design system library with theme and components

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import { Animated } from "react-native";
import { StyledSpinner } from "./Spinner.styles";
export default function Spinner({ size = 20, color = "primary", width = 2, }) {
    const spinValue = useRef(new Animated.Value(0)).current;
    useEffect(() => {
        const spin = () => {
            spinValue.setValue(0);
            Animated.timing(spinValue, {
                toValue: 1,
                duration: 1000,
                useNativeDriver: true,
            }).start(() => spin());
        };
        spin();
    }, [spinValue]);
    const rotate = spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ["0deg", "360deg"],
    });
    return (_jsx(Animated.View, { style: { transform: [{ rotate }] }, children: _jsx(StyledSpinner, { spinnerSize: size, spinnerColor: color, spinnerWidth: width }) }));
}