From c512dd02854b741693a57e288bef54fac846ea26 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Tue, 13 Feb 2024 16:50:48 +0200
Subject: [PATCH 1/3] iOS - Login - The splash screen glitches and flashes on
 launch

---
 src/hooks/useIsSplashHidden.ts                | 11 ++++++
 src/pages/signin/SignInHeroImage.js           | 10 ++++++
 .../BackgroundImage/index.ios.js              | 34 ++++++++++++++++---
 3 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useIsSplashHidden.ts

diff --git a/src/hooks/useIsSplashHidden.ts b/src/hooks/useIsSplashHidden.ts
new file mode 100644
index 000000000000..7563d388416c
--- /dev/null
+++ b/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};
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
index c665a09932c2..8a3db0ea13de 100644
--- a/src/pages/signin/SignInHeroImage.js
+++ b/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}
diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
index b426a888e8b9..c0b907fb7fc9 100644
--- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js
+++ b/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>
     );
 }
 

From 2f9aadf67490a0d27417d040fdf93aa42218d8e8 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Tue, 13 Feb 2024 17:13:16 +0200
Subject: [PATCH 2/3] fixed reassure tests

---
 tests/perf-test/SignInPage.perf-test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx
index 88a653b1fbb9..8baa92ceff49 100644
--- a/tests/perf-test/SignInPage.perf-test.tsx
+++ b/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;
 });

From cae96fa861001eec81c9f6b123ff9ae66ffdd919 Mon Sep 17 00:00:00 2001
From: Kevin Brian Bader <kevin.bader96@gmail.com>
Date: Tue, 13 Feb 2024 17:45:55 +0200
Subject: [PATCH 3/3] reasurre tests fix - optional chaining

---
 src/libs/Navigation/getTopmostReportId.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/getTopmostReportId.ts b/src/libs/Navigation/getTopmostReportId.ts
index 4438cb273b84..aac8e7654865 100644
--- a/src/libs/Navigation/getTopmostReportId.ts
+++ b/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;
     }