diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/Splash.tsx | 60 | ||||
| -rw-r--r-- | yarn.lock | 5 |
3 files changed, 30 insertions, 36 deletions
diff --git a/package.json b/package.json index 01f3a02bc..c8052e041 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 9d47d9323..0ddb0520d 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -51,7 +51,8 @@ export function Splash(props: React.PropsWithChildren<Props>) { 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<Props>) { }) 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 ( - <View style={{flex: 1}}> + <View style={{flex: 1}} onLayout={onLayout}> {!isAnimationComplete && ( <Image accessibilityIgnoresInvertColors diff --git a/yarn.lock b/yarn.lock index 13072d654..2f81b2fbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18198,11 +18198,6 @@ react-native-screens@~3.27.0: react-freeze "^1.0.0" warn-once "^0.1.0" -react-native-splash-screen@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz#3af71ed17afe50fee69590a45aec399d071ead02" - integrity sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA== - react-native-svg@14.0.0: version "14.0.0" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.0.0.tgz#ea1974dec9a91a09c6a38b7bf58d85e857c291f5" |