diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx index 8ae94c003047..bca0fbd2f8ef 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx +++ b/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'; diff --git a/src/pages/signin/LoginForm/types.ts b/src/pages/signin/LoginForm/types.ts index a0ce91c8887a..775009072a2d 100644 --- a/src/pages/signin/LoginForm/types.ts +++ b/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; diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/pages/signin/SignInPage.tsx b/src/pages/signin/SignInPage.tsx index 4258de16c1dc..3d761601a919 100644 --- a/src/pages/signin/SignInPage.tsx +++ b/src/pages/signin/SignInPage.tsx @@ -48,10 +48,7 @@ type SignInPageInnerOnyxProps = { preferredLocale: OnyxEntry; }; -type SignInPageInnerProps = SignInPageInnerOnyxProps & { - /** Whether the sign-in page is being rendered in the RHP modal */ - isInModal?: boolean; -}; +type SignInPageInnerProps = SignInPageInnerOnyxProps; type RenderOption = { shouldShowLoginForm: boolean; diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.js deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx index 5b0697e67220..b52709951c80 100644 --- a/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx +++ b/src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx @@ -1,10 +1,13 @@ 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) { @@ -12,12 +15,32 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac 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 ( - + + setOpacityAnimation()} + style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]} + transition={transitionDuration} + /> + ); } diff --git a/src/pages/signin/SignInPageLayout/Footer.tsx b/src/pages/signin/SignInPageLayout/Footer.tsx index 2bdbf241bb21..4e2d642e0179 100644 --- a/src/pages/signin/SignInPageLayout/Footer.tsx +++ b/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) }, ]; -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; diff --git a/src/pages/signin/SignInPageLayout/SignInHeroImage.tsx b/src/pages/signin/SignInPageLayout/SignInHeroImage.tsx index 16f1d43a8638..538f26e32e93 100644 --- a/src/pages/signin/SignInPageLayout/SignInHeroImage.tsx +++ b/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; - -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 ; + } return ( & { +type SignInPageContentProps = Pick & { /** 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(); diff --git a/src/pages/signin/SignInPageLayout/index.tsx b/src/pages/signin/SignInPageLayout/index.tsx index 9a3ed1d94f06..b65da7eba0a5 100644 --- a/src/pages/signin/SignInPageLayout/index.tsx +++ b/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 diff --git a/src/pages/signin/SignInPageLayout/types.ts b/src/pages/signin/SignInPageLayout/types.ts index 6dce8895b2d7..6a3422f846d1 100644 --- a/src/pages/signin/SignInPageLayout/types.ts +++ b/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; diff --git a/src/types/form/CloseAccountForm.ts b/src/types/form/CloseAccountForm.ts index f6922df1d062..054dcd71e442 100644 --- a/src/types/form/CloseAccountForm.ts +++ b/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};