Merge pull request Expensify#65409 from software-mansion-labs/feat/use-reanimated-modal-in-help-modal

Use reanimated modal in Help modal

Author: mountiny

src/components/AvatarCropModal/AvatarCropModal.tsx

@@ -352,6 +352,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
             shouldUseCustomBackdrop
             shouldHandleNavigationBack
             enableEdgeToEdgeBottomSafeAreaPadding
+            shouldUseReanimatedModal
         >
             <ScreenWrapper
                 style={[styles.pb0]}

src/components/Modal/BaseModal.tsx

@@ -1,5 +1,7 @@
 import React, {forwardRef, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
-import {View} from 'react-native';
+// Animated required for side panel navigation
+// eslint-disable-next-line no-restricted-imports
+import {Animated, View} from 'react-native';
 import type {ModalProps as ReactNativeModalProps} from 'react-native-modal';
 import ReactNativeModal from 'react-native-modal';
 import type {ValueOf} from 'type-fest';
@@ -106,9 +108,11 @@ function BaseModal(
     const {windowWidth, windowHeight} = useWindowDimensions();
     // 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} = useResponsiveLayout();
+    const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
     const {sidePanelOffset} = useSidePanel();
-    const sidePanelStyle = shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
+    const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
+    const sidePanelReanimatedStyle =
+        shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} : undefined;
     const keyboardStateContextValue = useKeyboardState();
 
     const insets = useSafeAreaInsets();
@@ -222,14 +226,27 @@ function BaseModal(
                     windowWidth,
                     windowHeight,
                     isSmallScreenWidth,
+                    shouldUseNarrowLayout,
                 },
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
                 shouldUseModalPaddingStyle,
                 shouldUseReanimatedModal,
             ),
-        [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle, shouldUseModalPaddingStyle, shouldUseReanimatedModal],
+        [
+            StyleUtils,
+            type,
+            windowWidth,
+            windowHeight,
+            isSmallScreenWidth,
+            shouldUseNarrowLayout,
+            popoverAnchorPosition,
+            innerContainerStyle,
+            outerStyle,
+            shouldUseModalPaddingStyle,
+            shouldUseReanimatedModal,
+        ],
     );
 
     const modalPaddingStyles = useMemo(() => {
@@ -351,12 +368,12 @@ function BaseModal(
                                 initialFocus={initialFocus}
                                 shouldPreventScroll={shouldPreventScrollOnFocus}
                             >
-                                <View
-                                    style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
+                                <Animated.View
+                                    style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
                                     ref={ref}
                                 >
                                     <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
-                                </View>
+                                </Animated.View>
                             </FocusTrapForModal>
                         </ModalContent>
                         {!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}

src/components/SidePanel/HelpComponents/HelpOverlay.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import Animated, {Easing, Keyframe} from 'react-native-reanimated';
+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';
 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 = useMemo(() => new Keyframe(getModalInAnimation('fadeIn')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN), []);
+
+    const CustomFadeOut = useMemo(() => new Keyframe(getModalOutAnimation('fadeOut')).duration(CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT), []);
 
     return (
         <Animated.View

src/components/SidePanel/HelpModal/index.android.tsx

@@ -26,6 +26,7 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) {
             isVisible={!shouldHideSidePanel}
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
             shouldHandleNavigationBack
+            shouldUseReanimatedModal
         >
             <HelpContent closeSidePanel={closeSidePanel} />
         </Modal>

src/components/SidePanel/HelpModal/index.ios.tsx

@@ -13,6 +13,7 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) {
             shouldHandleNavigationBack
             propagateSwipe
             swipeDirection={CONST.SWIPE_DIRECTION.RIGHT}
+            shouldUseReanimatedModal
         >
             <HelpContent closeSidePanel={closeSidePanel} />
         </Modal>

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));
+
     useEffect(() => {
         setIsSidePanelTransitionEnded(false);
         Animated.parallel([

src/styles/utils/generators/ModalStyleUtils.ts

@@ -19,6 +19,7 @@ type WindowDimensions = {
     windowWidth: number;
     windowHeight: number;
     isSmallScreenWidth: boolean;
+    shouldUseNarrowLayout?: boolean;
 };
 
 type GetModalStyles = {