Remove splashscreen blink (#2378)

* chore: remove unused react-native-splash-screen package

* Fix splashscreen white blink

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",

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

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"