Fix: Add more space to bottom docked button

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}

src/hooks/useExtraSafePaddingBottomStyle.ts

@@ -0,0 +1,34 @@
+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(() => {
+        // 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;
+    }, [willKeyboardShow, paddingBottom, styles.pb5]);
+    return extraPaddingBottomStyle;
+};
+
+export default useExtraSafePaddingBottomStyle;

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]}