Merge pull request #61462 from linhvovan29546/fix/61003-blank-background-on-desktop-when-use-new-bottom-modal

fix: apply backdrop opacity when using the new modal on desktop

Author: robertjchen

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

@@ -5,6 +5,7 @@ import type {BackdropProps} from '@components/Modal/BottomDockedModal/types';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
@@ -15,6 +16,7 @@ function Backdrop({
     onBackdropPress,
     animationInTiming = CONST.MODAL.ANIMATION_TIMING.DEFAULT_IN,
     animationOutTiming = CONST.MODAL.ANIMATION_TIMING.DEFAULT_OUT,
+    backdropOpacity = variables.overlayOpacity,
 }: BackdropProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -43,6 +45,13 @@ function Backdrop({
         return FadeOut.duration(animationOutTiming);
     }, [animationOutTiming]);
 
+    const backdropStyle = useMemo(
+        () => ({
+            opacity: backdropOpacity,
+        }),
+        [backdropOpacity],
+    );
+
     if (!customBackdrop) {
         return (
             <PressableWithoutFeedback
@@ -51,7 +60,7 @@ function Backdrop({
                 onPress={onBackdropPress}
             >
                 <Animated.View
-                    style={[styles.modalBackdrop, style]}
+                    style={[styles.modalBackdrop, backdropStyle, style]}
                     entering={Entering}
                     exiting={Exiting}
                 />
@@ -64,7 +73,7 @@ function Backdrop({
             entering={Entering}
             exiting={Exiting}
         >
-            <View style={[styles.modalBackdrop, style]}>{!!customBackdrop && customBackdrop}</View>
+            <View style={[styles.modalBackdrop, backdropStyle, style]}>{!!customBackdrop && customBackdrop}</View>
         </Animated.View>
     );
 }

src/components/Modal/BottomDockedModal/index.tsx

@@ -132,9 +132,8 @@ function BottomDockedModal({
             width: deviceWidthProp ?? deviceWidth,
             height: deviceHeightProp ?? deviceHeight,
             backgroundColor: backdropColor,
-            ...(getPlatform() === CONST.PLATFORM.WEB ? {opacity: backdropOpacity} : {}),
         };
-    }, [deviceHeightProp, deviceWidthProp, deviceWidth, deviceHeight, backdropColor, backdropOpacity]);
+    }, [deviceHeightProp, deviceWidthProp, deviceWidth, deviceHeight, backdropColor]);
 
     const onOpenCallBack = useCallback(() => {
         setIsTransitioning(false);
@@ -178,6 +177,7 @@ function BottomDockedModal({
             animationInTiming={animationInTiming}
             animationOutTiming={animationOutTiming}
             animationInDelay={animationInDelay}
+            backdropOpacity={backdropOpacity}
         />
     );
 

src/components/Modal/BottomDockedModal/types.ts

@@ -135,6 +135,9 @@ type BackdropProps = {
 
     /** Timing of animation on exit */
     animationOutTiming?: number;
+
+    /** Opacity of the backdrop */
+    backdropOpacity?: number;
 };
 
 type ContainerProps = {