chore: add scrollview to CodesPage

Expensify · May 31, 2023 · 48a90a9 · 48a90a9
1 parent 931c335
commit 48a90a9
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 59 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1135,4 +1135,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.12.0
diff --git a/src/pages/settings/Security/TwoFactorAuth/CodesPage.js b/src/pages/settings/Security/TwoFactorAuth/CodesPage.js
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {ActivityIndicator, View} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
 import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
@@ -66,65 +67,67 @@ function CodesPage(props) {
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
             />
             <FullPageOfflineBlockingView>
-                <Section
-                    title={props.translate('twoFactorAuth.keepCodesSafe')}
-                    icon={Illustrations.ShieldYellow}
-                    containerStyles={[styles.twoFactorAuthSection]}
-                    iconContainerStyles={[styles.ml6]}
-                >
-                    <View style={styles.mv3}>
-                        <Text>{props.translate('twoFactorAuth.codesLoseAccess')}</Text>
-                    </View>
-                    <View style={[styles.twoFactorAuthCodesBox(props)]}>
-                        {props.account.isLoading ? (
-                            <View style={styles.twoFactorLoadingContainer}>
-                                <ActivityIndicator color={themeColors.spinner} />
-                            </View>
-                        ) : (
-                            <>
-                                <View style={styles.twoFactorAuthCodesContainer}>
-                                    {Boolean(props.account.recoveryCodes) &&
-                                        _.map(props.account.recoveryCodes.split(', '), (code) => (
-                                            <Text
-                                                style={styles.twoFactorAuthCode}
-                                                key={code}
-                                            >
-                                                {code}
-                                            </Text>
-                                        ))}
+                <ScrollView contentContainerStyle={styles.flex1}>
+                    <Section
+                        title={props.translate('twoFactorAuth.keepCodesSafe')}
+                        icon={Illustrations.ShieldYellow}
+                        containerStyles={[styles.twoFactorAuthSection]}
+                        iconContainerStyles={[styles.ml6]}
+                    >
+                        <View style={styles.mv3}>
+                            <Text>{props.translate('twoFactorAuth.codesLoseAccess')}</Text>
+                        </View>
+                        <View style={[styles.twoFactorAuthCodesBox(props)]}>
+                            {props.account.isLoading ? (
+                                <View style={styles.twoFactorLoadingContainer}>
+                                    <ActivityIndicator color={themeColors.spinner} />
                                 </View>
-                                <View style={styles.twoFactorAuthCodesButtonsContainer}>
-                                    <Button
-                                        text={props.translate('twoFactorAuth.copyCodes')}
-                                        medium
-                                        onPress={() => {
-                                            Clipboard.setString(props.account.recoveryCodes);
-                                            setIsNextButtonDisabled(false);
-                                        }}
-                                        style={styles.twoFactorAuthCodesButton}
-                                    />
-                                    <Button
-                                        text={props.translate('common.download')}
-                                        medium
-                                        onPress={() => {
-                                            localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
-                                            setIsNextButtonDisabled(false);
-                                        }}
-                                        style={styles.twoFactorAuthCodesButton}
-                                    />
-                                </View>
-                            </>
-                        )}
-                    </View>
-                </Section>
-                <FixedFooter style={[styles.twoFactorAuthFooter]}>
-                    <Button
-                        success
-                        text={props.translate('common.next')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
-                        isDisabled={isNextButtonDisabled}
-                    />
-                </FixedFooter>
+                            ) : (
+                                <>
+                                    <View style={styles.twoFactorAuthCodesContainer}>
+                                        {Boolean(props.account.recoveryCodes) &&
+                                            _.map(props.account.recoveryCodes.split(', '), (code) => (
+                                                <Text
+                                                    style={styles.twoFactorAuthCode}
+                                                    key={code}
+                                                >
+                                                    {code}
+                                                </Text>
+                                            ))}
+                                    </View>
+                                    <View style={styles.twoFactorAuthCodesButtonsContainer}>
+                                        <Button
+                                            text={props.translate('twoFactorAuth.copyCodes')}
+                                            medium
+                                            onPress={() => {
+                                                Clipboard.setString(props.account.recoveryCodes);
+                                                setIsNextButtonDisabled(false);
+                                            }}
+                                            style={styles.twoFactorAuthCodesButton}
+                                        />
+                                        <Button
+                                            text={props.translate('common.download')}
+                                            medium
+                                            onPress={() => {
+                                                localFileDownload('two-factor-auth-codes', props.account.recoveryCodes);
+                                                setIsNextButtonDisabled(false);
+                                            }}
+                                            style={styles.twoFactorAuthCodesButton}
+                                        />
+                                    </View>
+                                </>
+                            )}
+                        </View>
+                    </Section>
+                    <FixedFooter style={[styles.twoFactorAuthFooter]}>
+                        <Button
+                            success
+                            text={props.translate('common.next')}
+                            onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_VERIFY)}
+                            isDisabled={isNextButtonDisabled}
+                        />
+                    </FixedFooter>
+                </ScrollView>
             </FullPageOfflineBlockingView>
         </ScreenWrapper>
     );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1135,4 +1135,4 @@ SPEC CHECKSUMS:

		PODFILE CHECKSUM: 4ed1c7b099741c82e2b0411b95f6468e72be6c76

		COCOAPODS: 1.12.1
		COCOAPODS: 1.12.0