adding some types, and do some refactor

src/components/Modal/BaseModal.tsx

@@ -1,7 +1,7 @@
 import {PortalHost} from '@gorhom/portal';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
-import ReactNativeModal from 'react-native-modal';
+// import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import useKeyboardState from '@hooks/useKeyboardState';
@@ -20,6 +20,7 @@ import * as Modal from '@userActions/Modal';
 import CONST from '@src/CONST';
 import ModalContent from './ModalContent';
 import ModalContext from './ModalContext';
+import ReactNativeModal from './ReactNativeModal/Modal';
 import type BaseModalProps from './types';
 
 function BaseModal(
@@ -246,7 +247,11 @@ function BaseModal(
                     style={modalStyle}
                     deviceHeight={windowHeight}
                     deviceWidth={windowWidth}
+                    /* eslint-disable @typescript-eslint/ban-ts-comment */
+                    // @ts-ignore
                     animationIn={animationIn ?? modalStyleAnimationIn}
+                    /* eslint-disable @typescript-eslint/ban-ts-comment */
+                    // @ts-ignoreanimationOut={animationOut ?? modalStyleAnimationOut}
                     animationOut={animationOut ?? modalStyleAnimationOut}
                     // eslint-disable-next-line react-compiler/react-compiler
                     useNativeDriver={useNativeDriverProp && useNativeDriver}

src/components/Modal/ReactNativeModal/Container.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
-import Animated, {Easing, SlideInDown, useAnimatedRef, useAnimatedStyle, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
-import useThemeStyles from '@hooks/useThemeStyles';
+import type {ModalProps} from 'react-native-modal';
+import Animated, {Easing, useAnimatedRef, useAnimatedStyle, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
+import type {ThemeStyles} from '@src/styles';
 
 type ContainerProps = Partial<ModalProps> & {
     isVisible: boolean;
@@ -10,54 +11,50 @@
     isHeightCalculated: boolean;
     toggleCalculatedHeight: (value: boolean) => void;
     deviceHeight?: number | undefined | null;
-    style?: any;
+    style?: ThemeStyles;
     onLayout?: (event: LayoutChangeEvent) => void;
-    setMeasuredHeight: (value: number) => void;
+    testName: string;
 };
 
-function Container({isVisible, isContainerOpen, isTransitioning, isHeightCalculated, toggleCalculatedHeight, style, onLayout, setMeasuredHeight, testName, ...props}: ContainerProps) {
-    const styles = useThemeStyles();
+function Container({isVisible, isContainerOpen, isTransitioning, isHeightCalculated, toggleCalculatedHeight, style, onLayout, testName, ...props}: ContainerProps) {
     const animatedRef = useAnimatedRef();
     const [measuredHeight, setMH] = useState<number>(0);
 
-    const translateY = useSharedValue(500);
+    const translateY = useSharedValue(1000);
 
     useEffect(() => {
         if (!isTransitioning) {
             return;
         }
-        // console.log(testName, ' Container: isVisible & translateY', isVisible, isVisible ? 0 : 500);
+        console.log(testName, ' Container: isVisible & translateY & opacity', isVisible, isVisible ? 0 : 500, !isHeightCalculated || (isVisible !== isContainerOpen && !isTransitioning));
+
         // eslint-disable-next-line react-compiler/react-compiler
-        translateY.value = withDelay(0, withTiming(isVisible ? 0 : 500, {duration: 300, easing: Easing.inOut(Easing.ease)}));
-        setMH(0);
-    }, [isVisible, isTransitioning]);
+        translateY.value = withDelay(0, withTiming(isVisible ? 0 : 450, {duration: 300, easing: Easing.inOut(Easing.ease)}));
+        setMH(500);
+    }, [isVisible, isTransitioning, translateY]);
 
     const animatedStyles = useAnimatedStyle(() => {
         return {
             transform: [{translateY: translateY.value}],
-            opacity: !isHeightCalculated || (isVisible !== isContainerOpen && !isTransitioning) ? 0 : 1,
         };
     });
-
-    console.log('props: ', Object.keys(props).join('-'));
     return (
         <Animated.View
             ref={animatedRef}
-            style={[style, animatedStyles]}
+            style={[style, animatedStyles, {flex: 1, height: '100%', flexDirection: 'row'}]}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            {...props.panHandlers}
         >
             <Animated.View
-                // TODO: check this 100%
-                style={{width: '100%'}}
+                style={{width: '100%', flex: 1, alignSelf: 'flex-end'}}
                 onLayout={(event) => {
-                    if (!measuredHeight && event.nativeEvent.layout.height && measuredHeight !== event.nativeEvent.layout.height) {
-                        // translateY.value = 500;
-                        setMH(event.nativeEvent.layout.height);
-                        setMeasuredHeight(event.nativeEvent.layout.height);
-                        toggleCalculatedHeight(true);
+                    const {height} = event.nativeEvent.layout;
+                    if (measuredHeight || !height || measuredHeight === height) {
+                        return;
                     }
+
+                    setMH(height);
+                    toggleCalculatedHeight(true);
                 }}
             >
                 {props.children}