Merge pull request #35185 from ikevin127/fix/34696

iOS - Login - The splash screen glitches and flashes on launch

src/hooks/useIsSplashHidden.ts

@@ -0,0 +1,11 @@
+import {useContext} from 'react';
+import {SplashScreenHiddenContext} from '@src/Expensify';
+
+type SplashScreenHiddenContextType = {isSplashHidden: boolean};
+
+export default function useIsSplashHidden() {
+    const {isSplashHidden} = useContext(SplashScreenHiddenContext) as SplashScreenHiddenContextType;
+    return isSplashHidden;
+}
+
+export type {SplashScreenHiddenContextType};

src/libs/Navigation/getTopmostReportId.ts

@@ -16,7 +16,7 @@ function getTopmostReportId(state: NavigationState | NavigationState<RootStackPa
         return;
     }
 
-    const topmostCentralPane = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1);
+    const topmostCentralPane = state.routes?.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1);
     if (!topmostCentralPane) {
         return;
     }

src/pages/signin/SignInHeroImage.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {View} from 'react-native';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useIsSplashHidden from '@hooks/useIsSplashHidden';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 
@@ -36,6 +38,14 @@ function SignInHeroImage(props) {
         };
     }
 
+    const isSplashHidden = useIsSplashHidden();
+    // Prevents rendering of the Lottie animation until the splash screen is hidden
+    // by returning an empty view of the same size as the animation.
+    // See issue: https://github.com/Expensify/App/issues/34696
+    if (!isSplashHidden) {
+        return <View style={[styles.alignSelfCenter, imageSize]} />;
+    }
+
     return (
         <Lottie
             source={LottieAnimations.Hands}

src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js

@@ -1,10 +1,13 @@
 import {Image} from 'expo-image';
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
+import Reanimated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile-new.svg';
+import useIsSplashHidden from '@hooks/useIsSplashHidden';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 import defaultPropTypes from './propTypes';
 
 const defaultProps = {
@@ -21,12 +24,33 @@ function BackgroundImage(props) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const src = useMemo(() => (props.isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [props.isSmallScreen]);
+
+    const opacity = useSharedValue(0);
+    const animatedStyle = useAnimatedStyle(() => ({opacity: opacity.value}));
+    // This sets the opacity animation for the background image once it has loaded.
+    function setOpacityAnimation() {
+        opacity.value = withTiming(1, {
+            duration: CONST.MICROSECONDS_PER_MS,
+            easing: Easing.ease,
+        });
+    }
+
+    const isSplashHidden = useIsSplashHidden();
+    // Prevent rendering the background image until the splash screen is hidden.
+    // See issue: https://github.com/Expensify/App/issues/34696
+    if (!isSplashHidden) {
+        return;
+    }
+
     return (
-        <Image
-            source={src}
-            style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width)]}
-            transition={props.transitionDuration}
-        />
+        <Reanimated.View style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width), animatedStyle]}>
+            <Image
+                source={src}
+                onLoadEnd={() => setOpacityAnimation()}
+                style={[styles.signInBackground, StyleUtils.getWidthStyle(props.width)]}
+                transition={props.transitionDuration}
+            />
+        </Reanimated.View>
     );
 }
 

tests/perf-test/SignInPage.perf-test.tsx

@@ -37,6 +37,7 @@ jest.mock('@react-navigation/native', () => {
             removeListener: () => jest.fn(),
             isReady: () => jest.fn(),
             getCurrentRoute: () => jest.fn(),
+            getState: () => jest.fn(),
         }),
     } as typeof NativeNavigation;
 });