[APP-1801] New splash screen (#9780)

* MVP splash * MVP of login screen * Hack a footer into the logged out view * revert unneeded (cherry picked from commit 296420aa0df433b101389c44b05a40696e7389ae) * Update config (cherry picked from commit eac421966dfdee99d4c818ac07835a2a97e7590f) * Bump size slightly
2026-01-28 20:05:14 -06:00
parent d13df6c7e6
commit 0ac5b07bfd
10 changed files with 104 additions and 226 deletions
@@ -310,26 +310,24 @@ module.exports = function (_config) {
        [
          'expo-splash-screen',
          {
-            ios: {
-              enableFullScreenImage_legacy: true,
-              backgroundColor: '#ffffff',
-              image: './assets/splash.png',
+            enableFullScreenImage_legacy: true, // iOS only
+            backgroundColor: '#EEF5FF', // based on illustration
+            image: './assets/splash/splash-mobile.png',
+            resizeMode: 'cover',
+            dark: {
+              enableFullScreenImage_legacy: true, // iOS only
+              backgroundColor: '#446DA9', // based on illustration
+              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',
-              image: './assets/splash-android-icon.png',
-              imageWidth: 150,
+              backgroundColor: '#A8CCFF', // primary_200
+              image: './assets/splash/android-splash-logo-white.png',
+              imageWidth: 105,
              dark: {
-                backgroundColor: '#0c2a49',
-                image: './assets/splash-android-icon-dark.png',
-                imageWidth: 150,
+                backgroundColor: '#00398A', // primary_800
+                image: './assets/splash/android-splash-logo-white.png',
+                imageWidth: 105,
              },
            },
          },
@@ -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(() =>
-            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),
-                  }),
-                )
-              },
-            ),
+          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>
@@ -1,18 +1,23 @@
-import {View} from 'react-native'
+import {useMemo} from 'react'
+import {Image as RNImage, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

 import {useHaptics} from '#/lib/haptics'
-import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {CenteredView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useTheme} from '#/alf'
-import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
-import {Text} from '#/components/Typography'
+// @ts-ignore
+import splashImagePointer from '../../../../assets/splash/splash-mobile.png'
+// @ts-ignore
+import darkSplashImagePointer from '../../../../assets/splash/splash-mobile-dark.png'
+const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
+const darkSplashImageUri = RNImage.resolveAssetSource(
+  darkSplashImagePointer,
+).uri

 export const SplashScreen = ({
  onPressSignin,
@@ -23,38 +28,68 @@ export const SplashScreen = ({
 }) => {
  const t = useTheme()
  const {_} = useLingui()
+  const isDarkMode = t.name !== 'light'

  const playHaptic = useHaptics()
-  const insets = useSafeAreaInsets()
+
+  const styles = useMemo(() => {
+    const logoFill = isDarkMode ? 'white' : t.palette.primary_500
+    return {
+      logoFill,
+      logoShadow: isDarkMode
+        ? [
+            t.atoms.shadow_md,
+            {
+              shadowColor: logoFill,
+              shadowOpacity: 0.5,
+              shadowOffset: {
+                width: 0,
+                height: 0,
+              },
+            },
+          ]
+        : [],
+    }
+  }, [t, isDarkMode])

  return (
-    <CenteredView style={[a.h_full, a.flex_1]}>
+    <>
+      <Image
+        accessibilityIgnoresInvertColors
+        source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
+        style={[a.absolute, a.inset_0]}
+      />
+
      <Animated.View
        entering={FadeIn.duration(90)}
        exiting={FadeOut.duration(90)}
        style={[a.flex_1]}>
-        <ErrorBoundary>
-          <View style={[a.flex_1, a.justify_center, a.align_center]}>
-            <Logo width={92} fill="sky" />
+        <View
+          style={[a.justify_center, a.align_center, {gap: 6, paddingTop: 46}]}>
+          <Logo width={76} fill={styles.logoFill} style={styles.logoShadow} />
+          <Logotype
+            width={91}
+            fill={styles.logoFill}
+            style={styles.logoShadow}
+          />
+        </View>

-            <View style={[a.pb_sm, a.pt_5xl]}>
-              <Logotype width={161} fill={t.atoms.text.color} />
-            </View>
-
-            <Text
-              style={[
-                a.text_md,
-                a.font_semi_bold,
-                t.atoms.text_contrast_medium,
-                a.text_center,
-              ]}>
-              <Trans>What's up?</Trans>
-            </Text>
-          </View>
+        <View style={[a.flex_1]} />

+        <View
+          testID="signinOrCreateAccount"
+          style={[a.px_xl, a.gap_md, a.pb_sm]}>
          <View
-            testID="signinOrCreateAccount"
-            style={[a.px_xl, a.gap_md, a.pb_2xl]}>
+            style={[
+              t.atoms.shadow_md,
+              {
+                shadowOpacity: 0.1,
+                shadowOffset: {
+                  width: 0,
+                  height: 5,
+                },
+              },
+            ]}>
            <Button
              testID="createAccountButton"
              onPress={() => {
@@ -66,45 +101,30 @@ export const SplashScreen = ({
                msg`Opens flow to create a new Bluesky account`,
              )}
              size="large"
-              variant="solid"
-              color="primary">
+              color={isDarkMode ? 'secondary_inverted' : 'secondary'}>
              <ButtonText>
                <Trans>Create account</Trans>
              </ButtonText>
            </Button>
-            <Button
-              testID="signInButton"
-              onPress={() => {
-                onPressSignin()
-                playHaptic('Light')
-              }}
-              label={_(msg`Sign in`)}
-              accessibilityHint={_(
-                msg`Opens flow to sign in to your existing Bluesky account`,
-              )}
-              size="large"
-              variant="solid"
-              color="secondary">
-              <ButtonText>
-                <Trans>Sign in</Trans>
-              </ButtonText>
-            </Button>
          </View>
-          <View
-            style={[
-              a.px_lg,
-              a.pt_md,
-              a.pb_2xl,
-              a.justify_center,
-              a.align_center,
-            ]}>
-            <View>
-              <AppLanguageDropdown />
-            </View>
-          </View>
-          <View style={{height: insets.bottom}} />
-        </ErrorBoundary>
+
+          <Button
+            testID="signInButton"
+            onPress={() => {
+              onPressSignin()
+              playHaptic('Light')
+            }}
+            label={_(msg`Sign in`)}
+            accessibilityHint={_(
+              msg`Opens flow to sign in to your existing Bluesky account`,
+            )}
+            size="large">
+            <ButtonText style={{color: 'white'}}>
+              <Trans>Sign in</Trans>
+            </ButtonText>
+          </Button>
+        </View>
      </Animated.View>
-    </CenteredView>
+    </>
  )
 }