From e500fdd46f19ede2550e9bbfe11e6fe019d57f88 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 1 May 2024 14:51:19 +0700
Subject: [PATCH] Save button does not move above the keyboard when keyboard is
 up

---
 src/components/TextPicker/TextSelectorModal.tsx          | 7 +++----
 .../TextPicker/usePaddingStyle/index.android.tsx         | 9 +++++++++
 src/components/TextPicker/usePaddingStyle/index.tsx      | 6 ++++++
 3 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 src/components/TextPicker/usePaddingStyle/index.android.tsx
 create mode 100644 src/components/TextPicker/usePaddingStyle/index.tsx

diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx
index 0fe7580746c5..2abbd9abc8e6 100644
--- a/src/components/TextPicker/TextSelectorModal.tsx
+++ b/src/components/TextPicker/TextSelectorModal.tsx
@@ -7,18 +7,17 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {TextSelectorModalProps} from './types';
+import usePaddingStyle from './usePaddingStyle';
 
 function TextSelectorModal({value, description = '', onValueSelected, isVisible, onClose, ...rest}: TextSelectorModalProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
     const [currentValue, setValue] = useState(value);
-
-    const {paddingTop, paddingBottom} = useStyledSafeAreaInsets();
+    const paddingStyle = usePaddingStyle();
 
     return (
         <Modal
@@ -35,7 +34,7 @@ function TextSelectorModal({value, description = '', onValueSelected, isVisible,
                 includeSafeAreaPaddingBottom={false}
                 testID={TextSelectorModal.displayName}
                 shouldEnableMaxHeight
-                style={{paddingTop, paddingBottom}}
+                style={paddingStyle}
             >
                 <HeaderWithBackButton
                     title={description}
diff --git a/src/components/TextPicker/usePaddingStyle/index.android.tsx b/src/components/TextPicker/usePaddingStyle/index.android.tsx
new file mode 100644
index 000000000000..cabf9141cf43
--- /dev/null
+++ b/src/components/TextPicker/usePaddingStyle/index.android.tsx
@@ -0,0 +1,9 @@
+import useKeyboardState from '@hooks/useKeyboardState';
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
+
+export default function usePaddingStyle() {
+    const {keyboardHeight} = useKeyboardState();
+    const {paddingTop} = useStyledSafeAreaInsets();
+
+    return {paddingTop, paddingBottom: keyboardHeight};
+}
diff --git a/src/components/TextPicker/usePaddingStyle/index.tsx b/src/components/TextPicker/usePaddingStyle/index.tsx
new file mode 100644
index 000000000000..c7f317b27a90
--- /dev/null
+++ b/src/components/TextPicker/usePaddingStyle/index.tsx
@@ -0,0 +1,6 @@
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
+
+export default function usePaddingStyle() {
+    const {paddingTop, paddingBottom} = useStyledSafeAreaInsets();
+    return {paddingTop, paddingBottom};
+}