refactor and clean code

src/components/Modal/ReactNativeModal/Container.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import type {SharedValue} 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 & {onOpenCallBack: () => void; onCloseCallBack: () => void; panPosition?: {translateX: SharedValue<number>; translateY: SharedValue<number>}}) {
+function Container({style, ...props}: ModalProps & ContainerProps) {
     const animatedStyles = useAnimatedStyle(() => {
         if (!props.panPosition) {
             return {};

src/components/Modal/ReactNativeModal/Modal.tsx

@@ -113,12 +113,11 @@ function ReactNativeModal(incomingProps: ModalProps) {
         return false;
     };
 
-    const handleTransition = (type: TransitionType) => {
+    const handleTransition = () => {
         const shouldAnimate = isVisible !== isContainerOpen;
 
         if (shouldAnimate && !isTransitioning) {
             setIsTransitioning(true);
-            // TODO: type === 'open' ? animationInTiming : animationOutTiming,
         }
     };
 
@@ -131,7 +130,7 @@ function ReactNativeModal(incomingProps: ModalProps) {
             props.onModalWillShow();
         }
         setIsVisibleState(true);
-        handleTransition('open');
+        handleTransition();
     };
 
     const close = () => {
@@ -148,7 +147,7 @@ function ReactNativeModal(incomingProps: ModalProps) {
         }
 
         setIsVisibleState(false);
-        handleTransition('close');
+        handleTransition();
     };
 
     useEffect(() => {
@@ -191,17 +190,6 @@ function ReactNativeModal(incomingProps: ModalProps) {
 
     const computedStyle: Array<StyleProp<ViewStyle>> = [{margin: getDeviceWidth() * 0.05}, styles.content, style];
 
-    let panPosition: StyleProp<ViewStyle> = {};
-    if (isSwappable && panResponder) {
-        if (useNativeDriver) {
-            panPosition = {
-                transform: [{translateX: Xoffset.value}, {translateY: Yoffset.value}],
-            };
-        } else {
-            panPosition = pan.getLayout();
-        }
-    }
-
     const containerView = (
         <Container
             animationIn={animationIn}

src/components/Modal/ReactNativeModal/panResponders.ts

@@ -6,14 +6,26 @@ import {calcDistancePercentage, createAnimationEventForSwipe, getAccDistancePerD
 import type {AnimationEvent, Direction, GestureResponderEvent} from './types';
 import type ModalProps from './types';
 
-function handleSwipe(swipeDirection: Direction, dx: number, dy: number, Xoffset: SharedValue<number>, Yoffset: SharedValue<number>) {
-    if (swipeDirection === 'right' && dx > 0) {
+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;
-    } else if (swipeDirection === 'left' && dx < 0) {
+    }
+    if (directions.includes('left') && dx < 0) {
+        // eslint-disable-next-line no-param-reassign
         Xoffset.value = dx;
-    } else if (swipeDirection === 'up' && dy < 0) {
+    }
+    if (directions.includes('up') && dy < 0) {
+        // eslint-disable-next-line no-param-reassign
         Yoffset.value = dy;
-    } else if (swipeDirection === 'down' && dy > 0) {
+    }
+    if (directions.includes('down') && dy > 0) {
+        // eslint-disable-next-line no-param-reassign
         Yoffset.value = dy;
     }
 }
@@ -54,9 +66,6 @@ const onMoveShouldSetPanResponder = (
     pan: Animated.ValueXY,
 ) => {
     return (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-        console.log('______________-');
-        console.log(pan.getTranslateTransform());
-        console.log('______________-');
         if (!shouldPropagateSwipe(evt, gestureState, props.propagateSwipe)) {
             const shouldSetPanResponder = Math.abs(gestureState.dx) >= props.panResponderThreshold || Math.abs(gestureState.dy) >= props.panResponderThreshold;
             if (shouldSetPanResponder && props.onSwipeStart) {
@@ -100,13 +109,10 @@ const onPanResponderMove = (
     deviceWidth: number,
     xOffset: SharedValue<number>,
     yOffset: SharedValue<number>,
-    swipeDirection: Direction,
+    swipeDirection?: Direction | Direction[],
 ) => {
     return (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-        console.log('______________-');
-        console.log(swipeDirection);
-        console.log('______________-');
-        handleSwipe(swipeDirection, gestureState.dx, gestureState.dy, xOffset, yOffset);
+        handleSwipe(gestureState.dx, gestureState.dy, xOffset, yOffset, swipeDirection);
         const currentSwipingDirection = currentSwipingDirectionRef.current;
         if (!currentSwipingDirection) {
             if (gestureState.dx === 0 && gestureState.dy === 0) {

src/components/Modal/ReactNativeModal/types.ts

@@ -1,5 +1,6 @@
 import type {ReactNode} from 'react';
 import type {NativeSyntheticEvent, NativeTouchEvent, PanResponderGestureState, StyleProp, ViewProps, ViewStyle} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
 
 type Orientation = 'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right';
 
@@ -162,10 +163,21 @@ type ModalProps = ViewProps & {
     supportedOrientations?: Orientation[];
 };
 
+type ContainerProps = {
+    /** This function is called by open animation callback */
+    onOpenCallBack: () => void;
+
+    /** This function is called by close animation callback */
+    onCloseCallBack: () => void;
+
+    /** Position animated by pan gesture */
+    panPosition?: {translateX: SharedValue<number>; translateY: SharedValue<number>};
+};
+
 type GestureResponderEvent = NativeSyntheticEvent<NativeTouchEvent>;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnimationEvent = (...args: any[]) => void;
 
 export default ModalProps;
-export type {GestureResponderEvent, AnimationEvent, Direction, Orientation};
+export type {GestureResponderEvent, AnimationEvent, Direction, Orientation, ContainerProps};

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -22,6 +22,8 @@ function SearchRouterModal() {
             propagateSwipe
             shouldHandleNavigationBack={Browser.isMobileChrome()}
             onClose={closeSearchRouter}
+            swipeDirection="right"
+            swipeThreshold={300}
         >
             {isSearchRouterDisplayed && (
                 <FocusTrapForModal active={isSearchRouterDisplayed}>