From 1f0622ae4879a9b77c6cfd7a10d7b7dabd129a6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Thu, 3 Jul 2025 13:23:33 +0200 Subject: [PATCH 1/9] Use reanimated modal in help modal --- src/components/SidePanel/HelpModal/index.android.tsx | 3 +++ src/components/SidePanel/HelpModal/index.ios.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/components/SidePanel/HelpModal/index.android.tsx b/src/components/SidePanel/HelpModal/index.android.tsx index f7f4dd414e7dc..2284aeaa2da64 100644 --- a/src/components/SidePanel/HelpModal/index.android.tsx +++ b/src/components/SidePanel/HelpModal/index.android.tsx @@ -26,6 +26,9 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) { isVisible={!shouldHideSidePanel} type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} shouldHandleNavigationBack + shouldUseReanimatedModal + animationIn="slideInRight" + animationOut="slideOutRight" > diff --git a/src/components/SidePanel/HelpModal/index.ios.tsx b/src/components/SidePanel/HelpModal/index.ios.tsx index 4f8cf6c7a5317..8749e539c4ad2 100644 --- a/src/components/SidePanel/HelpModal/index.ios.tsx +++ b/src/components/SidePanel/HelpModal/index.ios.tsx @@ -13,6 +13,9 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) { shouldHandleNavigationBack propagateSwipe swipeDirection={CONST.SWIPE_DIRECTION.RIGHT} + shouldUseReanimatedModal + animationIn="slideInRight" + animationOut="slideOutRight" > From 222235019bd0694a80cbb081f6ab4b8afbb03160 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Mon, 7 Jul 2025 12:21:30 +0200 Subject: [PATCH 2/9] update search router --- src/components/Search/SearchRouter/SearchRouter.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index a349001ac136c..c361066193787 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -429,14 +429,16 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth}; const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata); - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const dismissKeyboard = () => { + Keyboard.dismiss(); + }; + const tap = Gesture.Tap().onFinalize(() => { 'worklet'; - runOnJS(() => { - Keyboard.dismiss(); - })(); + runOnJS(dismissKeyboard)(); }); + return ( Date: Tue, 8 Jul 2025 16:52:55 +0200 Subject: [PATCH 3/9] update help overlay to use modal utils --- .../SidePanel/HelpComponents/HelpOverlay.tsx | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/src/components/SidePanel/HelpComponents/HelpOverlay.tsx b/src/components/SidePanel/HelpComponents/HelpOverlay.tsx index 07621c84ce3ae..547a39d28134c 100644 --- a/src/components/SidePanel/HelpComponents/HelpOverlay.tsx +++ b/src/components/SidePanel/HelpComponents/HelpOverlay.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import Animated, {Easing, Keyframe} from 'react-native-reanimated'; +import Animated, {Keyframe} from 'react-native-reanimated'; +import {getModalInAnimation, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils'; import {PressableWithoutFeedback} from '@components/Pressable'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -13,27 +14,13 @@ type HelpOverlayProps = { onBackdropPress: () => void; }; -const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory(); - function HelpOverlay({isRHPVisible, onBackdropPress}: HelpOverlayProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const CustomFadeIn = new Keyframe({ - from: {opacity: 0}, - to: { - opacity: 0.72, - easing, - }, - }).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN); - - const CustomFadeOut = new Keyframe({ - from: {opacity: 0.72}, - to: { - opacity: 0, - easing, - }, - }).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT); + const CustomFadeIn = new Keyframe(getModalInAnimation('fadeIn')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN); + + const CustomFadeOut = new Keyframe(getModalOutAnimation('fadeOut')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT); return ( Date: Tue, 8 Jul 2025 16:54:38 +0200 Subject: [PATCH 4/9] add use Memo --- src/components/SidePanel/HelpComponents/HelpOverlay.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/SidePanel/HelpComponents/HelpOverlay.tsx b/src/components/SidePanel/HelpComponents/HelpOverlay.tsx index 547a39d28134c..76fdc321e92f2 100644 --- a/src/components/SidePanel/HelpComponents/HelpOverlay.tsx +++ b/src/components/SidePanel/HelpComponents/HelpOverlay.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import Animated, {Keyframe} from 'react-native-reanimated'; import {getModalInAnimation, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils'; import {PressableWithoutFeedback} from '@components/Pressable'; @@ -18,9 +18,9 @@ function HelpOverlay({isRHPVisible, onBackdropPress}: HelpOverlayProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const CustomFadeIn = new Keyframe(getModalInAnimation('fadeIn')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN); + const CustomFadeIn = useMemo(() => new Keyframe(getModalInAnimation('fadeIn')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN), []); - const CustomFadeOut = new Keyframe(getModalOutAnimation('fadeOut')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT); + const CustomFadeOut = useMemo(() => new Keyframe(getModalOutAnimation('fadeOut')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT), []); return ( Date: Thu, 10 Jul 2025 16:31:45 +0200 Subject: [PATCH 5/9] add modal slide right animation on web --- .../ReanimatedModal/Container/index.web.tsx | 27 +++++++------------ src/components/Modal/ReanimatedModal/utils.ts | 19 ++++++++++++- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx index deebf5e65fb4a..eafc30f9c89ff 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx @@ -1,15 +1,14 @@ import React, {useEffect, useMemo, useRef} from 'react'; -import Animated, {Easing, Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; +import Animated, {Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types'; import type {ContainerProps} from '@components/Modal/ReanimatedModal/types'; +import {easing, getModalInAnimationStyle, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils'; import useThemeStyles from '@hooks/useThemeStyles'; -const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory(); - -function Container({style, animationInTiming = 300, animationOutTiming = 300, onOpenCallBack, onCloseCallBack, ...props}: ReanimatedModalProps & ContainerProps) { +function Container({style, animationIn, animationOut, animationInTiming = 300, animationOutTiming = 300, onOpenCallBack, onCloseCallBack, ...props}: ReanimatedModalProps & ContainerProps) { const styles = useThemeStyles(); const onCloseCallbackRef = useRef(onCloseCallBack); - const opacity = useSharedValue(0); + const initProgress = useSharedValue(0); const isInitiated = useSharedValue(false); useEffect(() => { @@ -21,23 +20,17 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on return; } isInitiated.set(true); - opacity.set(withTiming(1, {duration: animationInTiming, easing}, onOpenCallBack)); - }, [animationInTiming, onOpenCallBack, opacity, isInitiated]); + initProgress.set(withTiming(1, {duration: animationInTiming, easing}, onOpenCallBack)); + }, [animationInTiming, onOpenCallBack, initProgress, isInitiated]); - const animatedStyles = useAnimatedStyle(() => ({opacity: opacity.get()}), [opacity]); + const animatedStyles = useAnimatedStyle(() => getModalInAnimationStyle(animationIn)(initProgress.get()), [initProgress]); const Exiting = useMemo(() => { - const FadeOut = new Keyframe({ - from: {opacity: 1}, - to: { - opacity: 0, - easing, - }, - }); + const AnimationOut = new Keyframe(getModalOutAnimation(animationOut)); // eslint-disable-next-line react-compiler/react-compiler - return FadeOut.duration(animationOutTiming).withCallback(() => onCloseCallbackRef.current()); - }, [animationOutTiming]); + return AnimationOut.duration(animationOutTiming).withCallback(() => onCloseCallbackRef.current()); + }, [animationOut, animationOutTiming]); return ( ViewStyle { + switch (animationType) { + case 'slideInRight': + return (progress) => ({transform: [{translateX: `${100 * (1 - progress)}%`}]}); + case 'slideInUp': + return (progress) => ({transform: [{translateY: `${100 * (1 - progress)}%`}]}); + case 'fadeIn': + return (progress) => ({opacity: progress}); + default: + throw new Error('Unknown animation type'); + } +} + function getModalOutAnimation(animationType: AnimationOutType): ValidKeyframeProps { switch (animationType) { case 'slideOutRight': @@ -66,4 +83,4 @@ function getModalOutAnimation(animationType: AnimationOutType): ValidKeyframePro } } -export {getModalInAnimation, getModalOutAnimation}; +export {getModalInAnimation, getModalInAnimationStyle, getModalOutAnimation, easing}; From 0a3047a9e23e7042b1063f6d7be60372104048c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Mon, 14 Jul 2025 17:49:12 +0200 Subject: [PATCH 6/9] forgotten stashed commit --- .../AvatarCropModal/AvatarCropModal.tsx | 1 + src/components/Modal/BaseModal.tsx | 33 +++++++++--- .../ReanimatedModal/Backdrop/index.web.tsx | 10 +++- .../SidePanel/HelpModal/index.android.tsx | 2 - .../SidePanel/HelpModal/index.ios.tsx | 2 - src/hooks/useSidePanel.ts | 7 +++ .../utils/generators/ModalStyleUtils.ts | 53 ++++++++++++------- 7 files changed, 75 insertions(+), 33 deletions(-) diff --git a/src/components/AvatarCropModal/AvatarCropModal.tsx b/src/components/AvatarCropModal/AvatarCropModal.tsx index aa2b98cdae6d6..0f6cbfff2b7d3 100644 --- a/src/components/AvatarCropModal/AvatarCropModal.tsx +++ b/src/components/AvatarCropModal/AvatarCropModal.tsx @@ -352,6 +352,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose shouldUseCustomBackdrop shouldHandleNavigationBack enableEdgeToEdgeBottomSafeAreaPadding + shouldUseReanimatedModal > { @@ -349,12 +366,12 @@ function BaseModal( initialFocus={initialFocus} shouldPreventScroll={shouldPreventScrollOnFocus} > - {children} - + {!keyboardStateContextValue?.isKeyboardActive && } diff --git a/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx b/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx index 10f4f54c92631..02b148259aa31 100644 --- a/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx +++ b/src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx @@ -22,16 +22,22 @@ function Backdrop({ const {translate} = useLocalize(); const Entering = useMemo(() => { + if (!backdropOpacity) { + return; + } const FadeIn = new Keyframe(getModalInAnimation('fadeIn')); return FadeIn.duration(animationInTiming); - }, [animationInTiming]); + }, [animationInTiming, backdropOpacity]); const Exiting = useMemo(() => { + if (!backdropOpacity) { + return; + } const FadeOut = new Keyframe(getModalOutAnimation('fadeOut')); return FadeOut.duration(animationOutTiming); - }, [animationOutTiming]); + }, [animationOutTiming, backdropOpacity]); const backdropStyle = useMemo( () => ({ diff --git a/src/components/SidePanel/HelpModal/index.android.tsx b/src/components/SidePanel/HelpModal/index.android.tsx index 2284aeaa2da64..6d59f6e7e5cb4 100644 --- a/src/components/SidePanel/HelpModal/index.android.tsx +++ b/src/components/SidePanel/HelpModal/index.android.tsx @@ -27,8 +27,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) { type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} shouldHandleNavigationBack shouldUseReanimatedModal - animationIn="slideInRight" - animationOut="slideOutRight" > diff --git a/src/components/SidePanel/HelpModal/index.ios.tsx b/src/components/SidePanel/HelpModal/index.ios.tsx index 8749e539c4ad2..052d50d56d0a9 100644 --- a/src/components/SidePanel/HelpModal/index.ios.tsx +++ b/src/components/SidePanel/HelpModal/index.ios.tsx @@ -14,8 +14,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) { propagateSwipe swipeDirection={CONST.SWIPE_DIRECTION.RIGHT} shouldUseReanimatedModal - animationIn="slideInRight" - animationOut="slideOutRight" > diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts index 2df4b1c5a0568..a1aa271dd0875 100644 --- a/src/hooks/useSidePanel.ts +++ b/src/hooks/useSidePanel.ts @@ -71,6 +71,7 @@ function useSidePanel() { const shouldApplySidePanelOffset = isExtraLargeScreenWidth && !shouldHideSidePanel; const sidePanelOffset = useRef(new Animated.Value(shouldApplySidePanelOffset ? variables.sideBarWidth : 0)); const sidePanelTranslateX = useRef(new Animated.Value(shouldHideSidePanel ? sidePanelWidth : 0)); + const modalTranslateX = useRef(new Animated.Value(shouldApplySidePanelOffset ? -variables.sideBarWidth : 0)); useEffect(() => { setIsSidePanelTransitionEnded(false); Animated.parallel([ @@ -84,6 +85,11 @@ function useSidePanel() { duration: CONST.ANIMATED_TRANSITION, useNativeDriver: true, }), + Animated.timing(modalTranslateX.current, { + toValue: shouldApplySidePanelOffset ? -variables.sideBarWidth : 0, + duration: CONST.ANIMATED_TRANSITION, + useNativeDriver: true, + }), ]).start(() => setIsSidePanelTransitionEnded(true)); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- sidePanelWidth dependency caused the help panel content to slide in on window resize @@ -115,6 +121,7 @@ function useSidePanel() { shouldHideToolTip, sidePanelOffset, sidePanelTranslateX, + modalTranslateX, openSidePanel, closeSidePanel, }; diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index b6be3c8b70578..fc5df159a5fb4 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -19,6 +19,7 @@ type WindowDimensions = { windowWidth: number; windowHeight: number; isSmallScreenWidth: boolean; + shouldUseNarrowLayout?: boolean; }; type GetModalStyles = { @@ -42,12 +43,21 @@ type GetModalStylesStyleUtil = { innerContainerStyle?: ViewStyle, outerStyle?: ViewStyle, shouldUseModalPaddingStyle?: boolean, + shouldUseReanimatedModal?: boolean, ) => GetModalStyles; }; const createModalStyleUtils: StyleUtilGenerator = ({theme, styles}) => ({ - getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}, shouldUseModalPaddingStyle = true): GetModalStyles => { - const {windowWidth, isSmallScreenWidth} = windowDimensions; + getModalStyles: ( + type, + windowDimensions, + popoverAnchorPosition = {}, + innerContainerStyle = {}, + outerStyle = {}, + shouldUseModalPaddingStyle = true, + shouldUseReanimatedModal = false, + ): GetModalStyles => { + const {windowWidth, isSmallScreenWidth, shouldUseNarrowLayout} = windowDimensions; let modalStyle: GetModalStyles['modalStyle'] = { margin: 0, @@ -258,7 +268,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the modalStyle = { ...modalStyle, ...{ - marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth, + marginLeft: isSmallScreenWidth || (shouldUseReanimatedModal && shouldUseNarrowLayout) ? 0 : windowWidth - variables.sideBarWidth, width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, flexDirection: 'row', justifyContent: 'flex-end', @@ -270,22 +280,27 @@ const createModalStyleUtils: StyleUtilGenerator = ({the overflow: 'hidden', }; - animationIn = { - from: { - translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth, - }, - to: { - translateX: 0, - }, - }; - animationOut = { - from: { - translateX: 0, - }, - to: { - translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth, - }, - }; + if (shouldUseReanimatedModal) { + animationIn = 'slideInRight'; + animationOut = 'slideOutRight'; + } else { + animationIn = { + from: { + translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth, + }, + to: { + translateX: 0, + }, + }; + animationOut = { + from: { + translateX: 0, + }, + to: { + translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth, + }, + }; + } hideBackdrop = true; swipeDirection = undefined; shouldAddBottomSafeAreaPadding = true; From 35e3492e278266ab7e19d6e7d556cb33a153879f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Tue, 15 Jul 2025 17:10:51 +0200 Subject: [PATCH 7/9] fix lint issues --- src/components/Modal/ReanimatedModal/Container/index.web.tsx | 3 ++- src/styles/utils/generators/ModalStyleUtils.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx index cbfefef5e4910..0d57c2af8755c 100644 --- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx +++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx @@ -34,7 +34,8 @@ function Container({ initProgress.set(withTiming(1, {duration: animationInTiming, easing}, onOpenCallBack)); }, [animationInTiming, onOpenCallBack, initProgress, isInitiated]); - const animatedStyles = useAnimatedStyle(() => ({opacity: initProgress.get()}), [initProgress]); + // instead of an entering transition since keyframe animations break keyboard on mWeb Chrome (#62799) + const animatedStyles = useAnimatedStyle(() => getModalInAnimationStyle(animationIn)(initProgress.get()), [initProgress]); const Exiting = useMemo(() => { const AnimationOut = new Keyframe(getModalOutAnimation(animationOut)); diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 041091bd9f775..84edaf4e77114 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -57,7 +57,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the shouldUseModalPaddingStyle = true, shouldUseReanimatedModal = false, ): GetModalStyles => { - const {windowWidth, isSmallScreenWidth} = windowDimensions; + const {windowWidth, isSmallScreenWidth, shouldUseNarrowLayout} = windowDimensions; let modalStyle: GetModalStyles['modalStyle'] = { margin: 0, From cd574793367a09a68dc617c3412c25a5e29e2813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Musia=C5=82?= Date: Tue, 15 Jul 2025 17:17:30 +0200 Subject: [PATCH 8/9] shouldUseNarrowLayout not necessary after other PR merge --- src/styles/utils/generators/ModalStyleUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 84edaf4e77114..8704b8705a8cc 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -57,7 +57,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the shouldUseModalPaddingStyle = true, shouldUseReanimatedModal = false, ): GetModalStyles => { - const {windowWidth, isSmallScreenWidth, shouldUseNarrowLayout} = windowDimensions; + const {windowWidth, isSmallScreenWidth} = windowDimensions; let modalStyle: GetModalStyles['modalStyle'] = { margin: 0, @@ -268,7 +268,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the modalStyle = { ...modalStyle, ...{ - marginLeft: isSmallScreenWidth || (shouldUseReanimatedModal && shouldUseNarrowLayout) ? 0 : windowWidth - variables.sideBarWidth, + marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth, width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, flexDirection: 'row', justifyContent: 'flex-end', From 35a5a9f443533288b1f0b1ec8629781a6afb1d14 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 16 Jul 2025 12:21:56 +0200 Subject: [PATCH 9/9] Remove unnecessary extra animated value --- src/components/Modal/BaseModal.tsx | 5 +++-- src/hooks/useSidePanel.ts | 8 +------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 9d6d3d0e5ea5a..b1ddbf4306c6c 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -109,9 +109,10 @@ function BaseModal( // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); - const {sidePanelOffset, modalTranslateX} = useSidePanel(); + const {sidePanelOffset} = useSidePanel(); const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined; - const sidePanelReanimatedStyle = shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: modalTranslateX.current}]} : undefined; + const sidePanelReanimatedStyle = + shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} : undefined; const keyboardStateContextValue = useKeyboardState(); const insets = useSafeAreaInsets(); diff --git a/src/hooks/useSidePanel.ts b/src/hooks/useSidePanel.ts index a1aa271dd0875..8e56da3bf89b0 100644 --- a/src/hooks/useSidePanel.ts +++ b/src/hooks/useSidePanel.ts @@ -71,7 +71,7 @@ function useSidePanel() { const shouldApplySidePanelOffset = isExtraLargeScreenWidth && !shouldHideSidePanel; const sidePanelOffset = useRef(new Animated.Value(shouldApplySidePanelOffset ? variables.sideBarWidth : 0)); const sidePanelTranslateX = useRef(new Animated.Value(shouldHideSidePanel ? sidePanelWidth : 0)); - const modalTranslateX = useRef(new Animated.Value(shouldApplySidePanelOffset ? -variables.sideBarWidth : 0)); + useEffect(() => { setIsSidePanelTransitionEnded(false); Animated.parallel([ @@ -85,11 +85,6 @@ function useSidePanel() { duration: CONST.ANIMATED_TRANSITION, useNativeDriver: true, }), - Animated.timing(modalTranslateX.current, { - toValue: shouldApplySidePanelOffset ? -variables.sideBarWidth : 0, - duration: CONST.ANIMATED_TRANSITION, - useNativeDriver: true, - }), ]).start(() => setIsSidePanelTransitionEnded(true)); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- sidePanelWidth dependency caused the help panel content to slide in on window resize @@ -121,7 +116,6 @@ function useSidePanel() { shouldHideToolTip, sidePanelOffset, sidePanelTranslateX, - modalTranslateX, openSidePanel, closeSidePanel, };