Merge pull request #19653 from dukenv0307/fix/19387

fix: update height for text container
Expensify · May 30, 2023 · a98f3bc · a98f3bc
2 parents 70e5aeb + a4f6f2a
commit a98f3bc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
@@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import * as ValidationUtils from '../libs/ValidationUtils';
 import CONST from '../CONST';
 import Text from './Text';
@@ -293,7 +294,14 @@ function MagicCodeInput(props) {
                         key={index}
                         style={[styles.w15]}
                     >
-                        <View style={[styles.textInputContainer, focusedIndex === index ? styles.borderColorFocus : {}, props.hasError || props.errorText ? styles.borderColorDanger : {}]}>
+                        <View
+                            style={[
+                                styles.textInputContainer,
+                                StyleUtils.getHeightOfMagicCodeInput(),
+                                focusedIndex === index ? styles.borderColorFocus : {},
+                                props.hasError || props.errorText ? styles.borderColorDanger : {},
+                            ]}
+                        >
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(props.value, props.maxLength)[index] || ''}</Text>
                         </View>
                         <View style={[StyleSheet.absoluteFillObject, styles.w100, isMobileSafari ? styles.bgTransparent : styles.opacity0]}>

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
@@ -71,6 +71,15 @@ function getAvatarSize(size) {
     return avatarSizes[size];
 }
 
+/**
+ * Return the height of magic code input container
+ *
+ * @returns {Object}
+ */
+function getHeightOfMagicCodeInput() {
+    return {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth};
+}
+
 /**
  * Return the style from an empty avatar size constant
  *
@@ -1203,4 +1212,5 @@ export {
     getGoogleListViewStyle,
     getMentionStyle,
     getMentionTextColor,
+    getHeightOfMagicCodeInput,
 };