🤫 (bluesky-social#2211)

* Add new assets

* Add splashiness

* Add butter icon, spread it

* Cream together eggs, sugar, and vanilla

* Hi, I'd like to place and order. Yeah, none pizza with left beef, plz.

* test

* Refine animation

* tweak

* tweak

* tweak

* Tweak

* Simplify

* Cleanup

* Fix android logo

---------

Co-authored-by: Ansh Nanda <[email protected]>

app.config.js

@@ -43,7 +43,7 @@ module.exports = function () {
       icon: './assets/icon.png',
       userInterfaceStyle: 'automatic',
       splash: {
-        image: './assets/cloud-splash.png',
+        image: './assets/splash.png',
         resizeMode: 'cover',
         backgroundColor: '#ffffff',
       },
@@ -73,9 +73,12 @@ module.exports = function () {
       },
       android: {
         versionCode: ANDROID_VERSION_CODE,
+        icon: './assets/icon.png',
         adaptiveIcon: {
-          foregroundImage: './assets/adaptive-icon.png',
-          backgroundColor: '#ffffff',
+          foregroundImage: './assets/icon-android-foreground.png',
+          monochromeImage: './assets/icon-android-foreground.png',
+          backgroundImage: './assets/icon-android-background.png',
+          backgroundColor: '#1185FE',
         },
         googleServicesFile: './google-services.json',
         package: 'xyz.blueskyweb.app',

package.json

@@ -54,6 +54,7 @@
     "@react-native-clipboard/clipboard": "^1.10.0",
     "@react-native-community/blur": "^4.3.0",
     "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-native-menu/menu": "^0.8.0",
     "@react-native-picker/picker": "2.4.10",
     "@react-navigation/bottom-tabs": "^6.5.7",

src/App.native.tsx

@@ -6,6 +6,10 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 import * as SplashScreen from 'expo-splash-screen'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {QueryClientProvider} from '@tanstack/react-query'
+import {
+  SafeAreaProvider,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context'
 
 import 'view/icons'
 
@@ -34,6 +38,7 @@ import {
 } from 'state/session'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import * as persisted from '#/state/persisted'
+import {Splash} from '#/Splash'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -53,27 +58,28 @@ function InnerApp() {
     resumeSession(account)
   }, [resumeSession])
 
-  // wait for session to resume
-  if (isInitialLoad) return null
-
   return (
-    <React.Fragment
-      // Resets the entire tree below when it changes:
-      key={currentAccount?.did}>
-      <LoggedOutViewProvider>
-        <UnreadNotifsProvider>
-          <ThemeProvider theme={colorMode}>
-            {/* All components should be within this provider */}
-            <RootSiblingParent>
-              <GestureHandlerRootView style={s.h100pct}>
-                <TestCtrls />
-                <Shell />
-              </GestureHandlerRootView>
-            </RootSiblingParent>
-          </ThemeProvider>
-        </UnreadNotifsProvider>
-      </LoggedOutViewProvider>
-    </React.Fragment>
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <Splash isReady={!isInitialLoad}>
+        <React.Fragment
+          // Resets the entire tree below when it changes:
+          key={currentAccount?.did}>
+          <LoggedOutViewProvider>
+            <UnreadNotifsProvider>
+              <ThemeProvider theme={colorMode}>
+                {/* All components should be within this provider */}
+                <RootSiblingParent>
+                  <GestureHandlerRootView style={s.h100pct}>
+                    <TestCtrls />
+                    <Shell />
+                  </GestureHandlerRootView>
+                </RootSiblingParent>
+              </ThemeProvider>
+            </UnreadNotifsProvider>
+          </LoggedOutViewProvider>
+        </React.Fragment>
+      </Splash>
+    </SafeAreaProvider>
   )
 }
 

src/Navigation.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import {StyleSheet} from 'react-native'
-import * as SplashScreen from 'expo-splash-screen'
 import {
   NavigationContainer,
   createNavigationContainerRef,
@@ -493,7 +492,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       linking={LINKING}
       theme={theme}
       onReady={() => {
-        SplashScreen.hideAsync()
         logModuleInitTime()
         onReady()
       }}>

src/Splash.tsx

@@ -0,0 +1,154 @@
+import React, {useCallback, useEffect} from 'react'
+import {View, StyleSheet} from 'react-native'
+import * as SplashScreen from 'expo-splash-screen'
+import LinearGradient from 'react-native-linear-gradient'
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated'
+import MaskedView from '@react-native-masked-view/masked-view'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import Svg, {Path, SvgProps} from 'react-native-svg'
+
+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}}>
+      <Path
+        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
+}
+
+SplashScreen.preventAutoHideAsync().catch(() => {})
+
+const AnimatedLogo = Animated.createAnimatedComponent(Logo)
+
+export function Splash(props: React.PropsWithChildren<Props>) {
+  const insets = useSafeAreaInsets()
+  const intro = useSharedValue(0)
+  const outroLogo = useSharedValue(0)
+  const outroApp = useSharedValue(0)
+  const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
+
+  const logoAnimations = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
+        },
+        {
+          scale: interpolate(
+            outroLogo.value,
+            [0, 0.06, 0.08, 1],
+            [1, 0.8, 0.8, 800],
+            'clamp',
+          ),
+        },
+      ],
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
+    }
+  })
+
+  const appAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          scale: interpolate(
+            outroApp.value,
+            [0, 0.7, 1],
+            [1.1, 1.1, 1],
+            'clamp',
+          ),
+        },
+      ],
+      opacity: interpolate(outroApp.value, [0, 0.7, 1], [0, 0, 1], 'clamp'),
+    }
+  })
+
+  const onFinish = useCallback(() => setIsAnimationComplete(true), [])
+
+  useEffect(() => {
+    if (props.isReady) {
+      // hide on mount
+      SplashScreen.hideAsync().catch(() => {})
+
+      intro.value = withTiming(
+        1,
+        {duration: 200, easing: Easing.out(Easing.cubic)},
+        async () => {
+          outroLogo.value = withTiming(
+            1,
+            {duration: 1200, easing: Easing.in(Easing.cubic)},
+            () => {
+              runOnJS(onFinish)()
+            },
+          )
+          outroApp.value = withTiming(
+            1,
+            {duration: 1200, easing: Easing.inOut(Easing.cubic)},
+            () => {
+              runOnJS(onFinish)()
+            },
+          )
+        },
+      )
+    }
+  }, [onFinish, intro, outroLogo, outroApp, props.isReady])
+
+  return (
+    <View style={{flex: 1}}>
+      {!isAnimationComplete && (
+        <LinearGradient
+          colors={['#0A7AFF', '#59B9FF']}
+          style={[StyleSheet.absoluteFillObject]}
+        />
+      )}
+
+      <MaskedView
+        style={[StyleSheet.absoluteFillObject]}
+        maskElement={
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFillObject,
+              {
+                // Transparent background because mask is based off alpha channel.
+                backgroundColor: 'transparent',
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+              },
+            ]}>
+            <AnimatedLogo style={[logoAnimations]} />
+          </Animated.View>
+        }>
+        {!isAnimationComplete && (
+          <View
+            style={[StyleSheet.absoluteFillObject, {backgroundColor: 'white'}]}
+          />
+        )}
+
+        <Animated.View style={[{flex: 1}, appAnimation]}>
+          {props.children}
+        </Animated.View>
+      </MaskedView>
+    </View>
+  )
+}

src/lib/assets.native.ts

@@ -1,5 +1,4 @@
 import {ImageRequireSource} from 'react-native'
 
-export const DEF_AVATAR: ImageRequireSource = require('../../assets/default-avatar.jpg')
-export const TABS_EXPLAINER: ImageRequireSource = require('../../assets/tabs-explainer.jpg')
-export const CLOUD_SPLASH: ImageRequireSource = require('../../assets/cloud-splash.png')
+export const DEF_AVATAR: ImageRequireSource = require('../../assets/default-avatar.png')
+export const CLOUD_SPLASH: ImageRequireSource = require('../../assets/splash.png')

src/lib/assets.ts

@@ -1,10 +1,6 @@
 import {ImageRequireSource} from 'react-native'
 
 // @ts-ignore we need to pretend -prf
-export const DEF_AVATAR: ImageRequireSource = {uri: '/img/default-avatar.jpg'}
+export const DEF_AVATAR: ImageRequireSource = {uri: '/img/default-avatar.png'}
 // @ts-ignore we need to pretend -prf
-export const TABS_EXPLAINER: ImageRequireSource = {
-  uri: '/img/tabs-explainer.jpg',
-}
-// @ts-ignore we need to pretend -prf
-export const CLOUD_SPLASH: ImageRequireSource = {uri: '/img/cloud-splash.png'}
+export const CLOUD_SPLASH: ImageRequireSource = {uri: '/img/splash.png'}

src/view/com/auth/SplashScreen.tsx

@@ -7,6 +7,8 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {CenteredView} from '../util/Views'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 
 export const SplashScreen = ({
   onPressSignin,
@@ -22,11 +24,14 @@ export const SplashScreen = ({
     <CenteredView style={[styles.container, pal.view]}>
       <ErrorBoundary>
         <View style={styles.hero}>
-          <Text style={[styles.title, pal.link]}>
-            <Trans>Bluesky</Trans>
-          </Text>
-          <Text style={[styles.subtitle, pal.textLight]}>
-            <Trans>See what's next</Trans>
+          <Logo width={92} fill="sky" />
+
+          <View style={{paddingTop: 40, paddingBottom: 6}}>
+            <Logotype width={161} />
+          </View>
+
+          <Text type="lg-medium" style={[pal.textLight]}>
+            <Trans>What's next?</Trans>
           </Text>
         </View>
         <View testID="signinOrCreateAccount" style={styles.btns}>
@@ -65,6 +70,7 @@ const styles = StyleSheet.create({
   hero: {
     flex: 2,
     justifyContent: 'center',
+    alignItems: 'center',
   },
   btns: {
     paddingBottom: 40,

src/view/com/auth/SplashScreen.web.tsx

@@ -10,6 +10,8 @@ import {CenteredView} from '../util/Views'
 import {isWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Trans} from '@lingui/macro'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 
 export const SplashScreen = ({
   onDismiss,
@@ -55,14 +57,15 @@ export const SplashScreen = ({
             styles.containerInner,
             isMobileWeb && styles.containerInnerMobile,
             pal.border,
+            {alignItems: 'center'},
           ]}>
           <ErrorBoundary>
-            <Text style={isMobileWeb ? styles.titleMobile : styles.title}>
-              Bluesky
-            </Text>
-            <Text style={isMobileWeb ? styles.subtitleMobile : styles.subtitle}>
-              See what's next
-            </Text>
+            <Logo width={92} fill="sky" />
+
+            <View style={{paddingTop: 40, paddingBottom: 20}}>
+              <Logotype width={161} />
+            </View>
+
             <View testID="signinOrCreateAccount" style={styles.btns}>
               <TouchableOpacity
                 testID="createAccountButton"
@@ -117,8 +120,6 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
   )
 }
 const useStyles = () => {
-  const {isTabletOrMobile} = useWebMediaQueries()
-  const isMobileWeb = isWeb && isTabletOrMobile
   return StyleSheet.create({
     container: {
       height: '100%',
@@ -161,8 +162,7 @@ const useStyles = () => {
       paddingBottom: 30,
     },
     btns: {
-      flexDirection: isMobileWeb ? 'column' : 'row',
-      gap: 20,
+      gap: 10,
       justifyContent: 'center',
       paddingBottom: 40,
     },