diff --git a/package.json b/package.json index 01f3a02b..c8052e04 100644 --- a/package.json +++ b/package.json @@ -158,7 +158,6 @@ "react-native-root-siblings": "^4.1.1", "react-native-safe-area-context": "4.7.4", "react-native-screens": "~3.27.0", - "react-native-splash-screen": "^3.3.0", "react-native-svg": "14.0.0", "react-native-url-polyfill": "^1.3.0", "react-native-uuid": "^2.0.1", diff --git a/src/Splash.tsx b/src/Splash.tsx index 9d47d932..0ddb0520 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -51,7 +51,8 @@ export function Splash(props: React.PropsWithChildren) { const outroAppOpacity = useSharedValue(0) const [isAnimationComplete, setIsAnimationComplete] = React.useState(false) const [isImageLoaded, setIsImageLoaded] = React.useState(false) - const isReady = props.isReady && isImageLoaded + const [isLayoutReady, setIsLayoutReady] = React.useState(false) + const isReady = props.isReady && isImageLoaded && isLayoutReady const logoAnimations = useAnimatedStyle(() => { return { @@ -89,45 +90,44 @@ export function Splash(props: React.PropsWithChildren) { }) const onFinish = useCallback(() => setIsAnimationComplete(true), []) + const onLayout = useCallback(() => setIsLayoutReady(true), []) + const onLoadEnd = useCallback(() => setIsImageLoaded(true), []) useEffect(() => { if (isReady) { - // hide on mount - SplashScreen.hideAsync().catch(() => {}) - - intro.value = withTiming( - 1, - {duration: 400, 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( + SplashScreen.hideAsync() + .then(() => { + intro.value = withTiming( 1, - {duration: 1200, easing: Easing.in(Easing.cubic)}, - () => { - runOnJS(onFinish)() + {duration: 400, 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)}, + () => { + runOnJS(onFinish)() + }, + ) + outroApp.value = withTiming(1, { + duration: 1200, + easing: Easing.inOut(Easing.cubic), + }) + outroAppOpacity.value = withTiming(1, { + duration: 1200, + easing: Easing.in(Easing.cubic), + }) }, ) - outroApp.value = withTiming(1, { - duration: 1200, - easing: Easing.inOut(Easing.cubic), - }) - outroAppOpacity.value = withTiming(1, { - duration: 1200, - easing: Easing.in(Easing.cubic), - }) - }, - ) + }) + .catch(() => {}) } }, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady]) - const onLoadEnd = useCallback(() => { - setIsImageLoaded(true) - }, [setIsImageLoaded]) - return ( - + {!isAnimationComplete && (