tweak

src/Splash.tsx

@@ -19,6 +19,8 @@ type Props = {
 
 SplashScreen.preventAutoHideAsync().catch(() => {})
 
+const AnimatedLogo = Animated.createAnimatedComponent(Logo)
+
 export function Splash(props: React.PropsWithChildren<Props>) {
   const fadeAnimationProgress = useSharedValue(0)
   const scaleAnimationProgress = useSharedValue(0)
@@ -26,6 +28,18 @@ export function Splash(props: React.PropsWithChildren<Props>) {
 
   const logoScaleAnimation = useAnimatedStyle(() => {
     return {
+      width: interpolate(
+        scaleAnimationProgress.value,
+        [0, 0.2, 0.22, 1],
+        [100, 100, 1000, 1000],
+        'clamp',
+      ),
+      height: interpolate(
+        scaleAnimationProgress.value,
+        [0, 0.2, 0.22, 1],
+        [100, 100, 1000, 1000],
+        'clamp',
+      ),
       transform: [
         {
           scale: interpolate(
@@ -89,7 +103,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
         () => {
           scaleAnimationProgress.value = withTiming(
             1,
-            {duration: 1000, easing: Easing.inOut(Easing.cubic)},
+            {duration: 1200, easing: Easing.inOut(Easing.cubic)},
             () => {
               runOnJS(onFinish)()
             },
@@ -120,10 +134,9 @@ export function Splash(props: React.PropsWithChildren<Props>) {
                 justifyContent: 'center',
                 alignItems: 'center',
               },
-              logoScaleAnimation,
               logoFadeInAnimation,
             ]}>
-            <Logo width={100} />
+            <AnimatedLogo width={100} style={[logoScaleAnimation]} />
           </Animated.View>
         }>
         {!isAnimationComplete && (

src/view/icons/Logo.tsx

@@ -12,7 +12,12 @@ import {colors} from '#/lib/styles'
 
 const ratio = 106 / 120
 
-export function Logo({fill, ...rest}: {fill?: PathProps['fill']} & SvgProps) {
+type Props = {
+  fill?: PathProps['fill']
+} & SvgProps
+
+export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
+  const {fill, ...rest} = props
   const gradient = fill === 'sky'
   const _fill = gradient ? 'url(#sky)' : fill || colors.blue3
   // @ts-ignore it's fiiiiine
@@ -20,10 +25,11 @@ export function Logo({fill, ...rest}: {fill?: PathProps['fill']} & SvgProps) {
   return (
     <Svg
       fill="none"
+      // @ts-ignore it's fiiiiine
+      ref={ref}
       viewBox="0 0 64 64"
       {...rest}
-      width={size}
+      style={{width: size, height: size * ratio}}>
-      height={size * ratio}>
       {gradient && (
         <Defs>
           <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
@@ -39,4 +45,4 @@ export function Logo({fill, ...rest}: {fill?: PathProps['fill']} & SvgProps) {
       />
     </Svg>
   )
-}
+})