fix modal backdrop animation changes

Author: jmusial

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

@@ -54,17 +54,19 @@ function Backdrop({
 
     if (!customBackdrop) {
         return (
-            <PressableWithoutFeedback
-                accessible
-                accessibilityLabel={translate('modal.backdropLabel')}
-                onPress={onBackdropPress}
+            <Animated.View
+                style={[styles.modalBackdrop, backdropStyle, style]}
+                entering={Entering}
+                exiting={Exiting}
             >
-                <Animated.View
-                    style={[styles.modalBackdrop, backdropStyle, style]}
-                    entering={Entering}
-                    exiting={Exiting}
-                />
-            </PressableWithoutFeedback>
+                <PressableWithoutFeedback
+                    accessible
+                    accessibilityLabel={translate('modal.backdropLabel')}
+                    onPress={onBackdropPress}
+                >
+                    <View style={[styles.modalBackdrop, backdropStyle, style]} />
+                </PressableWithoutFeedback>
+            </Animated.View>
         );
     }
 

src/components/Modal/BottomDockedModal/Container/index.web.tsx

@@ -12,9 +12,7 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
     const isInitiated = useSharedValue(false);
 
     useEffect(
-        () => () => {
-            setTimeout(onCloseCallBack, animationOutTiming);
-        },
+        () => () => onCloseCallBack(),
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [],
     );
@@ -53,16 +51,12 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
 
     return (
         <Animated.View
-            style={[style, styles.modalContainer]}
+            style={[style, styles.modalContainer, styles.modalAnimatedContainer, animatedStyles]}
+            exiting={Exiting}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
-            <Animated.View
-                style={[styles.modalAnimatedContainer, animatedStyles]}
-                exiting={Exiting}
-            >
-                {props.children}
-            </Animated.View>
+            {props.children}
         </Animated.View>
     );
 }

src/components/Modal/BottomDockedModal/index.tsx

@@ -37,7 +37,6 @@ function BottomDockedModal({
     ...props
 }: ModalProps) {
     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);
@@ -104,28 +103,27 @@ function BottomDockedModal({
             onModalWillHide();
 
             setIsVisibleState(false);
-            setIsContainerOpen(false);
         },
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [],
     );
 
     useEffect(() => {
-        if (isVisible && !isContainerOpen && !isTransitioning) {
+        if (isVisible && !isVisibleState && !isTransitioning) {
             handleRef.current = InteractionManager.createInteractionHandle();
             onModalWillShow();
 
             setIsVisibleState(true);
             setIsTransitioning(true);
-        } else if (!isVisible && isContainerOpen && !isTransitioning) {
+        } else if (!isVisible && isVisibleState && !isTransitioning) {
             handleRef.current = InteractionManager.createInteractionHandle();
             onModalWillHide();
-
-            setIsVisibleState(false);
             setIsTransitioning(true);
+        } else if (!isVisible && isVisibleState && isTransitioning) {
+            setIsVisibleState(false);
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [isVisible, isContainerOpen, isTransitioning]);
+    }, [isVisible, isTransitioning, isVisibleState]);
 
     const backdropStyle: ViewStyle = useMemo(() => {
         return {
@@ -137,7 +135,6 @@ function BottomDockedModal({
 
     const onOpenCallBack = useCallback(() => {
         setIsTransitioning(false);
-        setIsContainerOpen(true);
         if (handleRef.current) {
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
@@ -146,7 +143,6 @@ function BottomDockedModal({
 
     const onCloseCallBack = useCallback(() => {
         setIsTransitioning(false);
-        setIsContainerOpen(false);
         if (handleRef.current) {
             InteractionManager.clearInteractionHandle(handleRef.current);
         }
@@ -187,12 +183,10 @@ function BottomDockedModal({
                 pointerEvents="box-none"
                 style={[styles.modalBackdrop, styles.modalContainerBox]}
             >
-                {isVisibleState && (
-                    <>
-                        {hasBackdrop && backdropView}
-                        {containerView}
-                    </>
-                )}
+                <>
+                    {hasBackdrop && backdropView}
+                    {containerView}
+                </>
             </View>
         );
     }
@@ -203,7 +197,7 @@ function BottomDockedModal({
                 transparent
                 animationType="none"
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                visible={isVisibleState || isTransitioning || isContainerOpen !== isVisibleState}
+                visible={isVisibleState || isTransitioning}
                 onRequestClose={onBackButtonPress}
                 statusBarTranslucent={statusBarTranslucent}
                 testID={testID}