clean up round 1

remove fast-image, switched to all image
cleaned up icons
added fading splash page

app/screens/SplashPage.tsx

@@ -1,14 +1,25 @@
 import React, { useEffect, useState } from 'react'
-import { Text, View } from 'react-native'
+import { Image, View, StyleSheet, Text } from 'react-native'
 import { Store, useStore } from '@app/state/store'
+import colors from '@app/styles/colors'
+import GradientBackground from '@app/components/GradientBackground'
+import font from '@app/styles/font'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 
 const selectHydrated = (store: Store) => store.hydrated
 
 const SplashPage: React.FC<{}> = ({ children }) => {
   const [ready, setReady] = useState(false)
   const hydrated = useStore(selectHydrated)
+  const opacity = useSharedValue(0)
 
-  const minSplashTime = new Promise(resolve => setTimeout(resolve, 1))
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    }
+  })
+
+  const minSplashTime = new Promise(resolve => setTimeout(resolve, 1000))
 
   const prepare = async () => {
     return
@@ -17,16 +28,70 @@ const SplashPage: React.FC<{}> = ({ children }) => {
   const promise = Promise.all([prepare(), minSplashTime])
 
   useEffect(() => {
-    promise.then(() => {
-      setReady(true)
+    opacity.value = withTiming(1, {
+      duration: 200,
     })
-  })
+    promise
+      .then(() => {
+        setReady(true)
+      })
+      .then(() => {
+        opacity.value = withTiming(0, {
+          duration: 500,
+        })
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  if (ready && hydrated) {
-    return <View style={{ flex: 1 }}>{children}</View>
-  } else {
-    return <Text>Loading THE GOOD SHIT...</Text>
-  }
+  const splash = (
+    <Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
+      <GradientBackground style={styles.background}>
+        <View style={styles.logoContainer}>
+          <Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
+          <Text style={styles.text}>subtracks</Text>
+        </View>
+      </GradientBackground>
+    </Animated.View>
+  )
+
+  return (
+    <View style={styles.container}>
+      {ready && hydrated && children}
+      {splash}
+    </View>
+  )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  splashContainer: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+  },
+  background: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoContainer: {
+    elevation: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    height: 140,
+    width: 140,
+    marginBottom: -10,
+    tintColor: colors.accent,
+  },
+  text: {
+    fontFamily: font.bold,
+    fontSize: 50,
+    color: colors.text.primary,
+  },
+})
+
 export default SplashPage