move spinner to separate class

squarenotsquare/src/components/Spinner.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Animated, Easing} from "react-native";
+import { useEffect } from "react";
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Icons from '../themes/Icons';
+import Colors from "../themes/Colors";
+import Metrics from "../themes/Metrics";
+
+const spinValue = new Animated.Value(0);
+
+function Spinner(){
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 3000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+    })).start();
+  }, []);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View style={{ transform: [{ rotate: spin }]}}>
+      <MaterialIcon
+        name={Icons.squareIcons.square}
+        color={Colors.material.green800}
+        size={Metrics.icons.splashIcon} 
+      />
+    </Animated.View>
+  )
+}
+
+export default Spinner;