@bartosz grajdek/react native modal refactor kuba v2

src/components/Modal/BaseModal.tsx

@@ -1,8 +1,8 @@
-import {PortalHost} from '@gorhom/portal';
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
-import ReactNativeModal, {ModalProps as ReactNativeModalProps} from 'react-native-modal';
-import {ValueOf} from 'type-fest';
+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';
@@ -15,14 +15,13 @@
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
-import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
 import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
 import ModalContent from './ModalContent';
 import ModalContext from './ModalContext';
 import BottomDockedModal from './ReactNativeModal/Modal';
-import ModalProps from './ReactNativeModal/types';
+import type ModalProps from './ReactNativeModal/types';
 import type BaseModalProps from './types';
 
 type ModalComponentProps = (ReactNativeModalProps | ModalProps) & {
@@ -32,9 +31,9 @@
 function ModalComponent(props: ModalComponentProps) {
     switch (props.type) {
         case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED:
             return <BottomDockedModal {...(props as ModalProps)} />;
         default:
             return <ReactNativeModal {...(props as ReactNativeModalProps)} />;
     }
 }
 
@@ -53,8 +52,6 @@
         fullscreen = true,
         animationIn,
         animationOut,
-        useNativeDriver: useNativeDriverProp,
-        useNativeDriverForBackdrop,
         hideModalContentWhileAnimating = false,
         animationInTiming,
         animationOutTiming,
@@ -70,6 +67,8 @@
         restoreFocusType,
         shouldUseModalPaddingStyle = true,
         initialFocus = false,
+        swipeThreshold = 150,
+        swipeDirection,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
 ) {
@@ -94,7 +93,6 @@
         }
         ComposerFocusManager.resetReadyToFocus(uniqueModalId);
     }, [shouldEnableNewFocusManagement, uniqueModalId]);
-
     /**
      * Hides modal
      * @param callHideCallback - Should we call the onModalHide callback
@@ -171,7 +169,6 @@
     const {
         modalStyle,
         modalContainerStyle,
-        swipeDirection,
         animationIn: modalStyleAnimationIn,
         animationOut: modalStyleAnimationOut,
         shouldAddTopSafeAreaMargin,
@@ -244,7 +241,6 @@
                 <ModalComponent
                     backdropTransitionInTiming={300}
                     panResponderThreshold={100}
-                    swipeThreshold={100}
                     onModalWillHide={() => {}}
                     scrollTo={null}
                     scrollOffset={0}
@@ -264,6 +260,7 @@
                     onDismiss={handleDismissModal}
                     onSwipeComplete={() => onClose?.()}
                     swipeDirection={swipeDirection}
+                    swipeThreshold={swipeThreshold}
                     isVisible={isVisible}
                     backdropColor={theme.overlay}
                     backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity}

src/components/Modal/ReactNativeModal/Container.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
-import Animated, {SlideInDown, SlideOutDown} from 'react-native-reanimated';
+import Animated, {runOnJS, SlideInDown, SlideOutDown, useAnimatedStyle} from 'react-native-reanimated';
 import type ModalProps from './types';
+import type {ContainerProps} from './types';
 
-function Container({style, ...props}: ModalProps) {
+function Container({style, ...props}: ModalProps & ContainerProps) {
+    const animatedStyles = useAnimatedStyle(() => {
+        if (!props.panPosition) {
+            return {};
+        }
+        return {
+            transform: [{translateX: props.panPosition.translateX.value}, {translateY: props.panPosition.translateY.value}],
+        };
+    });
     return (
         <Animated.View
             style={[style, {flex: 1, height: '100%', flexDirection: 'row'}]}
-            entering={SlideInDown.duration(300)}
-            exiting={SlideOutDown.duration(300)}
+            entering={SlideInDown.duration(300).withCallback(() => {
+                runOnJS(props.onOpenCallBack)();
+            })}
+            exiting={SlideOutDown.duration(300).withCallback(() => {
+                runOnJS(props.onCloseCallBack)();
+            })}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
-            <Animated.View style={{width: '100%', flex: 1, alignSelf: 'flex-end'}}>{props.children}</Animated.View>
+            <Animated.View style={[{width: '100%', flex: 1, alignSelf: 'flex-end'}, animatedStyles]}>{props.children}</Animated.View>
         </Animated.View>
     );
 }

src/components/Modal/ReactNativeModal/Modal.tsx

@@ -1,6 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {EmitterSubscription, PanResponderInstance, StyleProp, ViewStyle} from 'react-native';
 import {Animated, BackHandler, DeviceEventEmitter, Dimensions, KeyboardAvoidingView, Modal, PanResponder, Platform, View} from 'react-native';
+import {useSharedValue} from 'react-native-reanimated';
 import Backdrop from './Backdrop';
 import Container from './Container';
 import styles from './modal.style';
@@ -10,9 +11,9 @@
 import type {AnimationEvent, Direction} from './types';
 import {defaultProps} from './utils';
 
-type TransitionType = 'open' | 'close';
-
 function ReactNativeModal(incomingProps: ModalProps) {
+    const mergedProps = {...defaultProps, ...incomingProps};
+
     const {
         animationIn,
         animationOut,
@@ -34,21 +35,18 @@
         style,
         avoidKeyboard,
         ...props
-    }: ModalProps = {
-        ...defaultProps,
-        ...incomingProps,
-    };
-    const [showContent, setShowContent] = useState(isVisible);
+    } = mergedProps;
+
     const [isVisibleState, setIsVisibleState] = useState(isVisible);
     const [isContainerOpen, setIsContainerOpen] = useState(false);
     const [isTransitioning, setIsTransitioning] = useState(false);
     const [deviceWidth, setDeviceWidth] = useState(Dimensions.get('window').width);
     const [deviceHeight, setDeviceHeight] = useState(Dimensions.get('window').height);
     const [pan, setPan] = useState<Animated.ValueXY>(new Animated.ValueXY());
     const [panResponder, setPanResponder] = useState<PanResponderInstance | null>(null);
     const [inSwipeClosingState, setInSwipeClosingState] = useState(false);
     const isSwipeable = !!props.swipeDirection;
-
+    const shouldHideChildren = props.hideModalContentWhileAnimating && isContainerOpen && isTransitioning;
     const currentSwipingDirectionRef = useRef<Direction | null>(null);
 
     const setCurrentSwipingDirection = (direction: Direction | null) => {
@@ -65,14 +63,28 @@
 
     const getDeviceHeight = () => props.deviceHeight ?? deviceHeight;
     const getDeviceWidth = () => props.deviceWidth ?? deviceWidth;
+    const yOffset = useSharedValue<number>(0);
+    const xOffset = useSharedValue<number>(0);
 
     const buildPanResponder = useCallback(() => {
         setPanResponder(
             PanResponder.create({
                 onMoveShouldSetPanResponder: onMoveShouldSetPanResponder(props, setAnimEvt, setCurrentSwipingDirection, pan),
                 onStartShouldSetPanResponder: (a, b) => onStartShouldSetPanResponder(props, setCurrentSwipingDirection)(a as EnhancedGestureEvent, b),
-                onPanResponderMove: onPanResponderMove(props, currentSwipingDirectionRef, setCurrentSwipingDirection, setAnimEvt, animEvt, pan, deviceHeight, deviceWidth),
-                onPanResponderRelease: onPanResponderRelease(props, currentSwipingDirectionRef, setInSwipeClosingState, pan),
+                onPanResponderMove: onPanResponderMove(
+                    props,
+                    currentSwipingDirectionRef,
+                    setCurrentSwipingDirection,
+                    setAnimEvt,
+                    animEvt,
+                    pan,
+                    deviceHeight,
+                    deviceWidth,
+                    xOffset,
+                    yOffset,
+                    props.swipeDirection,
+                ),
+                onPanResponderRelease: onPanResponderRelease(props, currentSwipingDirectionRef, setInSwipeClosingState, pan, xOffset, yOffset),
             }),
         );
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
@@ -99,41 +111,24 @@
         return false;
     };
 
-    const handleTransition = (type: TransitionType, onFinish: () => void) => {
+    const handleTransition = () => {
         const shouldAnimate = isVisible !== isContainerOpen;
 
         if (shouldAnimate && !isTransitioning) {
             setIsTransitioning(true);
-
-            setTimeout(() => {
-                setIsContainerOpen(isVisible);
-                setIsTransitioning(false);
-
-                onFinish();
-            }, 300);
-            // TODO: type === 'open' ? animationInTiming : animationOutTiming,
         }
     };
 
     const open = () => {
         if (isTransitioning) {
             return;
         }
-        if (isSwipeable) {
-            pan.setValue?.({x: 0, y: 0});
-        }
 
         if (props.onModalWillShow) {
             props.onModalWillShow();
         }
         setIsVisibleState(true);
-        handleTransition('open', () => {
-            if (!isVisible) {
-                setIsContainerOpen(false);
-            } else {
-                onModalShow();
-            }
-        });
+        handleTransition();
     };
 
     const close = () => {
@@ -150,14 +145,7 @@
         }
 
         setIsVisibleState(false);
-        handleTransition('close', () => {
-            if (isVisible) {
-                setIsContainerOpen(true);
-            } else {
-                setShowContent(false);
-                props.onModalHide?.();
-            }
-        });
+        handleTransition();
     };
 
     useEffect(() => {
@@ -200,33 +188,31 @@
 
     const computedStyle: Array<StyleProp<ViewStyle>> = [{margin: getDeviceWidth() * 0.05}, styles.content, style];
 
-    let panPosition: StyleProp<ViewStyle> = {};
-    if (isSwipeable && panResponder) {
-        if (useNativeDriver) {
-            panPosition = {
-                // transform: pan.getTranslateTransform(),
-            };
-        } else {
-            // panPosition = pan.getLayout();
-        }
-    }
-
     const containerView = (
         <Container
             animationIn={animationIn}
             animationOut={animationOut}
             animationInTiming={animationInTiming}
             animationOutTiming={animationOutTiming}
             isVisible={isVisibleState}
-            style={[panPosition, computedStyle]}
+            style={[computedStyle]}
+            panPosition={isSwipeable ? {translateX: xOffset, translateY: yOffset} : undefined}
             pointerEvents="box-none"
             useNativeDriver={useNativeDriver}
+            onOpenCallBack={() => {
+                setIsContainerOpen(true);
+                setIsTransitioning(false);
+            }}
+            onCloseCallBack={() => {
+                setIsContainerOpen(false);
+                setIsTransitioning(false);
+            }}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...(isSwipeable && panResponder ? panResponder.panHandlers : {})}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
         >
-            {props.hideModalContentWhileAnimating && !showContent ? <View /> : children}
+            {shouldHideChildren ? <View /> : children}
         </Container>
     );
 

src/components/Modal/ReactNativeModal/panResponders.ts

@@ -1,10 +1,35 @@
 import type {MutableRefObject} from 'react';
-import type {PanResponderGestureState} from 'react-native';
-import {Animated} from 'react-native';
+import type {Animated, PanResponderGestureState} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
+import {withSpring} from 'react-native-reanimated';
 import {calcDistancePercentage, createAnimationEventForSwipe, getAccDistancePerDirection, getSwipingDirection, isSwipeDirectionAllowed, shouldPropagateSwipe} from './panHandlers';
 import type {AnimationEvent, Direction, GestureResponderEvent} from './types';
 import type ModalProps from './types';
 
+function handleSwipe(dx: number, dy: number, Xoffset: SharedValue<number>, Yoffset: SharedValue<number>, swipeDirection?: Direction | Direction[]) {
+    if (!swipeDirection) {
+        return;
+    }
+    const directions = Array.isArray(swipeDirection) ? swipeDirection : [swipeDirection];
+
+    if (directions.includes('right') && dx > 0) {
+        // eslint-disable-next-line no-param-reassign
+        Xoffset.value = dx;
+    }
+    if (directions.includes('left') && dx < 0) {
+        // eslint-disable-next-line no-param-reassign
+        Xoffset.value = dx;
+    }
+    if (directions.includes('up') && dy < 0) {
+        // eslint-disable-next-line no-param-reassign
+        Yoffset.value = dy;
+    }
+    if (directions.includes('down') && dy > 0) {
+        // eslint-disable-next-line no-param-reassign
+        Yoffset.value = dy;
+    }
+}
+
 type RemainingModalProps = Omit<
     ModalProps,
     | 'animationIn'
@@ -82,8 +107,12 @@
     pan: Animated.ValueXY,
     deviceHeight: number,
     deviceWidth: number,
+    xOffset: SharedValue<number>,
+    yOffset: SharedValue<number>,
+    swipeDirection?: Direction | Direction[],
 ) => {
     return (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        handleSwipe(gestureState.dx, gestureState.dy, xOffset, yOffset, swipeDirection);
         const currentSwipingDirection = currentSwipingDirectionRef.current;
         if (!currentSwipingDirection) {
             if (gestureState.dx === 0 && gestureState.dy === 0) {
@@ -128,6 +157,8 @@
     currentSwipingDirectionRef: MutableRefObject<Direction | null>,
     setInSwipeClosingState: (val: boolean) => void,
     pan: Animated.ValueXY,
+    xOffset: SharedValue<number>,
+    yOffset: SharedValue<number>,
 ) => {
     return (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
         const currentSwipingDirection = currentSwipingDirectionRef.current;
@@ -141,6 +172,10 @@
                     },
                     gestureState,
                 );
+                // eslint-disable-next-line no-param-reassign
+                xOffset.value = 0;
+                // eslint-disable-next-line no-param-reassign
+                yOffset.value = 0;
                 return;
             }
         }
@@ -149,11 +184,10 @@
             props.onSwipeCancel(gestureState);
         }
 
-        Animated.spring(pan, {
-            toValue: {x: 0, y: 0},
-            bounciness: 0,
-            useNativeDriver: false,
-        }).start();
+        // eslint-disable-next-line no-param-reassign
+        xOffset.value = withSpring(0);
+        // eslint-disable-next-line no-param-reassign
+        yOffset.value = withSpring(0);
 
         if (props.scrollTo && props.scrollOffset !== undefined && props.scrollOffsetMax !== undefined) {
             if (props.scrollOffset > props.scrollOffsetMax) {