From dbcaad9792a42a4f8882e53122390f685dcd2e37 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 17:23:19 +0100 Subject: [PATCH 01/29] fix: adjust ios and android safe area insets padding style --- src/styles/utils/index.ts | 19 +++++++++++++++++-- src/styles/variables.ts | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index cd3bf67e1c13..a77db0d06b12 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -327,7 +327,22 @@ type SafeAreaPadding = { /** * Takes safe area insets and returns padding to use for a View */ -function getSafeAreaPadding(insets?: EdgeInsets, insetsPercentage: number = getPlatform() === CONST.PLATFORM.IOS ? variables.safeInsertPercentage : 1): SafeAreaPadding { +function getSafeAreaPadding(insets?: EdgeInsets, insetsPercentageProp?: number): SafeAreaPadding { + const platform = getPlatform(); + let insetsPercentage = insetsPercentageProp; + if (insetsPercentage == null) { + switch (platform) { + case CONST.PLATFORM.IOS: + insetsPercentage = variables.iosSafeAreaInsetsPercentage; + break; + case CONST.PLATFORM.ANDROID: + insetsPercentage = variables.androidSafeAreaInsetsPercentage; + break; + default: + insetsPercentage = 1; + } + } + return { paddingTop: insets?.top ?? 0, paddingBottom: (insets?.bottom ?? 0) * insetsPercentage, @@ -340,7 +355,7 @@ function getSafeAreaPadding(insets?: EdgeInsets, insetsPercentage: number = getP * Takes safe area insets and returns margin to use for a View */ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle { - return {marginBottom: (insets?.bottom ?? 0) * variables.safeInsertPercentage}; + return {marginBottom: (insets?.bottom ?? 0) * variables.iosSafeAreaInsetsPercentage}; } function getZoomSizingStyle( diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 737060a9d7ad..eb0202718d09 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -92,7 +92,8 @@ export default { extraSmallMobileResponsiveHeightBreakpoint: 667, mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, - safeInsertPercentage: 0.7, + iosSafeAreaInsetsPercentage: 0.7, + androidSafeAreaInsetsPercentage: 1.3, sideBarWidth: 375, pdfPageMaxWidth: 992, tooltipzIndex: 10050, From b011c915c213118fcf312199dab5053550d10754 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 18:19:14 +0100 Subject: [PATCH 02/29] fix: extract Android specific safe area logic and simplify safe area components/hooks --- .../SafeAreaConsumer/index.android.tsx | 43 ------------------- src/components/SafeAreaConsumer/index.tsx | 8 ++-- .../index.ts => useSafeAreaInsets.ts} | 0 src/hooks/useSafeAreaInsets/index.android.ts | 15 ------- src/hooks/useStyledSafeAreaInsets.ts | 3 +- .../utils/getSafeAreaInsets/defaultInsets.ts | 3 ++ .../utils/getSafeAreaInsets/index.android.ts | 18 ++++++++ src/styles/utils/getSafeAreaInsets/index.ts | 13 ++++++ src/styles/utils/index.ts | 2 + src/styles/variables.ts | 2 +- 10 files changed, 43 insertions(+), 64 deletions(-) delete mode 100644 src/components/SafeAreaConsumer/index.android.tsx rename src/hooks/{useSafeAreaInsets/index.ts => useSafeAreaInsets.ts} (100%) delete mode 100644 src/hooks/useSafeAreaInsets/index.android.ts create mode 100644 src/styles/utils/getSafeAreaInsets/defaultInsets.ts create mode 100644 src/styles/utils/getSafeAreaInsets/index.android.ts create mode 100644 src/styles/utils/getSafeAreaInsets/index.ts diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx deleted file mode 100644 index 7cecfb5d5107..000000000000 --- a/src/components/SafeAreaConsumer/index.android.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -// eslint-disable-next-line no-restricted-imports -import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; -import useStyleUtils from '@hooks/useStyleUtils'; -import StatusBar from '@libs/StatusBar'; -import type SafeAreaConsumerProps from './types'; - -const defaultInsets = {top: 0, bottom: 0, left: 0, right: 0}; - -/** - * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we - * may need not just the insets, but the computed styles so we save a few lines of code with this. - */ -function SafeAreaConsumer({children}: SafeAreaConsumerProps) { - const StyleUtils = useStyleUtils(); - - return ( - - {(insets) => { - const safeInsets = insets ?? defaultInsets; - - const androidInsets = { - ...safeInsets, - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - top: StatusBar.currentHeight || safeInsets.top, - }; - - const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(androidInsets); - - return children({ - paddingTop, - paddingBottom, - insets: androidInsets, - safeAreaPaddingBottomStyle: {paddingBottom}, - }); - }} - - ); -} - -SafeAreaConsumer.displayName = 'SafeAreaConsumer'; - -export default SafeAreaConsumer; diff --git a/src/components/SafeAreaConsumer/index.tsx b/src/components/SafeAreaConsumer/index.tsx index 926ff91258f9..88770e1f0639 100644 --- a/src/components/SafeAreaConsumer/index.tsx +++ b/src/components/SafeAreaConsumer/index.tsx @@ -13,12 +13,14 @@ function SafeAreaConsumer({children}: SafeAreaConsumerProps) { return ( - {(insets) => { - const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined); + {(safeAreaInsets) => { + const insets = StyleUtils.getSafeAreaInsets(safeAreaInsets); + const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets); + return children({ paddingTop, paddingBottom, - insets: insets ?? undefined, + insets, safeAreaPaddingBottomStyle: {paddingBottom}, }); }} diff --git a/src/hooks/useSafeAreaInsets/index.ts b/src/hooks/useSafeAreaInsets.ts similarity index 100% rename from src/hooks/useSafeAreaInsets/index.ts rename to src/hooks/useSafeAreaInsets.ts diff --git a/src/hooks/useSafeAreaInsets/index.android.ts b/src/hooks/useSafeAreaInsets/index.android.ts deleted file mode 100644 index 66500dd37887..000000000000 --- a/src/hooks/useSafeAreaInsets/index.android.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {EdgeInsets} from 'react-native-safe-area-context'; -// eslint-disable-next-line no-restricted-imports -import {useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context'; -import StatusBar from '@libs/StatusBar'; - -function useSafeAreaInsets(): EdgeInsets { - const insets = useSafeAreaInsetsInternal(); - - return { - ...insets, - top: StatusBar.currentHeight ?? insets.top, - }; -} - -export default useSafeAreaInsets; diff --git a/src/hooks/useStyledSafeAreaInsets.ts b/src/hooks/useStyledSafeAreaInsets.ts index bfd9c32a46ae..98813b1bf450 100644 --- a/src/hooks/useStyledSafeAreaInsets.ts +++ b/src/hooks/useStyledSafeAreaInsets.ts @@ -1,5 +1,4 @@ -// eslint-disable-next-line no-restricted-imports -import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import useSafeAreaInsets from './useSafeAreaInsets'; import useStyleUtils from './useStyleUtils'; /** diff --git a/src/styles/utils/getSafeAreaInsets/defaultInsets.ts b/src/styles/utils/getSafeAreaInsets/defaultInsets.ts new file mode 100644 index 000000000000..c3c2f463e44d --- /dev/null +++ b/src/styles/utils/getSafeAreaInsets/defaultInsets.ts @@ -0,0 +1,3 @@ +const defaultInsets = {top: 0, bottom: 0, left: 0, right: 0}; + +export default defaultInsets; diff --git a/src/styles/utils/getSafeAreaInsets/index.android.ts b/src/styles/utils/getSafeAreaInsets/index.android.ts new file mode 100644 index 000000000000..c77ef32f7370 --- /dev/null +++ b/src/styles/utils/getSafeAreaInsets/index.android.ts @@ -0,0 +1,18 @@ +import type {EdgeInsets} from 'react-native-safe-area-context'; +import StatusBar from '@libs/StatusBar'; +import defaultInsets from './defaultInsets'; + +/** + * On Android we want to use the StatusBar height rather than the top safe area inset. + * @returns + */ +function getSafeAreaInsets(safeAreaInsets: EdgeInsets | null): EdgeInsets { + const insets = safeAreaInsets ?? defaultInsets; + + return { + ...insets, + top: StatusBar.currentHeight ?? insets.top, + }; +} + +export default getSafeAreaInsets; diff --git a/src/styles/utils/getSafeAreaInsets/index.ts b/src/styles/utils/getSafeAreaInsets/index.ts new file mode 100644 index 000000000000..8f121f80e2e8 --- /dev/null +++ b/src/styles/utils/getSafeAreaInsets/index.ts @@ -0,0 +1,13 @@ +import type {EdgeInsets} from 'react-native-safe-area-context'; +import defaultInsets from './defaultInsets'; + +/** + * Noop on web and iOS. This utility function is only needed on Android. + * @returns + */ +function getSafeAreaInsets(safeAreaInsets: EdgeInsets | null): EdgeInsets { + const insets = safeAreaInsets ?? defaultInsets; + return insets; +} + +export default getSafeAreaInsets; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index a77db0d06b12..88c20abf62cf 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -25,6 +25,7 @@ import createTooltipStyleUtils from './generators/TooltipStyleUtils'; import getContextMenuItemStyles from './getContextMenuItemStyles'; import getHighResolutionInfoWrapperStyle from './getHighResolutionInfoWrapperStyle'; import getNavigationModalCardStyle from './getNavigationModalCardStyles'; +import getSafeAreaInsets from './getSafeAreaInsets'; import getSignInBgStyles from './getSignInBgStyles'; import {compactContentContainerStyles} from './optionRowStyles'; import positioning from './positioning'; @@ -1205,6 +1206,7 @@ const staticStyleUtils = { getModalPaddingStyles, getOuterModalStyle, getPaymentMethodMenuWidth, + getSafeAreaInsets, getSafeAreaMargins, getSafeAreaPadding, getSignInWordmarkWidthStyle, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index eb0202718d09..52351edafde6 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -93,7 +93,7 @@ export default { mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, iosSafeAreaInsetsPercentage: 0.7, - androidSafeAreaInsetsPercentage: 1.3, + androidSafeAreaInsetsPercentage: 1.2, sideBarWidth: 375, pdfPageMaxWidth: 992, tooltipzIndex: 10050, From edcdfbeb874060e9d0043943dda1b272d9115b26 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 18:24:28 +0100 Subject: [PATCH 03/29] fix: bottom inset spacing on IOURequestStepConfirmation screen --- src/components/FixedFooter.tsx | 4 +--- src/pages/iou/request/step/IOURequestStepConfirmation.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx index c9d60f3ced46..24eb039012d8 100644 --- a/src/components/FixedFooter.tsx +++ b/src/components/FixedFooter.tsx @@ -21,9 +21,7 @@ function FixedFooter({style, children}: FixedFooterProps) { return null; } - const shouldAddBottomPadding = !insets.bottom; - - return {children}; + return {children}; } FixedFooter.displayName = 'FixedFooter'; diff --git a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx index 7246e0bdb2b5..57e02bb1eb30 100644 --- a/src/pages/iou/request/step/IOURequestStepConfirmation.tsx +++ b/src/pages/iou/request/step/IOURequestStepConfirmation.tsx @@ -606,7 +606,7 @@ function IOURequestStepConfirmation({ shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()} testID={IOURequestStepConfirmation.displayName} > - + Date: Wed, 27 Nov 2024 18:24:39 +0100 Subject: [PATCH 04/29] fix: make IOU submit button spacing consistent --- src/pages/iou/request/step/IOURequestStepDistance.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepDistance.tsx b/src/pages/iou/request/step/IOURequestStepDistance.tsx index ae3ecff9adb2..efe5d293036b 100644 --- a/src/pages/iou/request/step/IOURequestStepDistance.tsx +++ b/src/pages/iou/request/step/IOURequestStepDistance.tsx @@ -543,7 +543,7 @@ function IOURequestStepDistance({ allowBubble pressOnEnter large - style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]} + style={[styles.w100, styles.mb5, styles.ph4, styles.flexShrink0]} onPress={submitWaypoints} text={buttonText} isLoading={!isOffline && (isLoadingRoute || shouldFetchRoute || isLoading)} From d9ae8066d930b33ce5f1b905478df87db3b015db Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 18:24:58 +0100 Subject: [PATCH 05/29] fix: MoneyRequestConfirmationList bottom padding --- src/components/MoneyRequestConfirmationList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index b87c51cc6b64..e4867bfa3982 100755 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -941,6 +941,7 @@ function MoneyRequestConfirmationList({ containerStyle={[styles.flexBasisAuto]} removeClippedSubviews={false} disableKeyboardShortcuts + includeSafeAreaPaddingBottom={false} /> ); From d5f53d10184b3be7ed2a026d6779681d56556524 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 19:36:54 +0100 Subject: [PATCH 06/29] fix: useSafeAreaInsets hook --- src/hooks/useSafeAreaInsets.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/hooks/useSafeAreaInsets.ts b/src/hooks/useSafeAreaInsets.ts index 6cc2f1818fe5..f88c50b448cb 100644 --- a/src/hooks/useSafeAreaInsets.ts +++ b/src/hooks/useSafeAreaInsets.ts @@ -1,4 +1,13 @@ -/* eslint-disable no-restricted-imports */ -import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import type {EdgeInsets} from 'react-native-safe-area-context'; +// eslint-disable-next-line no-restricted-imports +import {useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context'; +import useStyleUtils from './useStyleUtils'; + +function useSafeAreaInsets(): EdgeInsets { + const StyleUtils = useStyleUtils(); + const insets = useSafeAreaInsetsInternal(); + const adjustedInsets = StyleUtils.getSafeAreaInsets(insets); + return adjustedInsets; +} export default useSafeAreaInsets; From c52550f69f86cf3ce5741dd1b8894c8801d33a7b Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 19:40:40 +0100 Subject: [PATCH 07/29] fix: bottom insets/padding in "New chat" --- src/components/Form/FormWrapper.tsx | 3 +-- src/components/FormAlertWithSubmitButton.tsx | 4 +--- src/pages/NewChatPage.tsx | 4 +++- .../BaseOnboardingPersonalDetails.tsx | 2 +- src/pages/workspace/WorkspaceNewRoomPage.tsx | 3 ++- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index d26276d0418b..8cd3902182d2 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/src/components/Form/FormWrapper.tsx @@ -103,7 +103,7 @@ function FormWrapper({ {children} {isSubmitButtonVisible && ( @@ -128,7 +128,6 @@ function FormWrapper({ [ formID, style, - styles.pb5, styles.mh0, styles.mt5, styles.flex1, diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx index 205bea93f84a..fabb5e54cb60 100644 --- a/src/components/FormAlertWithSubmitButton.tsx +++ b/src/components/FormAlertWithSubmitButton.tsx @@ -2,7 +2,6 @@ import type {Ref} from 'react'; import React from 'react'; import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; -import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle'; import useThemeStyles from '@hooks/useThemeStyles'; import getPlatform from '@libs/getPlatform'; import CONST from '@src/CONST'; @@ -87,7 +86,6 @@ function FormAlertWithSubmitButton({ }: FormAlertWithSubmitButtonProps) { const styles = useThemeStyles(); const style = [!footerContent ? {} : styles.mb3, buttonStyles]; - const safePaddingBottomStyle = useSafePaddingBottomStyle(); // Disable pressOnEnter for Android Native to avoid issues with the Samsung keyboard, // where pressing Enter saves the form instead of adding a new line in multiline input. @@ -97,7 +95,7 @@ function FormAlertWithSubmitButton({ return ( )} @@ -297,7 +298,7 @@ function NewChatPage() { return ( {isSmallScreenWidth && ( <> diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index 54b485bd54dd..9e91e0b55111 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -114,7 +114,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx index fdf6eed51503..8868a41c9234 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.tsx +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -239,7 +239,7 @@ function WorkspaceNewRoomPage() { return ( Date: Wed, 27 Nov 2024 19:46:20 +0100 Subject: [PATCH 08/29] fix: padding broken in other forms --- src/components/Form/FormWrapper.tsx | 2 +- src/pages/workspace/WorkspaceNewRoomPage.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index 8cd3902182d2..f1b631b0196a 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/src/components/Form/FormWrapper.tsx @@ -103,7 +103,7 @@ function FormWrapper({ {children} {isSubmitButtonVisible && ( diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx index 8868a41c9234..28e6fa05eac0 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.tsx +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -261,7 +261,6 @@ function WorkspaceNewRoomPage() { Date: Wed, 27 Nov 2024 20:07:15 +0100 Subject: [PATCH 09/29] fix: linting --- src/components/Form/FormWrapper.tsx | 1 + .../OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Form/FormWrapper.tsx b/src/components/Form/FormWrapper.tsx index f1b631b0196a..2a64b4c0381f 100644 --- a/src/components/Form/FormWrapper.tsx +++ b/src/components/Form/FormWrapper.tsx @@ -128,6 +128,7 @@ function FormWrapper({ [ formID, style, + styles.mb5, styles.mh0, styles.mt5, styles.flex1, diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index 9e91e0b55111..ed102fa60786 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -13,7 +13,6 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; -import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -41,7 +40,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {inputCallbackRef} = useAutoFocusInput(); const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false); - const {isOffline} = useNetwork(); const {canUseDefaultRooms} = usePermissions(); const {activeWorkspaceID} = useActiveWorkspace(); From 62297e2a77eb9a375ff1e3f0be16319cbbd1e794 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 20:19:31 +0100 Subject: [PATCH 10/29] fix: adjust android insets percentage --- src/styles/variables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 52351edafde6..e2c787881d52 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -93,7 +93,7 @@ export default { mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, iosSafeAreaInsetsPercentage: 0.7, - androidSafeAreaInsetsPercentage: 1.2, + androidSafeAreaInsetsPercentage: 0.8, sideBarWidth: 375, pdfPageMaxWidth: 992, tooltipzIndex: 10050, From ff72555f414abef3e2435a2dc5b98ec5768d1468 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 20:22:42 +0100 Subject: [PATCH 11/29] fix: improve more screens --- src/pages/iou/request/step/IOURequestStepDescription.tsx | 1 + src/pages/iou/request/step/IOURequestStepMerchant.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/request/step/IOURequestStepDescription.tsx b/src/pages/iou/request/step/IOURequestStepDescription.tsx index 758770698d06..7002dd2b3110 100644 --- a/src/pages/iou/request/step/IOURequestStepDescription.tsx +++ b/src/pages/iou/request/step/IOURequestStepDescription.tsx @@ -158,6 +158,7 @@ function IOURequestStepDescription({ shouldShowWrapper testID={IOURequestStepDescription.displayName} shouldShowNotFoundPage={shouldShowNotFoundPage} + includeSafeAreaPaddingBottom={false} > Date: Wed, 27 Nov 2024 20:59:56 +0100 Subject: [PATCH 12/29] refactor: implement better inset and padding handling in ScreenWrapper --- src/components/ScreenWrapper.tsx | 166 +++++++++++++-------------- src/hooks/useStyledSafeAreaInsets.ts | 24 +++- 2 files changed, 96 insertions(+), 94 deletions(-) diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index c74ccf0470d0..dfb1b8af7cba 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -11,6 +11,7 @@ import useInitialDimensions from '@hooks/useInitialWindowDimensions'; import useKeyboardState from '@hooks/useKeyboardState'; import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useTackInputFocus from '@hooks/useTackInputFocus'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -25,7 +26,6 @@ import HeaderGap from './HeaderGap'; import ImportedStateIndicator from './ImportedStateIndicator'; import KeyboardAvoidingView from './KeyboardAvoidingView'; import OfflineIndicator from './OfflineIndicator'; -import SafeAreaConsumer from './SafeAreaConsumer'; import withNavigationFallback from './withNavigationFallback'; type ScreenWrapperChildrenProps = { @@ -105,7 +105,7 @@ type ScreenWrapperProps = { focusTrapSettings?: FocusTrapForScreenProps['focusTrapSettings']; }; -type ScreenWrapperStatusContextType = {didScreenTransitionEnd: boolean}; +type ScreenWrapperStatusContextType = {didScreenTransitionEnd: boolean; isSafeAreaTopPaddingApplied: boolean; isSafeAreaBottomPaddingApplied: boolean}; const ScreenWrapperStatusContext = createContext(undefined); @@ -233,96 +233,86 @@ function ScreenWrapper( // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); + const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets(); + const paddingStyle: StyleProp = {}; + + const isSafeAreaTopPaddingApplied = includePaddingTop; + if (includePaddingTop) { + paddingStyle.paddingTop = paddingTop; + } + + // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. + const isSafeAreaBottomPaddingApplied = includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator); + if (isSafeAreaBottomPaddingApplied) { + paddingStyle.paddingBottom = paddingBottom; + } + const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit()); - const contextValue = useMemo(() => ({didScreenTransitionEnd}), [didScreenTransitionEnd]); + const contextValue = useMemo( + () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied}), + [didScreenTransitionEnd, isSafeAreaBottomPaddingApplied, isSafeAreaTopPaddingApplied], + ); return ( - - {({ - insets = { - top: 0, - bottom: 0, - left: 0, - right: 0, - }, - paddingTop, - paddingBottom, - safeAreaPaddingBottomStyle, - }) => { - const paddingStyle: StyleProp = {}; - - if (includePaddingTop) { - paddingStyle.paddingTop = paddingTop; - } - - // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. - if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) { - paddingStyle.paddingBottom = paddingBottom; - } - - return ( - - + + + + - - - - - {isDevelopment && } - - { - // If props.children is a function, call it to provide the insets to the children. - typeof children === 'function' - ? children({ - insets, - safeAreaPaddingBottomStyle, - didScreenTransitionEnd, - }) - : children - } - {isSmallScreenWidth && shouldShowOfflineIndicator && ( - <> - - {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} - - - )} - {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && ( - <> - - {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} - - - )} - - - - - - - ); - }} - + + {isDevelopment && } + + { + // If props.children is a function, call it to provide the insets to the children. + typeof children === 'function' + ? children({ + insets, + safeAreaPaddingBottomStyle, + didScreenTransitionEnd, + }) + : children + } + {isSmallScreenWidth && shouldShowOfflineIndicator && ( + <> + + {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} + + + )} + {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && ( + <> + + {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} + + + )} + + + + + + ); } diff --git a/src/hooks/useStyledSafeAreaInsets.ts b/src/hooks/useStyledSafeAreaInsets.ts index bfd9c32a46ae..9d8ae4663530 100644 --- a/src/hooks/useStyledSafeAreaInsets.ts +++ b/src/hooks/useStyledSafeAreaInsets.ts @@ -1,5 +1,6 @@ -// eslint-disable-next-line no-restricted-imports +import {useContext} from 'react'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import {ScreenWrapperStatusContext} from '@components/ScreenWrapper'; import useStyleUtils from './useStyleUtils'; /** @@ -24,13 +25,24 @@ import useStyleUtils from './useStyleUtils'; function useStyledSafeAreaInsets() { const StyleUtils = useStyleUtils(); const insets = useSafeAreaInsets(); + const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets); + + const screenWrapperStatusContext = useContext(ScreenWrapperStatusContext); + const isSafeAreaTopPaddingApplied = screenWrapperStatusContext?.isSafeAreaTopPaddingApplied ?? false; + const isSafeAreaBottomPaddingApplied = screenWrapperStatusContext?.isSafeAreaBottomPaddingApplied ?? false; + + const adaptedInsets = { + ...insets, + top: isSafeAreaTopPaddingApplied ? 0 : insets?.top, + bottom: isSafeAreaBottomPaddingApplied ? 0 : insets?.bottom, + }; + const adaptedPaddingBottom = isSafeAreaBottomPaddingApplied ? 0 : paddingBottom; - const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined); return { - paddingTop, - paddingBottom, - insets: insets ?? undefined, - safeAreaPaddingBottomStyle: {paddingBottom}, + paddingTop: isSafeAreaTopPaddingApplied ? 0 : paddingTop, + paddingBottom: adaptedPaddingBottom, + insets: adaptedInsets, + safeAreaPaddingBottomStyle: {adaptedPaddingBottom}, }; } From 71c00f12773ffb8bec2876fa665d0a306c499825 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 21:02:45 +0100 Subject: [PATCH 13/29] feat: add useEdgeSpacing hook --- .../defaultEdgeSpacing/index.native.ts | 10 ++++++++++ .../defaultEdgeSpacing/index.ts | 10 ++++++++++ src/hooks/useEdgeSpacing/index.ts | 19 +++++++++++++++++++ 3 files changed, 39 insertions(+) create mode 100644 src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts create mode 100644 src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts create mode 100644 src/hooks/useEdgeSpacing/index.ts diff --git a/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts b/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts new file mode 100644 index 000000000000..73cb894aec8c --- /dev/null +++ b/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts @@ -0,0 +1,10 @@ +import type {EdgeInsets} from 'react-native-safe-area-context'; + +const defaultEdgeSpacing: EdgeInsets = { + top: 0, + left: 20, + right: 20, + bottom: 0, +}; + +export default defaultEdgeSpacing; diff --git a/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts b/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts new file mode 100644 index 000000000000..eeb8c83852f1 --- /dev/null +++ b/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts @@ -0,0 +1,10 @@ +import type {EdgeInsets} from 'react-native-safe-area-context'; + +const defaultEdgeSpacing: EdgeInsets = { + top: 20, + left: 20, + right: 20, + bottom: 20, +}; + +export default defaultEdgeSpacing; diff --git a/src/hooks/useEdgeSpacing/index.ts b/src/hooks/useEdgeSpacing/index.ts new file mode 100644 index 000000000000..aa90e00f0357 --- /dev/null +++ b/src/hooks/useEdgeSpacing/index.ts @@ -0,0 +1,19 @@ +import {useMemo} from 'react'; +import type {EdgeInsets} from 'react-native-safe-area-context'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; +import defaultEdgeSpacing from './defaultEdgeSpacing'; + +function useEdgeSpacing(padding: Partial = {}): EdgeInsets { + const {insets} = useStyledSafeAreaInsets(); + + const spacing = useMemo(() => ({...defaultEdgeSpacing, ...padding}), [padding]); + + return { + top: Math.max(insets.top, spacing.top), + left: Math.max(insets.left, spacing.left), + bottom: Math.max(insets.bottom, spacing.bottom), + right: Math.max(insets.right, spacing.right), + }; +} + +export default useEdgeSpacing; From 33c2afadbe9248f1a2bcd9fcc12c3f282a84b48f Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 27 Nov 2024 23:53:18 +0100 Subject: [PATCH 14/29] fix: set inset bottom to 0 if keyboard is open --- src/hooks/useSafeAreaInsets.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/hooks/useSafeAreaInsets.ts b/src/hooks/useSafeAreaInsets.ts index f88c50b448cb..1efe7784fa95 100644 --- a/src/hooks/useSafeAreaInsets.ts +++ b/src/hooks/useSafeAreaInsets.ts @@ -1,13 +1,19 @@ import type {EdgeInsets} from 'react-native-safe-area-context'; // eslint-disable-next-line no-restricted-imports import {useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context'; +import useKeyboardState from './useKeyboardState'; import useStyleUtils from './useStyleUtils'; function useSafeAreaInsets(): EdgeInsets { const StyleUtils = useStyleUtils(); const insets = useSafeAreaInsetsInternal(); + const {isKeyboardShown} = useKeyboardState(); const adjustedInsets = StyleUtils.getSafeAreaInsets(insets); - return adjustedInsets; + + return { + ...adjustedInsets, + bottom: isKeyboardShown ? 0 : insets.bottom, + }; } export default useSafeAreaInsets; From aa313785fdf9bcd9d2ca1d54d213952cfaf94aa1 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 28 Nov 2024 00:19:18 +0100 Subject: [PATCH 15/29] Revert "Merge branch '@chrispader/screen-wrapper-better-inset-padding-handling' into @chrispader/fix-53161" This reverts commit 692d96cfefc0bd80276de8821da7b5d64d88ae37, reversing changes made to 33c2afadbe9248f1a2bcd9fcc12c3f282a84b48f. --- src/components/SafeAreaConsumer/index.tsx | 29 ++- src/components/SafeAreaConsumer/types.ts | 19 ++ src/components/ScreenWrapper.tsx | 166 ++++++++++-------- .../usePaddingStyle/index.android.tsx | 4 +- .../TextPicker/usePaddingStyle/index.tsx | 4 +- .../defaultEdgeSpacing/index.native.ts | 10 -- .../defaultEdgeSpacing/index.ts | 10 -- src/hooks/useEdgeSpacing/index.ts | 19 -- src/hooks/useSafeAreaUtils.ts | 61 ------- src/hooks/useSafePaddingBottomStyle.ts | 4 +- src/hooks/useStyledSafeAreaInsets.ts | 36 ++++ src/pages/NewChatPage.tsx | 4 +- .../settings/Wallet/ReportCardLostPage.tsx | 4 +- .../settings/Wallet/TransferBalancePage.tsx | 4 +- src/pages/tasks/NewTaskPage.tsx | 4 +- 15 files changed, 178 insertions(+), 200 deletions(-) create mode 100644 src/components/SafeAreaConsumer/types.ts delete mode 100644 src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts delete mode 100644 src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts delete mode 100644 src/hooks/useEdgeSpacing/index.ts delete mode 100644 src/hooks/useSafeAreaUtils.ts create mode 100644 src/hooks/useStyledSafeAreaInsets.ts diff --git a/src/components/SafeAreaConsumer/index.tsx b/src/components/SafeAreaConsumer/index.tsx index 93711d010fe7..88770e1f0639 100644 --- a/src/components/SafeAreaConsumer/index.tsx +++ b/src/components/SafeAreaConsumer/index.tsx @@ -1,18 +1,31 @@ -import type {SafeAreaUtils} from '@hooks/useSafeAreaUtils'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; - -type SafeAreaConsumerProps = { - children: React.FC; -}; +import React from 'react'; +// eslint-disable-next-line no-restricted-imports +import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; +import useStyleUtils from '@hooks/useStyleUtils'; +import type SafeAreaConsumerProps from './types'; /** * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we * may need not just the insets, but the computed styles so we save a few lines of code with this. */ function SafeAreaConsumer({children}: SafeAreaConsumerProps) { - const safeAreaUtils = useSafeAreaUtils(); + const StyleUtils = useStyleUtils(); + + return ( + + {(safeAreaInsets) => { + const insets = StyleUtils.getSafeAreaInsets(safeAreaInsets); + const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets); - return children(safeAreaUtils); + return children({ + paddingTop, + paddingBottom, + insets, + safeAreaPaddingBottomStyle: {paddingBottom}, + }); + }} + + ); } SafeAreaConsumer.displayName = 'SafeAreaConsumer'; diff --git a/src/components/SafeAreaConsumer/types.ts b/src/components/SafeAreaConsumer/types.ts new file mode 100644 index 000000000000..2d7c6c57b078 --- /dev/null +++ b/src/components/SafeAreaConsumer/types.ts @@ -0,0 +1,19 @@ +import type {ViewStyle} from 'react-native'; +import type {EdgeInsets} from 'react-native-safe-area-context'; + +type SafeAreaChildrenProps = { + paddingTop?: ViewStyle['paddingTop']; + paddingBottom?: ViewStyle['paddingBottom']; + insets?: EdgeInsets; + safeAreaPaddingBottomStyle: { + paddingBottom?: ViewStyle['paddingBottom']; + }; +}; + +type SafeAreaConsumerProps = { + children: React.FC; +}; + +export default SafeAreaConsumerProps; + +export type {SafeAreaChildrenProps}; diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 3dd9be54c55b..c74ccf0470d0 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -11,7 +11,6 @@ import useInitialDimensions from '@hooks/useInitialWindowDimensions'; import useKeyboardState from '@hooks/useKeyboardState'; import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; import useTackInputFocus from '@hooks/useTackInputFocus'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -26,6 +25,7 @@ import HeaderGap from './HeaderGap'; import ImportedStateIndicator from './ImportedStateIndicator'; import KeyboardAvoidingView from './KeyboardAvoidingView'; import OfflineIndicator from './OfflineIndicator'; +import SafeAreaConsumer from './SafeAreaConsumer'; import withNavigationFallback from './withNavigationFallback'; type ScreenWrapperChildrenProps = { @@ -105,7 +105,7 @@ type ScreenWrapperProps = { focusTrapSettings?: FocusTrapForScreenProps['focusTrapSettings']; }; -type ScreenWrapperStatusContextType = {didScreenTransitionEnd: boolean; isSafeAreaTopPaddingApplied: boolean; isSafeAreaBottomPaddingApplied: boolean}; +type ScreenWrapperStatusContextType = {didScreenTransitionEnd: boolean}; const ScreenWrapperStatusContext = createContext(undefined); @@ -233,86 +233,96 @@ function ScreenWrapper( // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, []); - const {insets, paddingTop, paddingBottom, safeAreaPaddingBottomStyle} = useSafeAreaUtils(); - const paddingStyle: StyleProp = {}; - - const isSafeAreaTopPaddingApplied = includePaddingTop; - if (includePaddingTop) { - paddingStyle.paddingTop = paddingTop; - } - - // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. - const isSafeAreaBottomPaddingApplied = includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator); - if (isSafeAreaBottomPaddingApplied) { - paddingStyle.paddingBottom = paddingBottom; - } - const isAvoidingViewportScroll = useTackInputFocus(isFocused && shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileWebKit()); - const contextValue = useMemo( - () => ({didScreenTransitionEnd, isSafeAreaTopPaddingApplied, isSafeAreaBottomPaddingApplied}), - [didScreenTransitionEnd, isSafeAreaBottomPaddingApplied, isSafeAreaTopPaddingApplied], - ); + const contextValue = useMemo(() => ({didScreenTransitionEnd}), [didScreenTransitionEnd]); return ( - - - - - + {({ + insets = { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + paddingTop, + paddingBottom, + safeAreaPaddingBottomStyle, + }) => { + const paddingStyle: StyleProp = {}; + + if (includePaddingTop) { + paddingStyle.paddingTop = paddingTop; + } + + // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. + if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) { + paddingStyle.paddingBottom = paddingBottom; + } + + return ( + + - - {isDevelopment && } - - { - // If props.children is a function, call it to provide the insets to the children. - typeof children === 'function' - ? children({ - insets, - safeAreaPaddingBottomStyle, - didScreenTransitionEnd, - }) - : children - } - {isSmallScreenWidth && shouldShowOfflineIndicator && ( - <> - - {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} - - - )} - {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && ( - <> - - {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} - - - )} - - - - - - + + + + + {isDevelopment && } + + { + // If props.children is a function, call it to provide the insets to the children. + typeof children === 'function' + ? children({ + insets, + safeAreaPaddingBottomStyle, + didScreenTransitionEnd, + }) + : children + } + {isSmallScreenWidth && shouldShowOfflineIndicator && ( + <> + + {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} + + + )} + {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && ( + <> + + {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */} + + + )} + + + + + + + ); + }} + ); } diff --git a/src/components/TextPicker/usePaddingStyle/index.android.tsx b/src/components/TextPicker/usePaddingStyle/index.android.tsx index 120b65cdd352..9c881bc70404 100644 --- a/src/components/TextPicker/usePaddingStyle/index.android.tsx +++ b/src/components/TextPicker/usePaddingStyle/index.android.tsx @@ -1,7 +1,7 @@ -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; export default function usePaddingStyle() { - const {paddingTop} = useSafeAreaUtils(); + const {paddingTop} = useStyledSafeAreaInsets(); return {paddingTop}; } diff --git a/src/components/TextPicker/usePaddingStyle/index.tsx b/src/components/TextPicker/usePaddingStyle/index.tsx index 988a68087dfd..c7f317b27a90 100644 --- a/src/components/TextPicker/usePaddingStyle/index.tsx +++ b/src/components/TextPicker/usePaddingStyle/index.tsx @@ -1,6 +1,6 @@ -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; export default function usePaddingStyle() { - const {paddingTop, paddingBottom} = useSafeAreaUtils(); + const {paddingTop, paddingBottom} = useStyledSafeAreaInsets(); return {paddingTop, paddingBottom}; } diff --git a/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts b/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts deleted file mode 100644 index 73cb894aec8c..000000000000 --- a/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.native.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type {EdgeInsets} from 'react-native-safe-area-context'; - -const defaultEdgeSpacing: EdgeInsets = { - top: 0, - left: 20, - right: 20, - bottom: 0, -}; - -export default defaultEdgeSpacing; diff --git a/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts b/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts deleted file mode 100644 index eeb8c83852f1..000000000000 --- a/src/hooks/useEdgeSpacing/defaultEdgeSpacing/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type {EdgeInsets} from 'react-native-safe-area-context'; - -const defaultEdgeSpacing: EdgeInsets = { - top: 20, - left: 20, - right: 20, - bottom: 20, -}; - -export default defaultEdgeSpacing; diff --git a/src/hooks/useEdgeSpacing/index.ts b/src/hooks/useEdgeSpacing/index.ts deleted file mode 100644 index e7f21842f4f3..000000000000 --- a/src/hooks/useEdgeSpacing/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {useMemo} from 'react'; -import type {EdgeInsets} from 'react-native-safe-area-context'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; -import defaultEdgeSpacing from './defaultEdgeSpacing'; - -function useEdgeSpacing(padding: Partial = {}): EdgeInsets { - const {insets} = useSafeAreaUtils(); - - const spacing = useMemo(() => ({...defaultEdgeSpacing, ...padding}), [padding]); - - return { - top: Math.max(insets.top, spacing.top), - left: Math.max(insets.left, spacing.left), - bottom: Math.max(insets.bottom, spacing.bottom), - right: Math.max(insets.right, spacing.right), - }; -} - -export default useEdgeSpacing; diff --git a/src/hooks/useSafeAreaUtils.ts b/src/hooks/useSafeAreaUtils.ts deleted file mode 100644 index d0981c6bf77c..000000000000 --- a/src/hooks/useSafeAreaUtils.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {useContext} from 'react'; -import type {ViewStyle} from 'react-native'; -import type {EdgeInsets} from 'react-native-safe-area-context'; -import {ScreenWrapperStatusContext} from '@components/ScreenWrapper'; -import useSafeAreaInsets from './useSafeAreaInsets'; -import useStyleUtils from './useStyleUtils'; - -type SafeAreaUtils = { - paddingTop?: ViewStyle['paddingTop']; - paddingBottom?: ViewStyle['paddingBottom']; - insets: EdgeInsets; - safeAreaPaddingBottomStyle: { - paddingBottom?: ViewStyle['paddingBottom']; - }; -}; - -/** - * Custom hook to get the styled safe area insets. - * This hook utilizes the `SafeAreaInsetsContext` to retrieve the current safe area insets - * and applies styling adjustments using the `useStyleUtils` hook. - * - * @returns An object containing the styled safe area insets and additional styles. - * @returns .paddingTop The top padding adjusted for safe area. - * @returns .paddingBottom The bottom padding adjusted for safe area. - * @returns .insets The safe area insets object or undefined if not available. - * @returns .safeAreaPaddingBottomStyle An object containing the bottom padding style adjusted for safe area. - * - * @example - * // How to use this hook in a component - * function MyComponent() { - * const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets(); - * - * // Use these values to style your component accordingly - * } - */ -function useSafeAreaUtils(): SafeAreaUtils { - const StyleUtils = useStyleUtils(); - const insets = useSafeAreaInsets(); - const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets); - - const screenWrapperStatusContext = useContext(ScreenWrapperStatusContext); - const isSafeAreaTopPaddingApplied = screenWrapperStatusContext?.isSafeAreaTopPaddingApplied ?? false; - const isSafeAreaBottomPaddingApplied = screenWrapperStatusContext?.isSafeAreaBottomPaddingApplied ?? false; - - const adaptedInsets = { - ...insets, - top: isSafeAreaTopPaddingApplied ? 0 : insets?.top, - bottom: isSafeAreaBottomPaddingApplied ? 0 : insets?.bottom, - }; - const adaptedPaddingBottom = isSafeAreaBottomPaddingApplied ? 0 : paddingBottom; - - return { - paddingTop: isSafeAreaTopPaddingApplied ? 0 : paddingTop, - paddingBottom: adaptedPaddingBottom, - insets: adaptedInsets, - safeAreaPaddingBottomStyle: {paddingBottom: adaptedPaddingBottom}, - }; -} - -export default useSafeAreaUtils; -export type {SafeAreaUtils}; diff --git a/src/hooks/useSafePaddingBottomStyle.ts b/src/hooks/useSafePaddingBottomStyle.ts index f113a0c7cc95..a720d00ab943 100644 --- a/src/hooks/useSafePaddingBottomStyle.ts +++ b/src/hooks/useSafePaddingBottomStyle.ts @@ -1,6 +1,6 @@ import {useEffect, useMemo, useState} from 'react'; import {KeyboardEvents} from 'react-native-keyboard-controller'; -import useSafeAreaUtils from './useSafeAreaUtils'; +import useStyledSafeAreaInsets from './useStyledSafeAreaInsets'; import useThemeStyles from './useThemeStyles'; // This hook is useful for adding extra bottom padding to a component based on the device's safe area @@ -22,7 +22,7 @@ const useSafePaddingBottomStyle = () => { }; }, []); - const {paddingBottom} = useSafeAreaUtils(); + 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. diff --git a/src/hooks/useStyledSafeAreaInsets.ts b/src/hooks/useStyledSafeAreaInsets.ts new file mode 100644 index 000000000000..98813b1bf450 --- /dev/null +++ b/src/hooks/useStyledSafeAreaInsets.ts @@ -0,0 +1,36 @@ +import useSafeAreaInsets from './useSafeAreaInsets'; +import useStyleUtils from './useStyleUtils'; + +/** + * Custom hook to get the styled safe area insets. + * This hook utilizes the `SafeAreaInsetsContext` to retrieve the current safe area insets + * and applies styling adjustments using the `useStyleUtils` hook. + * + * @returns An object containing the styled safe area insets and additional styles. + * @returns .paddingTop The top padding adjusted for safe area. + * @returns .paddingBottom The bottom padding adjusted for safe area. + * @returns .insets The safe area insets object or undefined if not available. + * @returns .safeAreaPaddingBottomStyle An object containing the bottom padding style adjusted for safe area. + * + * @example + * // How to use this hook in a component + * function MyComponent() { + * const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets(); + * + * // Use these values to style your component accordingly + * } + */ +function useStyledSafeAreaInsets() { + const StyleUtils = useStyleUtils(); + const insets = useSafeAreaInsets(); + + const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined); + return { + paddingTop, + paddingBottom, + insets: insets ?? undefined, + safeAreaPaddingBottomStyle: {paddingBottom}, + }; +} + +export default useStyledSafeAreaInsets; diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index 16806aea704a..969d467e9fc5 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -19,8 +19,8 @@ import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Log from '@libs/Log'; @@ -131,7 +131,7 @@ function NewChatPage() { const {isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const personalData = useCurrentUserPersonalDetails(); - const {insets} = useSafeAreaUtils(); + const {insets} = useStyledSafeAreaInsets(); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); const selectionListRef = useRef(null); diff --git a/src/pages/settings/Wallet/ReportCardLostPage.tsx b/src/pages/settings/Wallet/ReportCardLostPage.tsx index ee302ea2edc8..187d20d02c01 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.tsx +++ b/src/pages/settings/Wallet/ReportCardLostPage.tsx @@ -12,7 +12,7 @@ import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useBeforeRemove from '@hooks/useBeforeRemove'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import {requestValidateCodeAction} from '@libs/actions/User'; import * as ErrorUtils from '@libs/ErrorUtils'; @@ -79,7 +79,7 @@ function ReportCardLostPage({ const prevIsLoading = usePrevious(formData?.isLoading); - const {paddingBottom} = useSafeAreaUtils(); + const {paddingBottom} = useStyledSafeAreaInsets(); const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails ?? {}); const primaryLogin = account?.primaryLogin ?? ''; diff --git a/src/pages/settings/Wallet/TransferBalancePage.tsx b/src/pages/settings/Wallet/TransferBalancePage.tsx index 017b81430350..3d1a21d9cec1 100644 --- a/src/pages/settings/Wallet/TransferBalancePage.tsx +++ b/src/pages/settings/Wallet/TransferBalancePage.tsx @@ -14,7 +14,7 @@ import ScrollView from '@components/ScrollView'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import * as ErrorUtils from '@libs/ErrorUtils'; @@ -52,7 +52,7 @@ function TransferBalancePage({bankAccountList, fundList, userWallet, walletTrans const styles = useThemeStyles(); const {numberFormat, translate} = useLocalize(); const {isOffline} = useNetwork(); - const {paddingBottom} = useSafeAreaUtils(); + const {paddingBottom} = useStyledSafeAreaInsets(); const paymentCardList = fundList ?? {}; const paymentTypes = [ diff --git a/src/pages/tasks/NewTaskPage.tsx b/src/pages/tasks/NewTaskPage.tsx index d4738e5440df..afa365557fbb 100644 --- a/src/pages/tasks/NewTaskPage.tsx +++ b/src/pages/tasks/NewTaskPage.tsx @@ -12,7 +12,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import useLocalize from '@hooks/useLocalize'; -import useSafeAreaUtils from '@hooks/useSafeAreaUtils'; +import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; @@ -51,7 +51,7 @@ function NewTaskPage({route}: NewTaskPageProps) { const hasDestinationError = task?.skipConfirmation && !task?.parentReportID; const isAllowedToCreateTask = useMemo(() => isEmptyObject(parentReport) || ReportUtils.isAllowedToComment(parentReport), [parentReport]); - const {paddingBottom} = useSafeAreaUtils(); + const {paddingBottom} = useStyledSafeAreaInsets(); const backTo = route.params?.backTo; const confirmButtonRef = useRef(null); From c50e214ea105aca97ea7b6fc5db62d6f36649bdf Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Thu, 28 Nov 2024 00:44:50 +0100 Subject: [PATCH 16/29] fix: new chat confirm page --- src/components/SelectionList/BaseSelectionList.tsx | 3 ++- src/components/SelectionList/types.ts | 3 +++ src/pages/NewChatConfirmPage.tsx | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 9358c4ad822c..d18e521db6b7 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -88,6 +88,7 @@ function BaseSelectionList( alternateTextNumberOfLines = 2, textInputRef, headerMessageStyle, + submitButtonStyles, shouldHideListOnInitialRender = true, textInputIconLeft, sectionTitleStyles, @@ -835,7 +836,7 @@ function BaseSelectionList(