From 49c7c0a6ca8b77ea65ea61509cd1397afa9adf5c Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Mon, 1 Aug 2022 21:38:29 -0500
Subject: [PATCH] move spinner to separate class

---
 squarenotsquare/src/components/Spinner.js | 39 +++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 squarenotsquare/src/components/Spinner.js

diff --git a/squarenotsquare/src/components/Spinner.js b/squarenotsquare/src/components/Spinner.js
new file mode 100644
index 0000000..0f23561
--- /dev/null
+++ b/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;
\ No newline at end of file