diff --git a/assets/icon-android-background.png b/assets/icon-android-background.png index 2c9d1538..c558a99d 100644 Binary files a/assets/icon-android-background.png and b/assets/icon-android-background.png differ diff --git a/assets/icon.png b/assets/icon.png index 7dc2c31a..5a8a1be5 100644 Binary files a/assets/icon.png and b/assets/icon.png differ diff --git a/assets/splash-with-logo.png b/assets/splash-with-logo.png deleted file mode 100644 index d012d724..00000000 Binary files a/assets/splash-with-logo.png and /dev/null differ diff --git a/assets/splash.png b/assets/splash.png index 603f1f37..fbba8e25 100644 Binary files a/assets/splash.png and b/assets/splash.png differ diff --git a/src/Splash.tsx b/src/Splash.tsx index 92ed366f..e33fcc3c 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -1,7 +1,7 @@ import React, {useCallback, useEffect} from 'react' -import {View, StyleSheet} from 'react-native' +import {View, StyleSheet, Image as RNImage} from 'react-native' import * as SplashScreen from 'expo-splash-screen' -import LinearGradient from 'react-native-linear-gradient' +import {Image} from 'expo-image' import Animated, { interpolate, runOnJS, @@ -14,6 +14,10 @@ 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' +// @ts-ignore +import splashImagePointer from '../assets/splash.png' +const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri + export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) { const width = 1000 const height = width * (67 / 64) @@ -46,6 +50,8 @@ export function Splash(props: React.PropsWithChildren) { const outroLogo = useSharedValue(0) const outroApp = useSharedValue(0) const [isAnimationComplete, setIsAnimationComplete] = React.useState(false) + const [isImageLoaded, setIsImageLoaded] = React.useState(false) + const isReady = props.isReady && isImageLoaded const logoAnimations = useAnimatedStyle(() => { return { @@ -57,7 +63,7 @@ export function Splash(props: React.PropsWithChildren) { scale: interpolate( outroLogo.value, [0, 0.06, 0.08, 1], - [1, 0.8, 0.8, 800], + [1, 0.8, 0.8, 400], 'clamp', ), }, @@ -70,29 +76,27 @@ export function Splash(props: React.PropsWithChildren) { return { transform: [ { - scale: interpolate( - outroApp.value, - [0, 0.7, 1], - [1.1, 1.1, 1], - 'clamp', - ), + scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'), }, ], - opacity: interpolate(outroApp.value, [0, 0.7, 1], [0, 0, 1], 'clamp'), + opacity: interpolate(outroApp.value, [0, 0.7, 1], [0, 1, 1], 'clamp'), } }) const onFinish = useCallback(() => setIsAnimationComplete(true), []) useEffect(() => { - if (props.isReady) { + if (isReady) { // hide on mount SplashScreen.hideAsync().catch(() => {}) intro.value = withTiming( 1, - {duration: 200, easing: Easing.out(Easing.cubic)}, + {duration: 800, easing: Easing.out(Easing.cubic)}, async () => { + // set these values to check animation at specific point + // outroLogo.value = 0.1 + // outroApp.value = 0.1 outroLogo.value = withTiming( 1, {duration: 1200, easing: Easing.in(Easing.cubic)}, @@ -110,14 +114,20 @@ export function Splash(props: React.PropsWithChildren) { }, ) } - }, [onFinish, intro, outroLogo, outroApp, props.isReady]) + }, [onFinish, intro, outroLogo, outroApp, isReady]) + + const onLoadEnd = useCallback(() => { + setIsImageLoaded(true) + }, [setIsImageLoaded]) return ( {!isAnimationComplete && ( - )}