@sendbird/uikit-react-native-foundation/lib/module/ui/LoadingSpinner/index.js

A foundational UI kit for building chat-enabled React Native apps.

import React, { useEffect, useRef } from 'react';
import { Animated, Easing } from 'react-native';
import Icon from '../../components/Icon';
import useUIKitTheme from '../../theme/useUIKitTheme';
const LoadingSpinner = ({
  size = 24,
  color,
  style
}) => {
  const {
    colors
  } = useUIKitTheme();
  return /*#__PURE__*/React.createElement(Rotate, {
    style: style
  }, /*#__PURE__*/React.createElement(Icon, {
    icon: 'spinner',
    size: size,
    color: color ?? colors.primary
  }));
};
const useLoopAnimated = (duration, 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
}) => {
  const loop = useLoopAnimated(1000);
  const rotate = loop.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg']
  });
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [style, {
      transform: [{
        rotate
      }]
    }]
  }, children);
};
export default LoadingSpinner;
//# sourceMappingURL=index.js.map