Merge pull request #52649 from Expensify/revert-52444-fix/51998-part-…

…of-the-signin-magic-code-screen-is-blank

[CP Stag] Revert "Fix blank space is shown on iOS safari when magic code screen show"

src/pages/signin/SignInPage.tsx

@@ -1,7 +1,7 @@
 import {Str} from 'expensify-common';
 import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import type {ForwardedRef} from 'react';
-import {useOnyx} from 'react-native-onyx';
+import type {ForwardedRef, RefAttributes} from 'react';
+import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackground';
@@ -24,7 +24,7 @@ import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Account, Credentials} from '@src/types/onyx';
+import type {Account, Credentials, Locale} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import ChooseSSOOrMagicCode from './ChooseSSOOrMagicCode';
 import EmailDeliveryFailurePage from './EmailDeliveryFailurePage';
@@ -37,7 +37,21 @@ import UnlinkLoginForm from './UnlinkLoginForm';
 import ValidateCodeForm from './ValidateCodeForm';
 import type {BaseValidateCodeFormRef} from './ValidateCodeForm/BaseValidateCodeForm';
 
-type SignInPageInnerProps = {
+type SignInPageInnerOnyxProps = {
+    /** The details about the account that the user is signing in with */
+    account: OnyxEntry<Account>;
+
+    /** The credentials of the person signing in */
+    credentials: OnyxEntry<Credentials>;
+
+    /** Active Clients connected to ONYX Database */
+    activeClients: OnyxEntry<string[]>;
+
+    /** The user's preferred locale */
+    preferredLocale: OnyxEntry<Locale>;
+};
+
+type SignInPageInnerProps = SignInPageInnerOnyxProps & {
     shouldEnableMaxHeight?: boolean;
 };
 
@@ -132,18 +146,8 @@ function getRenderOptions({
         shouldShouldSignUpWelcomeForm,
     };
 }
-function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: ForwardedRef<SignInPageRef>) {
-    const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    /**
-      This variable is only added to make sure the component is re-rendered
-      whenever the activeClients change, so that we call the
-      ActiveClientManager.isClientTheLeader function
-      everytime the leader client changes.
-      We use that function to prevent repeating code that checks which client is the leader.
-    */
-    const [activeClients] = useOnyx(ONYXKEYS.ACTIVE_CLIENTS);
-    const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE);
+
+function SignInPage({credentials, account, activeClients = [], preferredLocale, shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: ForwardedRef<SignInPageRef>) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate, formatPhoneNumber} = useLocalize();
@@ -291,6 +295,7 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             shouldEnableMaxHeight={shouldEnableMaxHeight}
+            shouldUseCachedViewportHeight
             style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInNarrowPaneModal ? 0 : safeAreaInsets.top}, 1)]}
             testID={SignInPageThemeWrapper.displayName}
         >
@@ -335,6 +340,7 @@ function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: F
 }
 
 type SignInPageProps = SignInPageInnerProps;
+type SignInPageOnyxProps = SignInPageInnerOnyxProps;
 const SignInPageWithRef = forwardRef(SignInPage);
 
 function SignInPageThemeWrapper(props: SignInPageProps, ref: ForwardedRef<SignInPageRef>) {
@@ -356,6 +362,20 @@ function SignInPageThemeWrapper(props: SignInPageProps, ref: ForwardedRef<SignIn
 
 SignInPageThemeWrapper.displayName = 'SignInPage';
 
-export default forwardRef(SignInPageThemeWrapper);
+export default withOnyx<SignInPageProps & RefAttributes<SignInPageRef>, SignInPageOnyxProps>({
+    account: {key: ONYXKEYS.ACCOUNT},
+    credentials: {key: ONYXKEYS.CREDENTIALS},
+    /**
+      This variable is only added to make sure the component is re-rendered
+      whenever the activeClients change, so that we call the
+      ActiveClientManager.isClientTheLeader function
+      everytime the leader client changes.
+      We use that function to prevent repeating code that checks which client is the leader.
+    */
+    activeClients: {key: ONYXKEYS.ACTIVE_CLIENTS},
+    preferredLocale: {
+        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+    },
+})(forwardRef(SignInPageThemeWrapper));
 
 export type {SignInPageRef};