Fix the keyboard issue in the SignInModal along with derivatives

src/pages/signin/SignInModal.tsx

@@ -5,18 +5,23 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import {openApp} from '@libs/actions/App';
+import {isMobileSafari} from '@libs/Browser';
 import Navigation from '@libs/Navigation/Navigation';
 import {waitForIdle} from '@libs/Network/SequentialQueue';
 import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import SignInPage from './SignInPage';
+import SignInPageWrapped, {SignInPage} from './SignInPage';
 import type {SignInPageRef} from './SignInPage';
 
 function SignInModal() {
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const signinPageRef = useRef<SignInPageRef | null>(null);
     const session = useSession();
+    // Use of SignInPageWrapped (with shouldEnableMaxHeight prop in SignInPageWrapper) is a workaround for Safari not supporting interactive-widget=resizes-content.
+    // This allows better scrolling experience after keyboard shows for modals with input, that are larger than remaining screen height.
+    // More info https://github.com/Expensify/App/pull/62799#issuecomment-2943136220.
+    const SignInPageBase = isMobileSafari() ? SignInPageWrapped : SignInPage;
 
     useEffect(() => {
         const isAnonymousUser = session?.authTokenType === CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
@@ -39,7 +44,6 @@ function SignInModal() {
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.SIGN_IN].backgroundColor)]}
             includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
             shouldShowOfflineIndicator={false}
             testID={SignInModal.displayName}
         >
@@ -52,10 +56,7 @@ function SignInModal() {
                     signinPageRef.current?.navigateBack();
                 }}
             />
-            <SignInPage
-                shouldEnableMaxHeight={false}
-                ref={signinPageRef}
-            />
+            <SignInPageBase ref={signinPageRef} />
         </ScreenWrapper>
     );
 }

src/pages/signin/SignInPage.tsx

@@ -1,13 +1,12 @@
 import {Str} from 'expensify-common';
+import type {Ref} from 'react';
 import React, {useEffect, useImperativeHandle, useRef, useState} from 'react';
-import type {ForwardedRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackground';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ThemeProvider from '@components/ThemeProvider';
 import ThemeStylesProvider from '@components/ThemeStylesProvider';
-import useHandleBackButton from '@hooks/useHandleBackButton';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -39,9 +38,8 @@ import UnlinkLoginForm from './UnlinkLoginForm';
 import ValidateCodeForm from './ValidateCodeForm';
 import type {BaseValidateCodeFormRef} from './ValidateCodeForm/BaseValidateCodeForm';
 
-type SignInPageInnerProps = {
-    shouldEnableMaxHeight?: boolean;
-    ref?: ForwardedRef<SignInPageRef>;
+type SignInPageProps = {
+    ref?: Ref<SignInPageRef>;
 };
 
 type SignInPageRef = {
@@ -144,12 +142,9 @@ function getRenderOptions({
     };
 }
 
-function SignInPage({shouldEnableMaxHeight = true, ref}: SignInPageInnerProps) {
-    const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
+function SignInPage({ref}: SignInPageProps) {
     const {translate, formatPhoneNumber} = useLocalize();
-    const {shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
-    const safeAreaInsets = useSafeAreaInsets();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const signInPageLayoutRef = useRef<SignInPageLayoutRef>(null);
     const loginFormRef = useRef<InputHandle>(null);
     const validateCodeFormRef = useRef<BaseValidateCodeFormRef>(null);
@@ -296,80 +291,86 @@ function SignInPage({shouldEnableMaxHeight = true, ref}: SignInPageInnerProps) {
     useImperativeHandle(ref, () => ({
         navigateBack,
     }));
-    useHandleBackButton(navigateBack);
+
+    return (
+        <ColorSchemeWrapper>
+            <CustomStatusBarAndBackground isNested />
+            <LoginProvider>
+                <SignInPageLayout
+                    welcomeHeader={welcomeHeader}
+                    welcomeText={welcomeText}
+                    shouldShowWelcomeHeader={shouldShowWelcomeHeader || !shouldUseNarrowLayout}
+                    shouldShowWelcomeText={shouldShowWelcomeText}
+                    ref={signInPageLayoutRef}
+                    navigateFocus={navigateFocus}
+                >
+                    {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
+                        so that password managers can access the values. Conditionally rendering this component will break this feature. */}
+                    <LoginForm
+                        ref={loginFormRef}
+                        isVisible={shouldShowLoginForm}
+                        blurOnSubmit={isAccountValidated === false}
+                        // eslint-disable-next-line react-compiler/react-compiler
+                        scrollPageToTop={signInPageLayoutRef.current?.scrollPageToTop}
+                    />
+                    {shouldShouldSignUpWelcomeForm && <SignUpWelcomeForm />}
+                    {shouldShowValidateCodeForm && (
+                        <ValidateCodeForm
+                            isVisible={!shouldShowAnotherLoginPageOpenedMessage}
+                            isUsingRecoveryCode={isUsingRecoveryCode}
+                            setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+                            ref={validateCodeFormRef}
+                        />
+                    )}
+                    {!shouldShowAnotherLoginPageOpenedMessage && (
+                        <>
+                            {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
+                            {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
+                            {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
+                            {shouldShowSMSDeliveryFailurePage && <SMSDeliveryFailurePage />}
+                        </>
+                    )}
+                </SignInPageLayout>
+            </LoginProvider>
+        </ColorSchemeWrapper>
+    );
+}
+
+function SignInPageWrapper({ref}: SignInPageProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const safeAreaInsets = useSafeAreaInsets();
+    const {isInNarrowPaneModal} = useResponsiveLayout();
 
     return (
         // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile.
         // The SVG should flow under the Home Indicator on iOS.
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
-            shouldEnableMaxHeight={shouldEnableMaxHeight}
+            shouldEnableMaxHeight
             style={[styles.signInPage, StyleUtils.getPlatformSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInNarrowPaneModal ? 0 : safeAreaInsets.top}, 1)]}
-            testID={SignInPageWrapper.displayName}
+            testID="SignInPageWrapper"
         >
-            <SignInPageLayout
-                welcomeHeader={welcomeHeader}
-                welcomeText={welcomeText}
-                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !shouldUseNarrowLayout}
-                shouldShowWelcomeText={shouldShowWelcomeText}
-                ref={signInPageLayoutRef}
-                navigateFocus={navigateFocus}
-            >
-                {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden
-             so that password managers can access the values. Conditionally rendering this component will break this feature. */}
-                <LoginForm
-                    ref={loginFormRef}
-                    isVisible={shouldShowLoginForm}
-                    blurOnSubmit={isAccountValidated === false}
-                    // eslint-disable-next-line react-compiler/react-compiler
-                    scrollPageToTop={signInPageLayoutRef.current?.scrollPageToTop}
-                />
-                {shouldShouldSignUpWelcomeForm && <SignUpWelcomeForm />}
-                {shouldShowValidateCodeForm && (
-                    <ValidateCodeForm
-                        isVisible={!shouldShowAnotherLoginPageOpenedMessage}
-                        isUsingRecoveryCode={isUsingRecoveryCode}
-                        setIsUsingRecoveryCode={setIsUsingRecoveryCode}
-                        ref={validateCodeFormRef}
-                    />
-                )}
-                {!shouldShowAnotherLoginPageOpenedMessage && (
-                    <>
-                        {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
-                        {shouldShowChooseSSOOrMagicCode && <ChooseSSOOrMagicCode setIsUsingMagicCode={setIsUsingMagicCode} />}
-                        {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
-                        {shouldShowSMSDeliveryFailurePage && <SMSDeliveryFailurePage />}
-                    </>
-                )}
-            </SignInPageLayout>
+            <SignInPage ref={ref} />
         </ScreenWrapper>
     );
 }
 
-type SignInPageProps = SignInPageInnerProps;
-const SignInPageWithRef = SignInPage;
-
-function SignInPageWrapper({ref, ...props}: SignInPageProps) {
-    return (
+// WithTheme is a HOC that provides theme-related contexts (e.g. to the SignInPageWrapper component since these contexts are required for variable declarations).
+function WithTheme(Component: React.ComponentType<SignInPageProps>) {
+    return ({ref}: SignInPageProps) => (
         <ThemeProvider theme={CONST.THEME.DARK}>
             <ThemeStylesProvider>
-                <ColorSchemeWrapper>
-                    <CustomStatusBarAndBackground isNested />
-                    <LoginProvider>
-                        <SignInPageWithRef
-                            ref={ref}
-                            // eslint-disable-next-line react/jsx-props-no-spreading
-                            {...props}
-                        />
-                    </LoginProvider>
-                </ColorSchemeWrapper>
+                <Component ref={ref} />
             </ThemeStylesProvider>
         </ThemeProvider>
     );
 }
 
-SignInPageWrapper.displayName = 'SignInPage';
+const SignInPageThemed = WithTheme(SignInPage);
+
+export {SignInPageThemed as SignInPage};
 
-export default SignInPageWrapper;
+export default WithTheme(SignInPageWrapper);
 
 export type {SignInPageRef};