[UX Reliability] Improve the bottom modal animations

src/CONST.ts

@@ -1387,6 +1387,12 @@ const CONST = {
             DELETE: 'delete',
             PRESERVE: 'preserve',
         },
+        ANIMATION_TIMING: {
+            DEFAULT_IN: 300,
+            DEFAULT_OUT: 200,
+            FAB_IN: 350,
+            FAB_OUT: 200,
+        },
     },
     TIMING: {
         GET_ORDERED_REPORT_IDS: 'get_ordered_report_ids',

src/components/FloatingActionButton.tsx

@@ -2,9 +2,8 @@ import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, Role, Text, View} from 'react-native';
-import {Platform} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
@@ -21,30 +20,6 @@ import EducationalTooltip from './Tooltip/EducationalTooltip';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 AnimatedPath.displayName = 'AnimatedPath';
 
-type AdapterPropsRecord = {
-    type: number;
-    payload?: number | null;
-};
-
-type AdapterProps = {
-    fill?: string | AdapterPropsRecord;
-    stroke?: string | AdapterPropsRecord;
-};
-
-const adapter = createAnimatedPropAdapter(
-    (props: AdapterProps) => {
-        if (Object.keys(props).includes('fill')) {
-            // eslint-disable-next-line no-param-reassign
-            props.fill = {type: 0, payload: processColor(props.fill)};
-        }
-        if (Object.keys(props).includes('stroke')) {
-            // eslint-disable-next-line no-param-reassign
-            props.stroke = {type: 0, payload: processColor(props.stroke)};
-        }
-    },
-    ['fill', 'stroke'],
-);
-
 type FloatingActionButtonProps = {
     /* Callback to fire on request to toggle the FloatingActionButton */
     onPress: (event: GestureResponderEvent | KeyboardEvent | undefined) => void;
@@ -63,7 +38,7 @@ type FloatingActionButtonProps = {
 };
 
 function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTooltipAllowed}: FloatingActionButtonProps, ref: ForwardedRef<HTMLDivElement | View | Text>) {
-    const {success, buttonDefaultBG, textLight, textDark} = useTheme();
+    const {success, buttonDefaultBG, textLight} = useTheme();
     const styles = useThemeStyles();
     const borderRadius = styles.floatingActionButton.borderRadius;
     const fabPressable = useRef<HTMLDivElement | View | Text | null>(null);
@@ -95,22 +70,9 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
         return {
             transform: [{rotate: `${sharedValue.get() * 135}deg`}],
             backgroundColor,
-            borderRadius,
         };
     });
 
-    const animatedProps = useAnimatedProps(
-        () => {
-            const fill = interpolateColor(sharedValue.get(), [0, 1], [textLight, textDark]);
-
-            return {
-                fill,
-            };
-        },
-        undefined,
-        Platform.OS === 'web' ? undefined : adapter,
-    );
-
     const toggleFabAction = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
         hideProductTrainingTooltip();
         // Drop focus to avoid blue focus ring.
@@ -145,14 +107,14 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
                 role={role}
                 shouldUseHapticsOnLongPress={false}
             >
-                <Animated.View style={[styles.floatingActionButton, animatedStyle]}>
+                <Animated.View style={[styles.floatingActionButton, {borderRadius}, animatedStyle]}>
                     <Svg
                         width={variables.iconSizeNormal}
                         height={variables.iconSizeNormal}
                     >
                         <AnimatedPath
                             d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
-                            animatedProps={animatedProps}
+                            fill={textLight}
                         />
                     </Svg>
                 </Animated.View>

src/components/Modal/BaseModal.tsx

@@ -1,7 +1,8 @@
-import {PortalHost} from '@gorhom/portal';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {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';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import useKeyboardState from '@hooks/useKeyboardState';
@@ -17,10 +18,26 @@ import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
 import variables from '@styles/variables';
 import {areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible} from '@userActions/Modal';
 import CONST from '@src/CONST';
+import BottomDockedModal from './BottomDockedModal';
+import type ModalProps from './BottomDockedModal/types';
 import ModalContent from './ModalContent';
 import ModalContext from './ModalContext';
 import type BaseModalProps from './types';
 
+type ModalComponentProps = (ReactNativeModalProps | ModalProps) & {
+    type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
+    shouldUseNewModal: boolean;
+};
+
+function ModalComponent({type, shouldUseNewModal, ...props}: ModalComponentProps) {
+    if (type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED && shouldUseNewModal) {
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        return <BottomDockedModal {...(props as ModalProps)} />;
+    }
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <ReactNativeModal {...(props as ReactNativeModalProps)} />;
+}
+
 function BaseModal(
     {
         isVisible,
@@ -41,18 +58,22 @@ function BaseModal(
         hideModalContentWhileAnimating = false,
         animationInTiming,
         animationOutTiming,
+        animationInDelay,
         statusBarTranslucent = true,
         navigationBarTranslucent = true,
         onLayout,
         avoidKeyboard = false,
         children,
         shouldUseCustomBackdrop = false,
+        shouldUseNewModal = false,
         onBackdropPress,
         modalId,
         shouldEnableNewFocusManagement = false,
         restoreFocusType,
         shouldUseModalPaddingStyle = true,
         initialFocus = false,
+        swipeThreshold = 150,
+        swipeDirection,
         shouldPreventScrollOnFocus = false,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
@@ -78,7 +99,6 @@ function BaseModal(
         }
         ComposerFocusManager.resetReadyToFocus(uniqueModalId);
     }, [shouldEnableNewFocusManagement, uniqueModalId]);
-
     /**
      * Hides modal
      * @param callHideCallback - Should we call the onModalHide callback
@@ -129,12 +149,12 @@ function BaseModal(
         [],
     );
 
-    const handleShowModal = () => {
+    const handleShowModal = useCallback(() => {
         if (shouldSetModalVisibility) {
             setModalVisibility(true);
         }
         onModalShow();
-    };
+    }, [onModalShow, shouldSetModalVisibility]);
 
     const handleBackdropPress = (e?: KeyboardEvent) => {
         if (e?.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
@@ -155,7 +175,6 @@ function BaseModal(
     const {
         modalStyle,
         modalContainerStyle,
-        swipeDirection,
         animationIn: modalStyleAnimationIn,
         animationOut: modalStyleAnimationOut,
         shouldAddTopSafeAreaMargin,
@@ -225,7 +244,7 @@ function BaseModal(
                 collapsable={false}
                 style={[styles.pAbsolute, {zIndex: 1}]}
             >
-                <ReactNativeModal
+                <ModalComponent
                     // Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
                     onClick={(e) => e.stopPropagation()}
                     onBackdropPress={handleBackdropPress}
@@ -239,6 +258,7 @@ function BaseModal(
                     onDismiss={handleDismissModal}
                     onSwipeComplete={() => onClose?.()}
                     swipeDirection={swipeDirection}
+                    swipeThreshold={swipeThreshold}
                     isVisible={isVisible}
                     backdropColor={theme.overlay}
                     backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity}
@@ -249,6 +269,7 @@ function BaseModal(
                     deviceHeight={windowHeight}
                     deviceWidth={windowWidth}
                     animationIn={animationIn ?? modalStyleAnimationIn}
+                    animationInDelay={animationInDelay}
                     animationOut={animationOut ?? modalStyleAnimationOut}
                     useNativeDriver={useNativeDriver}
                     useNativeDriverForBackdrop={useNativeDriverForBackdrop}
@@ -260,12 +281,13 @@ function BaseModal(
                     onLayout={onLayout}
                     avoidKeyboard={avoidKeyboard}
                     customBackdrop={shouldUseCustomBackdrop ? <Overlay onPress={handleBackdropPress} /> : undefined}
+                    type={type}
+                    shouldUseNewModal={shouldUseNewModal}
                 >
                     <ModalContent
                         onModalWillShow={saveFocusState}
                         onDismiss={handleDismissModal}
                     >
-                        <PortalHost name="modal" />
                         <FocusTrapForModal
                             active={isVisible}
                             initialFocus={initialFocus}
@@ -279,7 +301,7 @@ function BaseModal(
                             </View>
                         </FocusTrapForModal>
                     </ModalContent>
-                </ReactNativeModal>
+                </ModalComponent>
             </View>
         </ModalContext.Provider>
     );

src/components/Modal/BottomDockedModal/Backdrop/index.tsx

@@ -0,0 +1,92 @@
+import React, {useMemo} from 'react';
+import Animated, {Easing, Keyframe} from 'react-native-reanimated';
+import type {ReanimatedKeyframe} from 'react-native-reanimated/lib/typescript/layoutReanimation/animationBuilder/Keyframe';
+import type {BackdropProps} from '@components/Modal/BottomDockedModal/types';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0);
+
+/**
+ * Due to issues with react-native-reanimated Keyframes the easing type doesn't account for bezier functions
+ * and we also need to use internal .build() function to make the easing apply on each mount.
+ *
+ * This causes problems with both eslint & Typescript and is going to be fixed in react-native-reanimated 3.17 with these PRs merged:
+ * https://github.com/software-mansion/react-native-reanimated/pull/6960
+ * https://github.com/software-mansion/react-native-reanimated/pull/6958
+ *
+ * Once that's added we can apply our changes to files in BottomDockedModal/Backdrop/*.tsx and BottomDockedModal/Container/*.tsx
+ */
+
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+function Backdrop({
+    style,
+    customBackdrop,
+    onBackdropPress,
+    animationInTiming = CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN,
+    animationOutTiming = CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT,
+}: BackdropProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const Entering = useMemo(() => {
+        const FadeIn = new Keyframe({
+            from: {opacity: 0},
+            to: {
+                opacity: 0.72,
+                // @ts-expect-error Types mismatch in reanimated, should to be fixed in 3.17
+                easing,
+            },
+        });
+
+        // @ts-expect-error Internal function used to fix easing issue, should to be fixed in 3.17
+        return FadeIn.duration(animationInTiming).build() as ReanimatedKeyframe;
+    }, [animationInTiming]);
+
+    const Exiting = useMemo(() => {
+        const FadeOut = new Keyframe({
+            from: {opacity: 0.72},
+            to: {
+                opacity: 0,
+                // @ts-expect-error Types mismatch in reanimated, should to be fixed in 3.17
+                easing,
+            },
+        });
+
+        // @ts-expect-error Internal function used to fix easing issue, should to be fixed in 3.17
+        return FadeOut.duration(animationOutTiming).build() as ReanimatedKeyframe;
+    }, [animationOutTiming]);
+
+    const BackdropOverlay = useMemo(
+        () => (
+            <Animated.View
+                entering={Entering}
+                exiting={Exiting}
+                style={[styles.modalBackdrop, style]}
+            >
+                {!!customBackdrop && customBackdrop}
+            </Animated.View>
+        ),
+        [Entering, Exiting, customBackdrop, style, styles.modalBackdrop],
+    );
+
+    if (!customBackdrop) {
+        return (
+            <PressableWithoutFeedback
+                accessible
+                accessibilityLabel={translate('modal.backdropLabel')}
+                onPressIn={onBackdropPress}
+            >
+                {BackdropOverlay}
+            </PressableWithoutFeedback>
+        );
+    }
+
+    return BackdropOverlay;
+}
+
+Backdrop.displayName = 'Backdrop';
+
+export default Backdrop;