Merge pull request #57042 from thelullabyy/fix/56818-text-overlap-on-…

…magic-code-input Error text overlap on the magic code input screen with small screen devices
Expensify · Feb 24, 2025 · fe3d37c · fe3d37c
2 parents 0197926 + 6dad21e
commit fe3d37c
Showing 1 changed file with 23 additions and 16 deletions.
diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx
@@ -4,6 +4,7 @@ import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -90,22 +91,28 @@ function ValidateCodeActionModal({
                     onThreeDotsButtonPress={onThreeDotsButtonPress}
                 />
 
-                <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb5, themeStyles.flex1]}>
-                    <Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text>
-                    {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>}
-                    <ValidateCodeForm
-                        isLoading={isLoading}
-                        validateCodeAction={validateCodeAction}
-                        validatePendingAction={validatePendingAction}
-                        validateError={validateError}
-                        handleSubmitForm={handleSubmitForm}
-                        sendValidateCode={sendValidateCode}
-                        clearError={clearError}
-                        buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
-                        ref={validateCodeFormRef}
-                        hasMagicCodeBeenSent={hasMagicCodeBeenSent}
-                    />
-                </View>
+                <ScrollView
+                    style={[styles.w100, styles.h100, styles.flex1]}
+                    contentContainerStyle={styles.flexGrow1}
+                    keyboardShouldPersistTaps="handled"
+                >
+                    <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb5, themeStyles.flex1]}>
+                        <Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text>
+                        {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>}
+                        <ValidateCodeForm
+                            isLoading={isLoading}
+                            validateCodeAction={validateCodeAction}
+                            validatePendingAction={validatePendingAction}
+                            validateError={validateError}
+                            handleSubmitForm={handleSubmitForm}
+                            sendValidateCode={sendValidateCode}
+                            clearError={clearError}
+                            buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]}
+                            ref={validateCodeFormRef}
+                            hasMagicCodeBeenSent={hasMagicCodeBeenSent}
+                        />
+                    </View>
+                </ScrollView>
                 {footer?.()}
             </ScreenWrapper>
         </Modal>