diff --git a/src/App.native.tsx b/src/App.native.tsx index b67b7c1501..6402b4a898 100644 --- a/src/App.native.tsx +++ b/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' @@ -55,25 +59,27 @@ function InnerApp() { }, [resumeSession]) return ( - - - - - - {/* All components should be within this provider */} - - - - - - - - - - - + + + + + + + {/* All components should be within this provider */} + + + + + + + + + + + + ) } diff --git a/src/Splash.tsx b/src/Splash.tsx index 5dcd2ec6c2..92ed366f96 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -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 ( + + + + ) +}) type Props = { isReady: boolean @@ -22,6 +41,7 @@ SplashScreen.preventAutoHideAsync().catch(() => {}) const AnimatedLogo = Animated.createAnimatedComponent(Logo) export function Splash(props: React.PropsWithChildren) { + 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) { { 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) { 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) { )} - + }> {!isAnimationComplete && ( diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx index 4e36da46cd..15ab5a11c0 100644 --- a/src/view/icons/Logo.tsx +++ b/src/view/icons/Logo.tsx @@ -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) { ) diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 18042c7ed2..51c03ae3dd 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -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 ( - - - - - - - - + + + + + + ) }