fix: trigger hide on shouldHideSplash change

Author: war-in

src/components/SplashScreenHider/index.native.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useRef} from 'react';
+import {useEffect, useEffectEvent, useRef} from 'react';
 import type {ViewStyle} from 'react-native';
 import {StyleSheet} from 'react-native';
 import Reanimated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
@@ -9,7 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import BootSplash from '@libs/BootSplash';
 import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
+function SplashScreenHider({onHide, shouldHideSplash}: SplashScreenHiderProps): SplashScreenHiderReturnType {
     const styles = useThemeStyles();
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
 
@@ -24,8 +24,7 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS
     }));
 
     const hideHasBeenCalled = useRef(false);
-
-    const hide = useCallback(() => {
+    const hide = useEffectEvent(() => {
         // hide can only be called once
         if (hideHasBeenCalled.current) {
             return;
@@ -52,13 +51,19 @@ function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashS
                 ),
             );
         });
-    }, [opacity, scale, onHide]);
+    });
+
+    useEffect(() => {
+        if (!shouldHideSplash) {
+            return;
+        }
+        hide();
+    }, [shouldHideSplash]);
 
     return (
         <Reanimated.View style={[StyleSheet.absoluteFill, styles.splashScreenHider, opacityStyle]}>
             <Reanimated.View style={scaleStyle}>
                 <ImageSVG
-                    onLoadEnd={hide}
                     contentFit="fill"
                     style={{width: 100 * logoSizeRatio, height: 100 * logoSizeRatio}}
                     src={Logo}

src/components/SplashScreenHider/index.tsx

@@ -1,11 +1,18 @@
-import {useEffect} from 'react';
+import {useEffect, useEffectEvent} from 'react';
 import BootSplash from '@libs/BootSplash';
 import type {SplashScreenHiderProps, SplashScreenHiderReturnType} from './types';
 
-function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps): SplashScreenHiderReturnType {
-    useEffect(() => {
+function SplashScreenHider({onHide, shouldHideSplash}: SplashScreenHiderProps): SplashScreenHiderReturnType {
+    const hide = useEffectEvent(() => {
         BootSplash.hide().then(() => onHide());
-    }, [onHide]);
+    });
+
+    useEffect(() => {
+        if (!shouldHideSplash) {
+            return;
+        }
+        hide();
+    }, [shouldHideSplash]);
 
     return null;
 }

src/components/SplashScreenHider/types.ts

@@ -3,6 +3,9 @@ import type {ReactNode} from 'react';
 type SplashScreenHiderProps = {
     /** Splash screen has been hidden */
     onHide: () => void;
+
+    /** Whether the splash screen should be hidden */
+    shouldHideSplash: boolean;
 };
 
 type SplashScreenHiderReturnType = ReactNode;