[Chore] Fix merge conflicts

src/pages/signin/LoginForm/BaseLoginForm.tsx

@@ -36,7 +36,8 @@ import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Account, CloseAccountForm, Credentials} from '@src/types/onyx';
+import type {CloseAccountForm} from '@src/types/form';
+import type {Account, Credentials} from '@src/types/onyx';
 import type LoginFormProps from './types';
 import type {InputHandle} from './types';
 

src/pages/signin/LoginForm/types.ts

@@ -2,9 +2,6 @@ type LoginFormProps = {
     /** Function used to scroll to the top of the page */
     scrollPageToTop?: () => void;
 
-    /** Whether the sign-in page is being rendered in the RHP modal */
-    isInModal?: boolean;
-
     /** Should we dismiss the keyboard when transitioning away from the page? */
     blurOnSubmit?: boolean;
 

src/pages/signin/SignInPage.tsx

@@ -48,10 +48,7 @@ type SignInPageInnerOnyxProps = {
     preferredLocale: OnyxEntry<Locale>;
 };
 
-type SignInPageInnerProps = SignInPageInnerOnyxProps & {
-    /** Whether the sign-in page is being rendered in the RHP modal */
-    isInModal?: boolean;
-};
+type SignInPageInnerProps = SignInPageInnerOnyxProps;
 
 type RenderOption = {
     shouldShowLoginForm: boolean;

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

@@ -1,23 +1,46 @@
 import {Image} from 'expo-image';
 import React, {useMemo} from 'react';
 import type {ImageSourcePropType} from 'react-native';
+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 type BackgroundImageProps from './types';
 
 function BackgroundImage({width, transitionDuration, isSmallScreen = false}: BackgroundImageProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const src = useMemo(() => (isSmallScreen ? MobileBackgroundImage : DesktopBackgroundImage), [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 as ImageSourcePropType}
-            style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]}
-            transition={transitionDuration}
-        />
+        <Reanimated.View style={[styles.signInBackground, StyleUtils.getWidthStyle(width), animatedStyle]}>
+            <Image
+                source={src as ImageSourcePropType}
+                onLoadEnd={() => setOpacityAnimation()}
+                style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]}
+                transition={transitionDuration}
+            />
+        </Reanimated.View>
     );
 }
 

src/pages/signin/SignInPageLayout/Footer.tsx

@@ -8,11 +8,12 @@ import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 import type {LinkProps, PressProps} from '@components/TextLink';
 import TextLink from '@components/TextLink';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import Licenses from '@pages/signin/Licenses';
 import Socials from '@pages/signin/Socials';
 import variables from '@styles/variables';
@@ -142,12 +143,13 @@ const columns = ({navigateFocus = () => {}}: Pick<FooterProps, 'navigateFocus'>)
     },
 ];
 
-function Footer({shouldShowSmallScreen = false, navigateFocus}: FooterProps) {
+function Footer({navigateFocus}: FooterProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {isMediumScreenWidth} = useWindowDimensions();
     const isVertical = shouldUseNarrowLayout;
     const imageDirection = isVertical ? styles.flexRow : styles.flexColumn;
     const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter;

src/pages/signin/SignInPageLayout/SignInHeroImage.tsx

@@ -1,18 +1,19 @@
 import React, {useMemo} from 'react';
+import {View} from 'react-native';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
+import useIsSplashHidden from '@hooks/useIsSplashHidden';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
-import type {SignInPageLayoutProps} from './types';
 
-type SignInHeroImageProps = Pick<SignInPageLayoutProps, 'shouldShowSmallScreen'>;
-
-function SignInHeroImage({shouldShowSmallScreen = false}: SignInHeroImageProps) {
+function SignInHeroImage() {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth, isMediumScreenWidth} = useWindowDimensions();
+    const {isMediumScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const imageSize = useMemo(() => {
-        if (isSmallScreenWidth || shouldShowSmallScreen) {
+        if (shouldUseNarrowLayout) {
             return {
                 height: variables.signInHeroImageMobileHeight,
                 width: variables.signInHeroImageMobileWidth,
@@ -23,7 +24,15 @@ function SignInHeroImage({shouldShowSmallScreen = false}: SignInHeroImageProps)
             height: isMediumScreenWidth ? variables.signInHeroImageTabletHeight : variables.signInHeroImageDesktopHeight,
             width: isMediumScreenWidth ? variables.signInHeroImageTabletWidth : variables.signInHeroImageDesktopWidth,
         };
-    }, [shouldShowSmallScreen, isMediumScreenWidth, isSmallScreenWidth]);
+    }, [shouldUseNarrowLayout, isMediumScreenWidth]);
+
+    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

src/pages/signin/SignInPageLayout/SignInPageContent.tsx

@@ -4,22 +4,19 @@ import ExpensifyWordmark from '@components/ExpensifyWordmark';
 import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
-import SignInHeroImage from '@pages/signin/SignInHeroImage';
 import variables from '@styles/variables';
 import SignInHeroImage from './SignInHeroImage';
 import type {SignInPageLayoutProps} from './types';
 
-type SignInPageContentProps = Pick<SignInPageLayoutProps, 'welcomeText' | 'welcomeHeader' | 'shouldShowWelcomeText' | 'shouldShowWelcomeHeader' | 'shouldShowSmallScreen'> & {
+type SignInPageContentProps = Pick<SignInPageLayoutProps, 'welcomeText' | 'welcomeHeader' | 'shouldShowWelcomeText' | 'shouldShowWelcomeHeader'> & {
     /** The children to show inside the layout */
     children?: React.ReactNode;
 };
 
-function SignInPageContent({shouldShowWelcomeHeader, welcomeHeader, welcomeText, shouldShowWelcomeText, shouldShowSmallScreen, children}: SignInPageContentProps) {
+function SignInPageContent({shouldShowWelcomeHeader, welcomeHeader, welcomeText, shouldShowWelcomeText, children}: SignInPageContentProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();

src/pages/signin/SignInPageLayout/index.tsx

@@ -48,7 +48,7 @@ function SignInPageLayout(
             containerStyles: shouldUseNarrowLayout ? [styles.flex1] : [styles.flex1, styles.signInPageInner],
             contentContainerStyles: [styles.flex1, shouldUseNarrowLayout ? styles.flexColumn : styles.flexRow],
         }),
-        [shouldShowSmallScreen, styles],
+        [shouldUseNarrowLayout, styles],
     );
 
     // To scroll on both mobile and web, we need to set the container height manually

src/pages/signin/SignInPageLayout/types.ts

@@ -18,9 +18,6 @@ type SignInPageLayoutProps = {
     /** Whether to show welcome header on a particular page */
     shouldShowWelcomeHeader?: boolean;
 
-    /** Whether the sign-in page is being rendered in the RHP modal */
-    shouldShowSmallScreen?: boolean;
-
     /** Override the green headline copy */
     customHeadline?: string;
 

src/types/form/CloseAccountForm.ts

@@ -3,11 +3,13 @@ import type Form from './Form';
 const INPUT_IDS = {
     REASON_FOR_LEAVING: 'reasonForLeaving',
     PHONE_OR_EMAIL: 'phoneOrEmail',
+    SUCCESS: 'success',
 } as const;
 
 type CloseAccountForm = Form<{
     [INPUT_IDS.REASON_FOR_LEAVING]: string;
     [INPUT_IDS.PHONE_OR_EMAIL]: string;
+    [INPUT_IDS.SUCCESS]: string;
 }>;
 
 export type {CloseAccountForm};