Merge pull request #27885 from neonbhai/2FAScrollFixes

2FA flow scroll fixes
Expensify · Sep 22, 2023 · b57f6d2 · b57f6d2
2 parents 7bebfd3 + 5453660
commit b57f6d2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 44 deletions.
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -119,7 +119,7 @@ function ContactMethodsPage(props) {
                 title={props.translate('contacts.contactMethods')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
                     <Text>
                         {props.translate('contacts.helpTextBeforeEmail')}
@@ -131,15 +131,15 @@ function ContactMethodsPage(props) {
                     </Text>
                 </View>
                 {loginMenuItems}
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    <Button
+                        success
+                        text={props.translate('contacts.newContactMethod')}
+                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
+                        pressOnEnter
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.flexGrow0, styles.pt5]}>
-                <Button
-                    success
-                    text={props.translate('contacts.newContactMethod')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
-                    pressOnEnter
-                />
-            </FixedFooter>
         </ScreenWrapper>
     );
 }

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -49,7 +49,7 @@ function CodesStep({account = defaultAccount}) {
                 total: 3,
             }}
         >
-            <ScrollView>
+            <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Section
                     title={translate('twoFactorAuth.keepCodesSafe')}
                     icon={Illustrations.ShieldYellow}
@@ -108,27 +108,27 @@ function CodesStep({account = defaultAccount}) {
                         )}
                     </View>
                 </Section>
-            </ScrollView>
-            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                {!_.isEmpty(error) && (
-                    <FormHelpMessage
-                        isError
-                        message={translate(error)}
-                        style={[styles.mb3]}
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    {!_.isEmpty(error) && (
+                        <FormHelpMessage
+                            isError
+                            message={translate(error)}
+                            style={[styles.mb3]}
+                        />
+                    )}
+                    <Button
+                        success
+                        text={translate('common.next')}
+                        onPress={() => {
+                            if (!account.codesAreCopied) {
+                                setError('twoFactorAuth.errorStepCodes');
+                                return;
+                            }
+                            setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY);
+                        }}
                     />
-                )}
-                <Button
-                    success
-                    text={translate('common.next')}
-                    onPress={() => {
-                        if (!account.codesAreCopied) {
-                            setError('twoFactorAuth.errorStepCodes');
-                            return;
-                        }
-                        setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY);
-                    }}
-                />
-            </FixedFooter>
+                </FixedFooter>
+            </ScrollView>
         </StepWrapper>
     );
 }

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.js
@@ -76,8 +76,8 @@ function VerifyStep({account = defaultAccount}) {
             onEntryTransitionEnd={() => formRef.current && formRef.current.focus()}
         >
             <ScrollView
-                style={styles.mb5}
                 keyboardShouldPersistTaps="handled"
+                contentContainerStyle={styles.flexGrow1}
             >
                 <View style={[styles.ph5, styles.mt3]}>
                     <Text>
@@ -110,20 +110,20 @@ function VerifyStep({account = defaultAccount}) {
                 <View style={[styles.mt3, styles.mh5]}>
                     <TwoFactorAuthForm innerRef={formRef} />
                 </View>
+                <FixedFooter style={[styles.mtAuto, styles.pt5]}>
+                    <Button
+                        success
+                        text={translate('common.next')}
+                        isLoading={account.isLoading}
+                        onPress={() => {
+                            if (!formRef.current) {
+                                return;
+                            }
+                            formRef.current.validateAndSubmitForm();
+                        }}
+                    />
+                </FixedFooter>
             </ScrollView>
-            <FixedFooter style={[styles.mtAuto, styles.pt2]}>
-                <Button
-                    success
-                    text={translate('common.next')}
-                    isLoading={account.isLoading}
-                    onPress={() => {
-                        if (!formRef.current) {
-                            return;
-                        }
-                        formRef.current.validateAndSubmitForm();
-                    }}
-                />
-            </FixedFooter>
         </StepWrapper>
     );
 }