From d2ac397ec70c0d28b4d7d955cfb6b9be4433faf8 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 26 May 2023 11:13:09 +0700
Subject: [PATCH 1/4] fix: update height for text container

---
 src/components/MagicCodeInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 30c9b9ad4d9d..13fca0f735e6 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -293,7 +293,7 @@ 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, { height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth}, 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]}>

From f190a8fb8456e6a55ed4ee0686a89f34dd651de7 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 26 May 2023 11:44:27 +0700
Subject: [PATCH 2/4] fix: lint

---
 src/components/MagicCodeInput.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 13fca0f735e6..dbe414e95a14 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -293,7 +293,14 @@ function MagicCodeInput(props) {
                         key={index}
                         style={[styles.w15]}
                     >
-                        <View style={[styles.textInputContainer, { height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth}, focusedIndex === index ? styles.borderColorFocus : {}, props.hasError || props.errorText ? styles.borderColorDanger : {}]}>
+                        <View
+                            style={[
+                                styles.textInputContainer,
+                                {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth},
+                                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]}>

From a2cc7fa4d73c81da53615ccc87b9764a75b442ca Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 30 May 2023 11:12:53 +0700
Subject: [PATCH 3/4] fix: create new function to calculate the height

---
 src/components/MagicCodeInput.js |  3 ++-
 src/styles/StyleUtils.js         | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index dbe414e95a14..ce5f7e3a58e8 100644
--- 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';
@@ -296,7 +297,7 @@ function MagicCodeInput(props) {
                         <View
                             style={[
                                 styles.textInputContainer,
-                                {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth},
+                                StyleUtils.getHeightOfMagicCodeInput(),
                                 focusedIndex === index ? styles.borderColorFocus : {},
                                 props.hasError || props.errorText ? styles.borderColorDanger : {},
                             ]}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 92ec8134c166..06d7fe1bb6a9 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -65,6 +65,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 avatar size constant
  *
@@ -1183,4 +1192,5 @@ export {
     getGoogleListViewStyle,
     getMentionStyle,
     getMentionTextColor,
+    getHeightOfMagicCodeInput
 };

From a4f6f2a1ced9705d7ed114ebaae2011763f7b6e4 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 30 May 2023 16:31:47 +0700
Subject: [PATCH 4/4] fix: lint

---
 src/styles/StyleUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 5b37871a7551..4cd4259bbfb2 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -77,7 +77,7 @@ function getAvatarSize(size) {
  * @returns {Object}
  */
 function getHeightOfMagicCodeInput() {
-    return  {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth}
+    return {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth};
 }
 
 /**
@@ -1211,5 +1211,5 @@ export {
     getGoogleListViewStyle,
     getMentionStyle,
     getMentionTextColor,
-    getHeightOfMagicCodeInput
+    getHeightOfMagicCodeInput,
 };