Merge pull request #49398 from MuaazArshad/errorSpacing

src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -14,12 +14,9 @@ import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle';
-import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as NumberUtils from '@libs/NumberUtils';
 import StatusBar from '@libs/StatusBar';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
 import Navigation from '@navigation/Navigation';
@@ -44,18 +41,10 @@ function ExitSurveyResponsePage({route, navigation}: ExitSurveyResponsePageProps
     const {keyboardHeight} = useKeyboardState();
     const {windowHeight} = useWindowDimensions();
     const {inputCallbackRef, inputRef} = useAutoFocusInput();
-    const [headerTitleHeight, setHeaderTitleHeight] = useState(0);
 
     // Device safe area top and bottom insets.
     // When the keyboard is shown, the bottom inset doesn't affect the height, so we take it out from the calculation.
-    const {top: safeAreaInsetsTop, bottom: safeAreaInsetsBottom} = useSafeAreaInsets();
-    const safeAreaInsetsBottomValue = !keyboardHeight ? safeAreaInsetsBottom : 0;
-    // FormWrapper bottom padding
-    const {paddingBottom: formPaddingBottom} = useStyledSafeAreaInsets();
-    const formPaddingBottomValue = formPaddingBottom || styles.pb5.paddingBottom;
-    // Extra bottom padding in FormAlertWithSubmitButton
-    const safePaddingBottomStyle = useSafePaddingBottomStyle();
-    const safePaddingBottomStyleValue = 'paddingBottom' in safePaddingBottomStyle ? (safePaddingBottomStyle.paddingBottom as number) : 0;
+    const {top: safeAreaInsetsTop} = useSafeAreaInsets();
 
     const {reason, backTo} = route.params;
     const {isOffline} = useNetwork({
@@ -93,27 +82,6 @@ function ExitSurveyResponsePage({route, navigation}: ExitSurveyResponsePageProps
             // Minus the top margins on the form
             formTopMarginsStyle.marginTop,
     );
-    const responseInputMaxHeight = NumberUtils.roundDownToLargestMultiple(
-        formMaxHeight -
-            safeAreaInsetsBottomValue -
-            safePaddingBottomStyleValue -
-            formPaddingBottomValue -
-            // Minus the height of the text component
-            headerTitleHeight -
-            // Minus the response input margins (multiplied by 2 to create the effect of margins on top and bottom).
-            // marginBottom does not work in this case because the TextInput is in a ScrollView and will push the button beneath it out of view,
-            // so it's maxHeight is what dictates space between it and the button.
-            baseResponseInputContainerStyle.marginTop * 2 -
-            // Minus the approximate size of a default button
-            variables.componentSizeLarge -
-            // Minus the height above the button for the form error text, accounting for 2 lines max.
-            variables.lineHeightNormal * 2 -
-            // Minus the margin between the button and the form error text
-            styles.mb3.marginBottom,
-
-        // Round down to the largest number of full lines
-        styles.baseTextInput.lineHeight,
-    );
 
     return (
         <ScreenWrapper
@@ -142,20 +110,15 @@ function ExitSurveyResponsePage({route, navigation}: ExitSurveyResponsePageProps
                 {isOffline && <ExitSurveyOffline />}
                 {!isOffline && (
                     <>
-                        <Text
-                            style={textStyle}
-                            onLayout={(e) => setHeaderTitleHeight(e.nativeEvent.layout.height)}
-                        >
-                            {translate(`exitSurvey.prompts.${reason}`)}
-                        </Text>
+                        <Text style={textStyle}>{translate(`exitSurvey.prompts.${reason}`)}</Text>
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.RESPONSE}
                             label={translate(`exitSurvey.responsePlaceholder`)}
                             accessibilityLabel={translate(`exitSurvey.responsePlaceholder`)}
                             role={CONST.ROLE.PRESENTATION}
                             autoGrowHeight
-                            maxAutoGrowHeight={responseInputMaxHeight}
+                            maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
                             maxLength={CONST.MAX_COMMENT_LENGTH}
                             ref={(el: AnimatedTextInputRef) => {
                                 if (!el) {