Cleanup

2023-12-14 14:37:38 -06:00
parent f7f653c948
commit 1276de9230
4 changed files with 65 additions and 44 deletions
@@ -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'

@@ -55,25 +59,27 @@ function InnerApp() {
  }, [resumeSession])

  return (
-    <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 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>
  )
 }

@@ -11,7 +11,26 @@ import Animated, {
  Easing,
 } from 'react-native-reanimated'
 import MaskedView from '@react-native-masked-view/masked-view'
-import {Logo} from '#/view/icons/Logo'
+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
@@ -22,6 +41,7 @@ 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)
@@ -36,7 +56,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
        {
          scale: interpolate(
            outroLogo.value,
-            [0, 0.08, 0.1, 1],
+            [0, 0.06, 0.08, 1],
            [1, 0.8, 0.8, 800],
            'clamp',
          ),
@@ -65,24 +85,24 @@ export function Splash(props: React.PropsWithChildren<Props>) {
  const onFinish = useCallback(() => setIsAnimationComplete(true), [])

  useEffect(() => {
-    // hide on mount
-    SplashScreen.hideAsync().catch(() => {})
-
    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: 1000, easing: Easing.in(Easing.cubic)},
+            {duration: 1200, easing: Easing.in(Easing.cubic)},
            () => {
              runOnJS(onFinish)()
            },
          )
          outroApp.value = withTiming(
            1,
-            {duration: 1000, easing: Easing.inOut(Easing.cubic)},
+            {duration: 1200, easing: Easing.inOut(Easing.cubic)},
            () => {
              runOnJS(onFinish)()
            },
@@ -102,20 +122,21 @@ export function Splash(props: React.PropsWithChildren<Props>) {
      )}

      <MaskedView
-        style={{flex: 1}}
+        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: [{scale: 0.1}], // scale from 1000px to 100px
+                transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
              },
            ]}>
-            <AnimatedLogo width={1000} style={[logoAnimations]} />
+            <AnimatedLogo style={[logoAnimations]} />
          </Animated.View>
        }>
        {!isAnimationComplete && (
@@ -10,7 +10,7 @@ import Svg, {

 import {colors} from '#/lib/styles'

-const ratio = 106 / 120
+const ratio = 57 / 64

 type Props = {
  fill?: PathProps['fill']
@@ -27,7 +27,7 @@ export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
      fill="none"
      // @ts-ignore it's fiiiiine
      ref={ref}
-      viewBox="0 0 64 64"
+      viewBox="0 0 64 57"
      {...rest}
      style={{width: size, height: size * ratio}}>
      {gradient && (
@@ -41,7 +41,7 @@ export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {

      <Path
        fill={_fill}
-        d="M13.873 4.308C21.21 10.564 29.103 23.25 32 30.057c2.898-6.807 10.79-19.493 18.127-25.75C55.421-.205 64-3.698 64 7.416c0 2.22-1.12 18.647-1.778 21.314-2.284 9.272-10.609 11.637-18.014 10.206 12.944 2.502 16.236 10.789 9.125 19.076-13.505 15.74-19.41-3.949-20.924-8.994-.277-.924-.407-1.357-.409-.99-.002-.367-.132.066-.41.99-1.512 5.045-7.418 24.734-20.923 8.994-7.111-8.287-3.819-16.574 9.125-19.076C12.387 40.366 4.062 38 1.778 28.729 1.12 26.062 0 9.635 0 7.415 0-3.699 8.579-.206 13.873 4.308Z"
+        d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
      />
    </Svg>
  )
@@ -19,10 +19,6 @@ import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {isStateAtTabRoot} from 'lib/routes/helpers'
-import {
-  SafeAreaProvider,
-  initialWindowMetrics,
-} from 'react-native-safe-area-context'
 import {
  useIsDrawerOpen,
  useSetDrawerOpen,
@@ -107,14 +103,12 @@ export const Shell: React.FC = function ShellImpl() {
  const pal = usePalette('default')
  const theme = useTheme()
  return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics} style={pal.view}>
-      <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
-        <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
-        <RoutesContainer>
-          <ShellInner />
-        </RoutesContainer>
-      </View>
-    </SafeAreaProvider>
+    <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
+      <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
+      <RoutesContainer>
+        <ShellInner />
+      </RoutesContainer>
+    </View>
  )
 }