From 6aeba43264696995b874ac162c4bef838d76a298 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 24 Aug 2024 15:18:58 +0800 Subject: [PATCH 1/4] add more precise calculation to the max height --- .../ExitSurvey/ExitSurveyResponsePage.tsx | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx index 83f5d90b85af..36052bffbb41 100644 --- a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx +++ b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx @@ -1,5 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; +import {StatusBar} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -14,6 +15,7 @@ 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 useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -43,8 +45,11 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe const StyleUtils = useStyleUtils(); const {keyboardHeight} = useKeyboardState(); const {windowHeight} = useWindowDimensions(); - const {top: safeAreaInsetsTop} = useSafeAreaInsets(); + const {top: safeAreaInsetsTop, bottom: safeAreaInsetsBottom} = useSafeAreaInsets(); + const safePaddingBottomStyle = useSafePaddingBottomStyle(); + const safePaddingBottomStyleValue = 'paddingBottom' in safePaddingBottomStyle ? (safePaddingBottomStyle.paddingBottom as number) : 0; const {inputCallbackRef, inputRef} = useAutoFocusInput(); + const [headerTitleHeight, setHeaderTitleHeight] = useState(0); const {reason, backTo} = route.params; const {isOffline} = useNetwork({ @@ -71,7 +76,10 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe const textStyle = styles.headerAnonymousFooter; const baseResponseInputContainerStyle = styles.mt7; const formMaxHeight = Math.floor( - windowHeight - + // windowHeight doesn't include status bar height in Android, so we need to add it here. + // StatusBar.currentHeight is only available on Android. + windowHeight + + (StatusBar.currentHeight ?? 0) - keyboardHeight - safeAreaInsetsTop - // Minus the height of HeaderWithBackButton @@ -81,8 +89,10 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe ); const responseInputMaxHeight = NumberUtils.roundDownToLargestMultiple( formMaxHeight - + safeAreaInsetsBottom - + safePaddingBottomStyleValue - // Minus the height of the text component - textStyle.lineHeight - + 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. @@ -90,7 +100,9 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe // Minus the approximate size of a default button variables.componentSizeLarge - // Minus the vertical margins around the form button - 40, + 40 - + // Minus the extra height for the form error text + 20, // Round down to the largest number of full lines styles.baseTextInput.lineHeight, @@ -120,7 +132,12 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe {isOffline && } {!isOffline && ( <> - {translate(`exitSurvey.prompts.${reason}`)} + setHeaderTitleHeight(e.nativeEvent.layout.height)} + > + {translate(`exitSurvey.prompts.${reason}`)} + Date: Sat, 24 Aug 2024 17:07:52 +0800 Subject: [PATCH 2/4] lint --- src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx index 36052bffbb41..a9126c32ddd9 100644 --- a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx +++ b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx @@ -1,6 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useState} from 'react'; -import {StatusBar} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -20,6 +19,7 @@ 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'; import type {SettingsNavigatorParamList} from '@navigation/types'; From 3ca16d1558cbbd63e11bce4060e894f3ada6874e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 28 Aug 2024 12:23:12 +0800 Subject: [PATCH 3/4] use line height value --- src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx index a9126c32ddd9..3c97d811a397 100644 --- a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx +++ b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx @@ -102,7 +102,7 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe // Minus the vertical margins around the form button 40 - // Minus the extra height for the form error text - 20, + variables.lineHeightNormal, // Round down to the largest number of full lines styles.baseTextInput.lineHeight, From 1ed045afbb3066102b7a708b2e3f74dd0652e33c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 31 Aug 2024 11:58:30 +0800 Subject: [PATCH 4/4] correcting more spacing calculation --- .../ExitSurvey/ExitSurveyResponsePage.tsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx index 3c97d811a397..c14c20ffc992 100644 --- a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx +++ b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx @@ -15,6 +15,7 @@ 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'; @@ -45,11 +46,19 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe const StyleUtils = useStyleUtils(); 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 {inputCallbackRef, inputRef} = useAutoFocusInput(); - const [headerTitleHeight, setHeaderTitleHeight] = useState(0); const {reason, backTo} = route.params; const {isOffline} = useNetwork({ @@ -89,8 +98,9 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe ); const responseInputMaxHeight = NumberUtils.roundDownToLargestMultiple( formMaxHeight - - safeAreaInsetsBottom - + 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). @@ -99,10 +109,10 @@ function ExitSurveyResponsePage({draftResponse, route, navigation}: ExitSurveyRe baseResponseInputContainerStyle.marginTop * 2 - // Minus the approximate size of a default button variables.componentSizeLarge - - // Minus the vertical margins around the form button - 40 - - // Minus the extra height for the form error text - variables.lineHeightNormal, + // 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,