MVP splash

app.config.js

@@ -310,26 +310,24 @@ module.exports = function (_config) {
         [
           'expo-splash-screen',
           {
-            ios: {
+            enableFullScreenImage_legacy: true, // iOS only
-              enableFullScreenImage_legacy: true,
+            backgroundColor: '#EEF5FF',
-              backgroundColor: '#ffffff',
+            image: './assets/splash/splash-mobile.png',
-              image: './assets/splash.png',
+            resizeMode: 'cover',
+            dark: {
+              enableFullScreenImage_legacy: true, // iOS only
+              backgroundColor: '#446DA9',
+              image: './assets/splash/splash-mobile-dark.png',
               resizeMode: 'cover',
-              dark: {
-                enableFullScreenImage_legacy: true,
-                backgroundColor: '#001429',
-                image: './assets/splash-dark.png',
-                resizeMode: 'cover',
-              },
             },
             android: {
-              backgroundColor: '#0c7cff',
+              backgroundColor: '#EEF5FF',
-              image: './assets/splash-android-icon.png',
+              image: './assets/splash/android-splash-logo-light.png',
-              imageWidth: 150,
+              imageWidth: 100,
               dark: {
-                backgroundColor: '#0c2a49',
+                backgroundColor: '#335890',
-                image: './assets/splash-android-icon-dark.png',
+                image: './assets/splash/android-splash-logo-dark.png',
-                imageWidth: 150,
+                imageWidth: 100,
               },
             },
           },

src/Splash.tsx

@@ -9,55 +9,30 @@ 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.png'
+import splashImagePointer from '../assets/splash/splash-mobile.png'
 // @ts-ignore
-import darkSplashImagePointer from '../assets/splash-dark.png'
+import darkSplashImagePointer from '../assets/splash/splash-mobile-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)
@@ -69,62 +44,10 @@ 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],
@@ -142,50 +65,21 @@ export function Splash(props: React.PropsWithChildren<Props>) {
     if (isReady) {
       SplashScreen.hideAsync()
         .then(() => {
-          intro.set(() =>
+          outroAppOpacity.set(() =>
-            withTiming(
+            withTiming(1, {
-              1,
+              duration: 1200,
-              {duration: 400, easing: Easing.out(Easing.cubic)},
+              easing: Easing.in(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, intro, outroLogo, outroApp, outroAppOpacity, isReady])
+  }, [onFinish, 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 && (
@@ -196,22 +90,6 @@ 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>
       )}
 
@@ -220,24 +98,6 @@ 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>