Revert splash screen changes (#9792)

* Revert splash screen changes

This partially reverts commit 0ac5b07bfd.

* Keep android changes

app.config.js

@@ -310,16 +310,18 @@ module.exports = function (_config) {
         [
           'expo-splash-screen',
           {
+            ios: {
               enableFullScreenImage_legacy: true, // iOS only
-            backgroundColor: '#EEF5FF', // based on illustration
+              backgroundColor: '#A8CCFF', // primary_200
-            image: './assets/splash/splash-mobile.png',
+              image: './assets/splash/splash.png',
               resizeMode: 'cover',
               dark: {
                 enableFullScreenImage_legacy: true, // iOS only
-              backgroundColor: '#446DA9', // based on illustration
+                backgroundColor: '#00398A', // primary_800
-              image: './assets/splash/splash-mobile-dark.png',
+                image: './assets/splash/splash-dark.png',
                 resizeMode: 'cover',
               },
+            },
             android: {
               backgroundColor: '#A8CCFF', // primary_200
               image: './assets/splash/android-splash-logo-white.png',

src/Splash.tsx

@@ -9,30 +9,55 @@ import {
 import Animated, {
   Easing,
   interpolate,
+  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import Svg, {Path, type SvgProps} from 'react-native-svg'
 import {Image} from 'expo-image'
 import * as SplashScreen from 'expo-splash-screen'
 
+import {Logotype} from '#/view/icons/Logotype'
 // @ts-ignore
-import splashImagePointer from '../assets/splash/splash-mobile.png'
+import splashImagePointer from '../assets/splash/splash.png'
 // @ts-ignore
-import darkSplashImagePointer from '../assets/splash/splash-mobile-dark.png'
+import darkSplashImagePointer from '../assets/splash/splash-dark.png'
 const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
 const darkSplashImageUri = RNImage.resolveAssetSource(
   darkSplashImagePointer,
 ).uri
 
+export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) {
+  const width = 1000
+  const height = width * (67 / 64)
+  return (
+    <Svg
+      fill="none"
+      // @ts-ignore it's fiiiiine
+      ref={ref}
+      viewBox="0 0 64 66"
+      style={[{width, height}, props.style]}>
+      <Path
+        fill={props.fill || '#fff'}
+        d="M13.873 3.77C21.21 9.243 29.103 20.342 32 26.3v15.732c0-.335-.13.043-.41.858-1.512 4.414-7.418 21.642-20.923 7.87-7.111-7.252-3.819-14.503 9.125-16.692-7.405 1.252-15.73-.817-18.014-8.93C1.12 22.804 0 8.431 0 6.488 0-3.237 8.579-.18 13.873 3.77ZM50.127 3.77C42.79 9.243 34.897 20.342 32 26.3v15.732c0-.335.13.043.41.858 1.512 4.414 7.418 21.642 20.923 7.87 7.111-7.252 3.819-14.503-9.125-16.692 7.405 1.252 15.73-.817 18.014-8.93C62.88 22.804 64 8.431 64 6.488 64-3.237 55.422-.18 50.127 3.77Z"
+      />
+    </Svg>
+  )
+})
+
 type Props = {
   isReady: boolean
 }
 
 export function Splash(props: React.PropsWithChildren<Props>) {
   'use no memo'
+  const insets = useSafeAreaInsets()
+  const intro = useSharedValue(0)
+  const outroLogo = useSharedValue(0)
+  const outroApp = useSharedValue(0)
   const outroAppOpacity = useSharedValue(0)
-  const colorScheme = useColorScheme()
   const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
   const [isImageLoaded, setIsImageLoaded] = React.useState(false)
   const [isLayoutReady, setIsLayoutReady] = React.useState(false)
@@ -44,10 +69,62 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     isImageLoaded &&
     isLayoutReady &&
     reduceMotion !== undefined
+
+  const colorScheme = useColorScheme()
   const isDarkMode = colorScheme === 'dark'
 
+  const logoAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
+        },
+        {
+          scale: interpolate(
+            outroLogo.get(),
+            [0, 0.08, 1],
+            [1, 0.8, 500],
+            'clamp',
+          ),
+        },
+      ],
+      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+    }
+  })
+  const bottomLogoAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+    }
+  })
+  const reducedLogoAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
+        },
+      ],
+      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+    }
+  })
+
+  const logoWrapperAnimation = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(
+        outroAppOpacity.get(),
+        [0, 0.1, 0.2, 1],
+        [1, 1, 0, 0],
+        'clamp',
+      ),
+    }
+  })
+
   const appAnimation = useAnimatedStyle(() => {
     return {
+      transform: [
+        {
+          scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'),
+        },
+      ],
       opacity: interpolate(
         outroAppOpacity.get(),
         [0, 0.1, 0.2, 1],
@@ -65,21 +142,50 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     if (isReady) {
       SplashScreen.hideAsync()
         .then(() => {
+          intro.set(() =>
+            withTiming(
+              1,
+              {duration: 400, easing: Easing.out(Easing.cubic)},
+              async () => {
+                // set these values to check animation at specific point
+                outroLogo.set(() =>
+                  withTiming(
+                    1,
+                    {duration: 1200, easing: Easing.in(Easing.cubic)},
+                    () => {
+                      runOnJS(onFinish)()
+                    },
+                  ),
+                )
+                outroApp.set(() =>
+                  withTiming(1, {
+                    duration: 1200,
+                    easing: Easing.inOut(Easing.cubic),
+                  }),
+                )
                 outroAppOpacity.set(() =>
                   withTiming(1, {
                     duration: 1200,
                     easing: Easing.in(Easing.cubic),
                   }),
                 )
+              },
+            ),
+          )
         })
         .catch(() => {})
     }
-  }, [onFinish, outroAppOpacity, isReady])
+  }, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady])
 
   useEffect(() => {
     AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion)
   }, [])
 
+  const logoAnimations =
+    reduceMotion === true ? reducedLogoAnimation : logoAnimation
+  // special off-spec color for dark mode
+  const logoBg = isDarkMode ? '#0F1824' : '#fff'
+
   return (
     <View style={{flex: 1}} onLayout={onLayout}>
       {!isAnimationComplete && (
@@ -90,6 +196,22 @@ export function Splash(props: React.PropsWithChildren<Props>) {
             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>
       )}
 
@@ -98,6 +220,24 @@ export function Splash(props: React.PropsWithChildren<Props>) {
           <Animated.View style={[{flex: 1}, appAnimation]}>
             {props.children}
           </Animated.View>
+
+          {!isAnimationComplete && (
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFillObject,
+                logoWrapperAnimation,
+                {
+                  flex: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                },
+              ]}>
+              <Animated.View style={[logoAnimations]}>
+                <Logo fill={logoBg} />
+              </Animated.View>
+            </Animated.View>
+          )}
         </>
       )}
     </View>

src/view/com/auth/SplashScreen.tsx

@@ -11,9 +11,9 @@ import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 // @ts-ignore
-import splashImagePointer from '../../../../assets/splash/splash-mobile.png'
+import splashImagePointer from '../../../../assets/splash/illustration-mobile.png'
 // @ts-ignore
-import darkSplashImagePointer from '../../../../assets/splash/splash-mobile-dark.png'
+import darkSplashImagePointer from '../../../../assets/splash/illustration-mobile-dark.png'
 const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
 const darkSplashImageUri = RNImage.resolveAssetSource(
   darkSplashImagePointer,
@@ -78,7 +78,7 @@ export const SplashScreen = ({
 
         <View
           testID="signinOrCreateAccount"
-          style={[a.px_xl, a.gap_md, a.pb_sm]}>
+          style={[a.px_5xl, a.gap_md, a.pb_sm]}>
           <View
             style={[
               t.atoms.shadow_md,