From b0c61d6a6a577e9e3e40fdaf71a86b53dad52fde Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Mon, 4 Aug 2025 13:25:41 +0200 Subject: [PATCH 1/4] Migrate POPOVER modals to use the Reanimated modal --- src/components/Modal/BaseModal.tsx | 2 +- src/components/Modal/ReanimatedModal/Container/index.web.tsx | 2 +- src/components/PopoverWithMeasuredContent/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index d5d641e9de10..0a701b061bfd 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -32,7 +32,7 @@ import ReanimatedModal from './ReanimatedModal'; import type ReanimatedModalProps from './ReanimatedModal/types'; import type BaseModalProps from './types'; -const REANIMATED_MODAL_TYPES: Array> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN]; +const REANIMATED_MODAL_TYPES: Array> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN, CONST.MODAL.MODAL_TYPE.POPOVER]; type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & { type?: ValueOf; diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx index 0d57c2af8755..dcf760e48a60 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx @@ -46,7 +46,7 @@ function Container({ return ( Date: Tue, 5 Aug 2025 11:31:34 +0200 Subject: [PATCH 2/4] Fix style regression for other modal types --- .../Modal/ReanimatedModal/Container/index.web.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx index dcf760e48a60..435b2be669e5 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx @@ -46,7 +46,12 @@ function Container({ return ( Date: Wed, 6 Aug 2025 13:39:35 +0200 Subject: [PATCH 3/4] More review fixes --- .../Modal/ReanimatedModal/Container/index.tsx | 2 +- .../ReanimatedModal/Container/index.web.tsx | 7 +-- src/styles/index.ts | 2 - .../utils/generators/ModalStyleUtils.ts | 55 ++++++++----------- 4 files changed, 25 insertions(+), 41 deletions(-) diff --git a/src/components/Modal/ReanimatedModal/Container/index.tsx b/src/components/Modal/ReanimatedModal/Container/index.tsx index 8381fc7c361f..3d944c8f534a 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.tsx @@ -46,7 +46,7 @@ function Container({ return ( diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx index 435b2be669e5..567fd29644e2 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx @@ -46,12 +46,7 @@ function Container({ return ( borderColor: theme.transparent, }, - modalContainer: {height: '100%'}, - modalAnimatedContainer: {width: '100%'}, modalContainerBox: { diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index d7be62cddb28..83955fd6f993 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -93,9 +93,8 @@ const createModalStyleUtils: StyleUtilGenerator = ({the // and can be dismissed by clicking outside of the modal. modalStyle = { ...modalStyle, - ...{ - alignItems: 'center', - }, + alignItems: 'center', + height: '100%', }; modalContainerStyle = { boxShadow: theme.shadow, @@ -117,9 +116,8 @@ const createModalStyleUtils: StyleUtilGenerator = ({the // viewed on a smaller device (e.g. mobile or mobile web). modalStyle = { ...modalStyle, - ...{ - alignItems: 'center', - }, + alignItems: 'center', + height: '100%', }; modalContainerStyle = { boxShadow: theme.shadow, @@ -147,9 +145,8 @@ const createModalStyleUtils: StyleUtilGenerator = ({the // viewed on a smaller device (e.g. mobile or mobile web). modalStyle = { ...modalStyle, - ...{ - alignItems: 'center', - }, + alignItems: 'center', + height: '100%', }; modalContainerStyle = { boxShadow: theme.shadow, @@ -174,10 +171,9 @@ const createModalStyleUtils: StyleUtilGenerator = ({the // A centered modal that cannot be dismissed with a swipe. modalStyle = { ...modalStyle, - ...{ - alignItems: 'center', - justifyContent: 'center', - }, + alignItems: 'center', + justifyContent: 'center', + height: '100%', }; modalContainerStyle = { boxShadow: theme.shadow, @@ -200,9 +196,8 @@ const createModalStyleUtils: StyleUtilGenerator = ({the // A centered modal that takes up the minimum possible screen space on all devices modalStyle = { ...modalStyle, - ...{ - alignItems: 'center', - }, + alignItems: 'center', + height: '100%', }; modalContainerStyle = { boxShadow: theme.shadow, @@ -224,10 +219,9 @@ const createModalStyleUtils: StyleUtilGenerator = ({the case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED: modalStyle = { ...modalStyle, - ...{ - alignItems: 'center', - justifyContent: 'flex-end', - }, + alignItems: 'center', + justifyContent: 'flex-end', + height: '100%', }; modalContainerStyle = { width: '100%', @@ -257,11 +251,9 @@ const createModalStyleUtils: StyleUtilGenerator = ({the modalStyle = { ...modalStyle, ...popoverAnchorPosition, - ...{ - position: 'absolute', - alignItems: 'center', - justifyContent: 'flex-end', - }, + position: 'absolute', + alignItems: 'center', + justifyContent: 'flex-end', }; modalContainerStyle = { borderRadius: variables.componentBorderRadiusLarge, @@ -280,12 +272,11 @@ const createModalStyleUtils: StyleUtilGenerator = ({the case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED: modalStyle = { ...modalStyle, - ...{ - marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth, - width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, - flexDirection: 'row', - justifyContent: 'flex-end', - }, + marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth, + width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + flexDirection: 'row', + justifyContent: 'flex-end', + height: '100%', }; modalContainerStyle = { width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, @@ -320,7 +311,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the shouldAddTopSafeAreaPadding = true; break; default: - modalStyle = {}; + modalStyle = {height: '100%'}; modalContainerStyle = {}; swipeDirection = 'down'; animationIn = 'slideInUp'; From 7d64f1c5a6bc078311dd114bb741a1f96f91f93a Mon Sep 17 00:00:00 2001 From: mhawryluk Date: Thu, 7 Aug 2025 15:30:41 +0200 Subject: [PATCH 4/4] Fix SearchRouterModal position with help panel open on wide web view --- src/components/Modal/BaseModal.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 0a701b061bfd..10c0fbb8e3a6 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -116,8 +116,10 @@ function BaseModal( const {sidePanelOffset} = useSidePanel(); const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined; - const sidePanelReanimatedStyle = - shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} : undefined; + const sidePanelAnimatedStyle = + (shouldUseReanimatedModal || type === CONST.MODAL.MODAL_TYPE.POPOVER) && shouldApplySidePanelOffset && !isSmallScreenWidth + ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} + : undefined; const keyboardStateContextValue = useKeyboardState(); const [modalOverlapsWithTopSafeArea, setModalOverlapsWithTopSafeArea] = useState(false); @@ -415,7 +417,7 @@ function BaseModal( > {children}