From 45ce16e80e040279ad9fce079bfa8c69ee756d50 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 3 Jul 2024 12:47:06 +0700
Subject: [PATCH 01/13] Fix: Add more space to bottom docked button

---
 src/components/Form/FormWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 5c74fd466a15..4fc9f26cb0d2 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -114,7 +114,7 @@ function FormWrapper({
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
-                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles]}
+                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles, safeAreaPaddingBottomStyle.paddingBottom ? styles.pb5 : {}]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter={disablePressOnEnter}

From 731fce3da04f3d5a5db52ae4e4c6e2352b4819cb Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 3 Jul 2024 15:26:49 +0700
Subject: [PATCH 02/13] Fix: IOU request step screen

---
 src/pages/iou/request/step/IOURequestStepDate.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/iou/request/step/IOURequestStepDate.tsx b/src/pages/iou/request/step/IOURequestStepDate.tsx
index 63ac316970f8..45c9fc0aaa2e 100644
--- a/src/pages/iou/request/step/IOURequestStepDate.tsx
+++ b/src/pages/iou/request/step/IOURequestStepDate.tsx
@@ -117,6 +117,7 @@ function IOURequestStepDate({
             shouldShowNotFoundPage={shouldShowNotFound}
             shouldShowWrapper
             testID={IOURequestStepDate.displayName}
+            includeSafeAreaPaddingBottom={false}
         >
             <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}

From 03857496f4a30a140b0c1ac0f1bafce797d06bdd Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 3 Jul 2024 16:00:56 +0700
Subject: [PATCH 03/13] Fix: Remove additional padding bottom if keyboard is
 shown

---
 src/components/Form/FormWrapper.tsx | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 4fc9f26cb0d2..0414847cfbf6 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useRef} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {RefObject} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView, StyleProp, View, ViewStyle} from 'react-native';
@@ -65,6 +65,20 @@ function FormWrapper({
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
     const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]);
+    const [willKeyboardShow, setWillKeyboardShow] = useState(false);
+    useEffect(() => {
+        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
+            setWillKeyboardShow(true);
+        });
+        const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
+            setWillKeyboardShow(false);
+        });
+
+        return () => {
+            keyboardWillShowListener.remove();
+            keyboardWillHideListener.remove();
+        };
+    }, []);
 
     const onFixTheErrorsLinkPressed = useCallback(() => {
         const errorFields = !isEmptyObject(errors) ? errors : formState?.errorFields ?? {};
@@ -114,7 +128,13 @@ function FormWrapper({
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
-                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles, safeAreaPaddingBottomStyle.paddingBottom ? styles.pb5 : {}]}
+                        containerStyles={[
+                            styles.mh0,
+                            styles.mt5,
+                            submitFlexEnabled ? styles.flex1 : {},
+                            submitButtonStyles,
+                            safeAreaPaddingBottomStyle.paddingBottom && !willKeyboardShow ? styles.pb5 : {},
+                        ]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter={disablePressOnEnter}
@@ -146,6 +166,7 @@ function FormWrapper({
             enabledWhenOffline,
             isSubmitActionDangerous,
             disablePressOnEnter,
+            willKeyboardShow,
         ],
     );
 

From 6f1fe8342d352cd325c9fd9c19833fa20b9c11a5 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 3 Jul 2024 16:08:33 +0700
Subject: [PATCH 04/13] Fix: Lint

---
 src/components/Form/FormWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 0414847cfbf6..d57102edb6af 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -67,7 +67,7 @@ function FormWrapper({
     const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]);
     const [willKeyboardShow, setWillKeyboardShow] = useState(false);
     useEffect(() => {
-        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
+        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', () => {
             setWillKeyboardShow(true);
         });
         const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {

From b1d80d2b10b4382d829dd7bf15b18639fd6c441b Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 4 Jul 2024 17:35:00 +0700
Subject: [PATCH 05/13] Fix: Create useExtraSafePaddingBottomStyle

---
 src/hooks/useExtraSafePaddingBottomStyle.ts | 33 +++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/hooks/useExtraSafePaddingBottomStyle.ts

diff --git a/src/hooks/useExtraSafePaddingBottomStyle.ts b/src/hooks/useExtraSafePaddingBottomStyle.ts
new file mode 100644
index 000000000000..683475616bdb
--- /dev/null
+++ b/src/hooks/useExtraSafePaddingBottomStyle.ts
@@ -0,0 +1,33 @@
+import {useEffect, useMemo, useState} from 'react';
+import {Keyboard} from 'react-native';
+import useStyledSafeAreaInsets from './useStyledSafeAreaInsets';
+import useThemeStyles from './useThemeStyles';
+
+const useExtraSafePaddingBottomStyle = () => {
+    const styles = useThemeStyles();
+    const [willKeyboardShow, setWillKeyboardShow] = useState(false);
+    useEffect(() => {
+        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', () => {
+            setWillKeyboardShow(true);
+        });
+        const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
+            setWillKeyboardShow(false);
+        });
+        return () => {
+            keyboardWillShowListener.remove();
+            keyboardWillHideListener.remove();
+        };
+    }, []);
+
+    const {paddingBottom} = useStyledSafeAreaInsets();
+
+    const extraPaddingBottomStyle = useMemo(() => {
+        if (willKeyboardShow || paddingBottom) {
+            return {};
+        }
+        return styles.pb5;
+    }, [willKeyboardShow, paddingBottom]);
+    return extraPaddingBottomStyle;
+};
+
+export default useExtraSafePaddingBottomStyle;

From 1a12356abc4edd2bb4187c7ddf2c8cfc88f24b58 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 4 Jul 2024 17:40:15 +0700
Subject: [PATCH 06/13] Fix: extraPaddingBottomStyle logic

---
 src/components/Form/FormWrapper.tsx         | 26 ++++-----------------
 src/hooks/useExtraSafePaddingBottomStyle.ts |  3 ++-
 2 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index d57102edb6af..3b899c6805b9 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -11,6 +11,7 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import type {SafeAreaChildrenProps} from '@components/SafeAreaConsumer/types';
 import ScrollView from '@components/ScrollView';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
+import useExtraSafePaddingBottomStyle from '@hooks/useExtraSafePaddingBottomStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import type {Form} from '@src/types/form';
@@ -65,20 +66,7 @@ function FormWrapper({
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
     const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]);
-    const [willKeyboardShow, setWillKeyboardShow] = useState(false);
-    useEffect(() => {
-        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', () => {
-            setWillKeyboardShow(true);
-        });
-        const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
-            setWillKeyboardShow(false);
-        });
-
-        return () => {
-            keyboardWillShowListener.remove();
-            keyboardWillHideListener.remove();
-        };
-    }, []);
+    const extraSafePaddingBottomStyle = useExtraSafePaddingBottomStyle();
 
     const onFixTheErrorsLinkPressed = useCallback(() => {
         const errorFields = !isEmptyObject(errors) ? errors : formState?.errorFields ?? {};
@@ -128,13 +116,7 @@ function FormWrapper({
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
-                        containerStyles={[
-                            styles.mh0,
-                            styles.mt5,
-                            submitFlexEnabled ? styles.flex1 : {},
-                            submitButtonStyles,
-                            safeAreaPaddingBottomStyle.paddingBottom && !willKeyboardShow ? styles.pb5 : {},
-                        ]}
+                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles, extraSafePaddingBottomStyle]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter={disablePressOnEnter}
@@ -166,7 +148,7 @@ function FormWrapper({
             enabledWhenOffline,
             isSubmitActionDangerous,
             disablePressOnEnter,
-            willKeyboardShow,
+            extraSafePaddingBottomStyle,
         ],
     );
 
diff --git a/src/hooks/useExtraSafePaddingBottomStyle.ts b/src/hooks/useExtraSafePaddingBottomStyle.ts
index 683475616bdb..5fdb4d36c848 100644
--- a/src/hooks/useExtraSafePaddingBottomStyle.ts
+++ b/src/hooks/useExtraSafePaddingBottomStyle.ts
@@ -22,7 +22,8 @@ const useExtraSafePaddingBottomStyle = () => {
     const {paddingBottom} = useStyledSafeAreaInsets();
 
     const extraPaddingBottomStyle = useMemo(() => {
-        if (willKeyboardShow || paddingBottom) {
+        // Do not add extra padding at the bottom if the keyboard is open or if there is no safe area bottom padding style.
+        if (willKeyboardShow || !paddingBottom) {
             return {};
         }
         return styles.pb5;

From abeea9685405e55b4cd861364e35f0190e9f4884 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 4 Jul 2024 18:00:59 +0700
Subject: [PATCH 07/13] Fix: Move extra padding bottom to
 FormAlertWithSubmitButton

---
 src/components/Form/FormWrapper.tsx          | 4 ++--
 src/components/FormAlertWithSubmitButton.tsx | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 3b899c6805b9..348d0c848481 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 import type {RefObject} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {ScrollView as RNScrollView, StyleProp, View, ViewStyle} from 'react-native';
@@ -116,7 +116,7 @@ function FormWrapper({
                         onSubmit={onSubmit}
                         footerContent={footerContent}
                         onFixTheErrorsLinkPressed={onFixTheErrorsLinkPressed}
-                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles, extraSafePaddingBottomStyle]}
+                        containerStyles={[styles.mh0, styles.mt5, submitFlexEnabled ? styles.flex1 : {}, submitButtonStyles]}
                         enabledWhenOffline={enabledWhenOffline}
                         isSubmitActionDangerous={isSubmitActionDangerous}
                         disablePressOnEnter={disablePressOnEnter}
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index cd177a1d77a3..ef5d593faf9b 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useExtraSafePaddingBottomStyle from '@hooks/useExtraSafePaddingBottomStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
 import FormAlertWrapper from './FormAlertWrapper';
@@ -79,10 +80,11 @@ function FormAlertWithSubmitButton({
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
     const style = [!footerContent ? {} : styles.mb3, buttonStyles];
+    const extraSafePaddingBottomStyle = useExtraSafePaddingBottomStyle();
 
     return (
         <FormAlertWrapper
-            containerStyles={[styles.justifyContentEnd, containerStyles]}
+            containerStyles={[styles.justifyContentEnd, extraSafePaddingBottomStyle, containerStyles]}
             isAlertVisible={isAlertVisible}
             isMessageHtml={isMessageHtml}
             message={message}

From 1a62cc318305436ffec92f88dbbea3667183215f Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 4 Jul 2024 18:02:12 +0700
Subject: [PATCH 08/13] Fix: Remove unsed changes

---
 src/components/Form/FormWrapper.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx
index 348d0c848481..5c74fd466a15 100644
--- a/src/components/Form/FormWrapper.tsx
+++ b/src/components/Form/FormWrapper.tsx
@@ -11,7 +11,6 @@ import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import type {SafeAreaChildrenProps} from '@components/SafeAreaConsumer/types';
 import ScrollView from '@components/ScrollView';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
-import useExtraSafePaddingBottomStyle from '@hooks/useExtraSafePaddingBottomStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import type {Form} from '@src/types/form';
@@ -66,7 +65,6 @@ function FormWrapper({
     const formRef = useRef<RNScrollView>(null);
     const formContentRef = useRef<View>(null);
     const errorMessage = useMemo(() => (formState ? ErrorUtils.getLatestErrorMessage(formState) : undefined), [formState]);
-    const extraSafePaddingBottomStyle = useExtraSafePaddingBottomStyle();
 
     const onFixTheErrorsLinkPressed = useCallback(() => {
         const errorFields = !isEmptyObject(errors) ? errors : formState?.errorFields ?? {};
@@ -148,7 +146,6 @@ function FormWrapper({
             enabledWhenOffline,
             isSubmitActionDangerous,
             disablePressOnEnter,
-            extraSafePaddingBottomStyle,
         ],
     );
 

From d38e7cb26298996bb1d0e862c794dbc9d1a75f52 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 4 Jul 2024 18:17:33 +0700
Subject: [PATCH 09/13] Fix: Lint

---
 src/hooks/useExtraSafePaddingBottomStyle.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useExtraSafePaddingBottomStyle.ts b/src/hooks/useExtraSafePaddingBottomStyle.ts
index 5fdb4d36c848..2b4ef54ab6ba 100644
--- a/src/hooks/useExtraSafePaddingBottomStyle.ts
+++ b/src/hooks/useExtraSafePaddingBottomStyle.ts
@@ -27,7 +27,7 @@ const useExtraSafePaddingBottomStyle = () => {
             return {};
         }
         return styles.pb5;
-    }, [willKeyboardShow, paddingBottom]);
+    }, [willKeyboardShow, paddingBottom, styles.pb5]);
     return extraPaddingBottomStyle;
 };
 

From b4d5e09310b9f0c0087b18ad919ecea2caa306b4 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 11 Jul 2024 04:25:08 +0700
Subject: [PATCH 10/13] Feat: Add typeto state

---
 src/hooks/useExtraSafePaddingBottomStyle.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useExtraSafePaddingBottomStyle.ts b/src/hooks/useExtraSafePaddingBottomStyle.ts
index 2b4ef54ab6ba..f1b192ccd5bb 100644
--- a/src/hooks/useExtraSafePaddingBottomStyle.ts
+++ b/src/hooks/useExtraSafePaddingBottomStyle.ts
@@ -5,7 +5,7 @@ import useThemeStyles from './useThemeStyles';
 
 const useExtraSafePaddingBottomStyle = () => {
     const styles = useThemeStyles();
-    const [willKeyboardShow, setWillKeyboardShow] = useState(false);
+    const [willKeyboardShow, setWillKeyboardShow] = useState<boolean>(false);
     useEffect(() => {
         const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', () => {
             setWillKeyboardShow(true);

From bd01400225f0fb5ea781a31ea39ab9407b56b09b Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 24 Jul 2024 22:03:18 +0700
Subject: [PATCH 11/13] Feat: Rename useExtraSafePaddingBottomStyle to
 useSafePaddingBottomStyle

---
 src/components/FormAlertWithSubmitButton.tsx                  | 4 ++--
 ...SafePaddingBottomStyle.ts => useSafePaddingBottomStyle.ts} | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/hooks/{useExtraSafePaddingBottomStyle.ts => useSafePaddingBottomStyle.ts} (92%)

diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index ef5d593faf9b..a71249053305 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import useExtraSafePaddingBottomStyle from '@hooks/useExtraSafePaddingBottomStyle';
+import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Button from './Button';
 import FormAlertWrapper from './FormAlertWrapper';
@@ -80,7 +80,7 @@ function FormAlertWithSubmitButton({
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
     const style = [!footerContent ? {} : styles.mb3, buttonStyles];
-    const extraSafePaddingBottomStyle = useExtraSafePaddingBottomStyle();
+    const extraSafePaddingBottomStyle = useSafePaddingBottomStyle();
 
     return (
         <FormAlertWrapper
diff --git a/src/hooks/useExtraSafePaddingBottomStyle.ts b/src/hooks/useSafePaddingBottomStyle.ts
similarity index 92%
rename from src/hooks/useExtraSafePaddingBottomStyle.ts
rename to src/hooks/useSafePaddingBottomStyle.ts
index f1b192ccd5bb..9381990deb26 100644
--- a/src/hooks/useExtraSafePaddingBottomStyle.ts
+++ b/src/hooks/useSafePaddingBottomStyle.ts
@@ -3,7 +3,7 @@ import {Keyboard} from 'react-native';
 import useStyledSafeAreaInsets from './useStyledSafeAreaInsets';
 import useThemeStyles from './useThemeStyles';
 
-const useExtraSafePaddingBottomStyle = () => {
+const useSafePaddingBottomStyle = () => {
     const styles = useThemeStyles();
     const [willKeyboardShow, setWillKeyboardShow] = useState<boolean>(false);
     useEffect(() => {
@@ -31,4 +31,4 @@ const useExtraSafePaddingBottomStyle = () => {
     return extraPaddingBottomStyle;
 };
 
-export default useExtraSafePaddingBottomStyle;
+export default useSafePaddingBottomStyle;

From 0f0622118c35d5de1341dbe75241efa34583afb2 Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Wed, 24 Jul 2024 22:37:32 +0700
Subject: [PATCH 12/13] Feat: Add comment to hooks and rename variable

---
 src/components/FormAlertWithSubmitButton.tsx | 4 ++--
 src/hooks/useSafePaddingBottomStyle.ts       | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index a71249053305..e9b7b27f1475 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -80,11 +80,11 @@ function FormAlertWithSubmitButton({
 }: FormAlertWithSubmitButtonProps) {
     const styles = useThemeStyles();
     const style = [!footerContent ? {} : styles.mb3, buttonStyles];
-    const extraSafePaddingBottomStyle = useSafePaddingBottomStyle();
+    const safePaddingBottomStyle = useSafePaddingBottomStyle();
 
     return (
         <FormAlertWrapper
-            containerStyles={[styles.justifyContentEnd, extraSafePaddingBottomStyle, containerStyles]}
+            containerStyles={[styles.justifyContentEnd, safePaddingBottomStyle, containerStyles]}
             isAlertVisible={isAlertVisible}
             isMessageHtml={isMessageHtml}
             message={message}
diff --git a/src/hooks/useSafePaddingBottomStyle.ts b/src/hooks/useSafePaddingBottomStyle.ts
index 9381990deb26..8c822bf4879c 100644
--- a/src/hooks/useSafePaddingBottomStyle.ts
+++ b/src/hooks/useSafePaddingBottomStyle.ts
@@ -3,6 +3,9 @@ import {Keyboard} from 'react-native';
 import useStyledSafeAreaInsets from './useStyledSafeAreaInsets';
 import useThemeStyles from './useThemeStyles';
 
+// Refer to https://github.com/Expensify/App/issues/44056, the default padding bottom of any device is not enough.
+// Devices with 0 padding bottom value, this hook returns { paddingBottom: 0 }.
+// Otherwise, it returns { paddingBottom: 20 }.
 const useSafePaddingBottomStyle = () => {
     const styles = useThemeStyles();
     const [willKeyboardShow, setWillKeyboardShow] = useState<boolean>(false);

From b2844e01e1be02dd7170bd9fbf2f67632b78704b Mon Sep 17 00:00:00 2001
From: truph01 <truphd01@gmail.com>
Date: Thu, 25 Jul 2024 22:50:05 +0700
Subject: [PATCH 13/13] Update comment src/hooks/useSafePaddingBottomStyle.ts

Co-authored-by: Puneet Lath <puneet@expensify.com>
---
 src/hooks/useSafePaddingBottomStyle.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useSafePaddingBottomStyle.ts b/src/hooks/useSafePaddingBottomStyle.ts
index 8c822bf4879c..b02b36d0f050 100644
--- a/src/hooks/useSafePaddingBottomStyle.ts
+++ b/src/hooks/useSafePaddingBottomStyle.ts
@@ -3,9 +3,9 @@ import {Keyboard} from 'react-native';
 import useStyledSafeAreaInsets from './useStyledSafeAreaInsets';
 import useThemeStyles from './useThemeStyles';
 
-// Refer to https://github.com/Expensify/App/issues/44056, the default padding bottom of any device is not enough.
-// Devices with 0 padding bottom value, this hook returns { paddingBottom: 0 }.
-// Otherwise, it returns { paddingBottom: 20 }.
+// This hook is useful for adding extra bottom padding to a component based on the device's safe area
+// If the device's safe area padding bottom is 0, the hook returns 0. Otherwise, it provides a padding bottom of 20.
+// Use this to ensure content visibility and layout consistency across different devices.
 const useSafePaddingBottomStyle = () => {
     const styles = useThemeStyles();
     const [willKeyboardShow, setWillKeyboardShow] = useState<boolean>(false);