[TS migration] Migrate 'SplashScreenHider' component to TypeScript

src/components/SplashScreenHider/index.native.js → src/components/SplashScreenHider/index.native.tsx

@@ -1,33 +1,22 @@
 import {useCallback, useRef} from 'react';
-import PropTypes from 'prop-types';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, ViewStyle} from 'react-native';
 import Reanimated, {useSharedValue, withTiming, Easing, useAnimatedStyle, runOnJS} from 'react-native-reanimated';
 import BootSplash from '../../libs/BootSplash';
 import Logo from '../../../assets/images/new-expensify-dark.svg';
 import styles from '../../styles/styles';
+import type SplashScreenHiderProps from './types';
 
-const propTypes = {
-    /** Splash screen has been hidden */
-    onHide: PropTypes.func,
-};
-
-const defaultProps = {
-    onHide: () => {},
-};
-
-function SplashScreenHider(props) {
-    const {onHide} = props;
-
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
     const logoSizeRatio = BootSplash.logoSizeRatio || 1;
     const navigationBarHeight = BootSplash.navigationBarHeight || 0;
 
     const opacity = useSharedValue(1);
     const scale = useSharedValue(1);
 
-    const opacityStyle = useAnimatedStyle(() => ({
+    const opacityStyle = useAnimatedStyle<ViewStyle>(() => ({
         opacity: opacity.value,
     }));
-    const scaleStyle = useAnimatedStyle(() => ({
+    const scaleStyle = useAnimatedStyle<ViewStyle>(() => ({
         transform: [{scale: scale.value}],
     }));
 
@@ -83,7 +72,5 @@ function SplashScreenHider(props) {
 }
 
 SplashScreenHider.displayName = 'SplashScreenHider';
-SplashScreenHider.propTypes = propTypes;
-SplashScreenHider.defaultProps = defaultProps;
 
 export default SplashScreenHider;

src/components/SplashScreenHider/index.tsx

@@ -0,0 +1,15 @@
+import {useEffect} from 'react';
+import BootSplash from '../../libs/BootSplash';
+import type SplashScreenHiderProps from './types';
+
+function SplashScreenHider({onHide = () => {}}: SplashScreenHiderProps) {
+    useEffect(() => {
+        BootSplash.hide().then(() => onHide());
+    }, [onHide]);
+
+    return null;
+}
+
+SplashScreenHider.displayName = 'SplashScreenHider';
+
+export default SplashScreenHider;

src/components/SplashScreenHider/types.ts

@@ -0,0 +1,6 @@
+type SplashScreenHiderProps = {
+    /** Splash screen has been hidden */
+    onHide: () => void;
+};
+
+export default SplashScreenHiderProps;