Basic animated view

squarenotsquare/src/screens/Splash.js

@@ -1,12 +1,51 @@
 import React from "react";
-import { Text, View } from "react-native";
-import { useState } from "react";
+import { Animated, Easing, Text, View } from "react-native";
+import { useEffect, useState } from "react";
+import { styles } from './styles/AppStyles';
+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 Splash(props){
 
+  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 (
-    <View>
-      <Text style={{color: 'black'}}>test</Text>
+    <View style={[styles.flex]}>
+      <View style={styles.flexHalf}>
+        <Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}>
+          Square Not Square
+        </Text>
+      </View>
+      <View style={styles.flexHalf}>
+        <Text style={[styles.largeFont, styles.centeredText, styles.darkText]}>
+          Loading...
+        </Text>
+      </View>
+      <View style={[styles.flex, styles.centeredItems]}>
+        <Animated.View style={{ transform: [{ rotate: spin }]}}>
+        <MaterialIcon
+            name={Icons.squareIcons.square}
+            color={Colors.material.green800}
+            size={Metrics.icons.splashIcon} 
+          />
+        </Animated.View>
+      </View>
     </View>
   );
 }