New splash screen (#2714)

* New splash screen

* Add logotype to splash

* Adjust spacing

1 files changed, 34 insertions, 14 deletions

diff --git a/src/Splash.tsx b/src/Splash.tsx
index bb2c7a175..99f9a100d 100644
--- a/src/Splash.tsx
+++ b/src/Splash.tsx
@@ -21,8 +21,8 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path, SvgProps} from 'react-native-svg'
 
 import {isAndroid} from '#/platform/detection'
-import {useColorMode} from 'state/shell'
-import {colors} from '#/lib/styles'
+import {useColorMode} from '#/state/shell'
+import {Logotype} from '#/view/icons/Logotype'
 
 // @ts-ignore
 import splashImagePointer from '../assets/splash.png'
@@ -98,6 +98,11 @@ export function Splash(props: React.PropsWithChildren<Props>) {
       opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
     }
   })
+  const bottomLogoAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+    }
+  })
   const reducedLogoAnimation = useAnimatedStyle(() => {
     return {
       transform: [
@@ -183,12 +188,30 @@ export function Splash(props: React.PropsWithChildren<Props>) {
   return (
     <View style={{flex: 1}} onLayout={onLayout}>
       {!isAnimationComplete && (
-        <Image
-          accessibilityIgnoresInvertColors
-          onLoadEnd={onLoadEnd}
-          source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
-          style={StyleSheet.absoluteFillObject}
-        />
+        <View style={StyleSheet.absoluteFillObject}>
+          <Image
+            accessibilityIgnoresInvertColors
+            onLoadEnd={onLoadEnd}
+            source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
+            style={StyleSheet.absoluteFillObject}
+          />
+
+          <Animated.View
+            style={[
+              bottomLogoAnimation,
+              {
+                position: 'absolute',
+                bottom: insets.bottom + 40,
+                left: 0,
+                right: 0,
+                alignItems: 'center',
+                justifyContent: 'center',
+                opacity: 0,
+              },
+            ]}>
+            <Logotype fill="#fff" width={90} />
+          </Animated.View>
+        </View>
       )}
 
       {isReady &&
@@ -212,7 +235,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
                   },
                 ]}>
                 <AnimatedLogo
-                  fill={isDarkMode ? colors.blue3 : '#fff'}
+                  fill="#fff"
                   style={[{opacity: 0}, logoAnimations]}
                 />
               </Animated.View>
@@ -233,17 +256,14 @@ export function Splash(props: React.PropsWithChildren<Props>) {
                     transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
                   },
                 ]}>
-                <AnimatedLogo
-                  fill={isDarkMode ? colors.blue3 : '#fff'}
-                  style={[logoAnimations]}
-                />
+                <AnimatedLogo fill="#fff" style={[logoAnimations]} />
               </Animated.View>
             }>
             {!isAnimationComplete && (
               <View
                 style={[
                   StyleSheet.absoluteFillObject,
-                  {backgroundColor: isDarkMode ? colors.blue3 : '#fff'},
+                  {backgroundColor: '#fff'},
                 ]}
               />
             )}