Splash screen

squarenotsquare/src/screens/Splash.js

@@ -1,51 +1,22 @@
 import React from "react";
-import { Animated, Easing, Text, View } from "react-native";
+import { Image, Platform, 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){
+  let splashLogo = null;
 
-  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'],
-  });
-
+  if (Platform.OS === 'android') {
+    splashLogo = {uri: 'asset:/squarelogo.png'};
+  } else {
+    splashLogo = {url: 'squarelogo'}
+  }
   return (
-    <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 style={[styles.flex, styles.centeredJustify]}>
+      <Image
+        style={[styles.centeredSelf, styles.splashLogo]}
+        source={splashLogo}
+      />
     </View>
   );
 }