Merge pull request #61372 from software-mansion-labs/fix/modal-status-bar

Fix color of top status bar when opening modals

Author: mountiny

src/components/Modal/BaseModal.tsx

@@ -53,6 +53,8 @@ function BaseModal(
         innerContainerStyle = {},
         outerStyle,
         onModalShow = () => {},
+        onModalWillShow,
+        onModalWillHide,
         propagateSwipe,
         fullscreen = true,
         animationIn,
@@ -276,7 +278,11 @@ function BaseModal(
                         onModalShow={handleShowModal}
                         propagateSwipe={propagateSwipe}
                         onModalHide={hideModal}
-                        onModalWillShow={saveFocusState}
+                        onModalWillShow={() => {
+                            saveFocusState();
+                            onModalWillShow?.();
+                        }}
+                        onModalWillHide={onModalWillHide}
                         onDismiss={handleDismissModal}
                         onSwipeComplete={() => onClose?.()}
                         swipeDirection={swipeDirection}

src/components/Modal/BottomDockedModal/index.tsx

@@ -101,7 +101,6 @@ function BottomDockedModal({
 
     useEffect(
         () => () => {
-            onModalWillHide();
             if (handleRef.current) {
                 InteractionManager.clearInteractionHandle(handleRef.current);
             }

src/components/Modal/index.tsx

@@ -21,7 +21,6 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     };
 
     const hideModal = () => {
-        setStatusBarColor(previousStatusBarColor);
         onModalHide();
         if ((window.history.state as WindowState)?.shouldGoBack) {
             window.history.back();
@@ -33,6 +32,21 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     });
 
     const showModal = () => {
+        if (shouldHandleNavigationBack) {
+            window.history.pushState({shouldGoBack: true}, '', null);
+            window.addEventListener('popstate', handlePopStateRef.current);
+        }
+        onModalShow?.();
+    };
+
+    useEffect(
+        () => () => {
+            window.removeEventListener('popstate', handlePopStateRef.current);
+        },
+        [],
+    );
+
+    const onModalWillShow = () => {
         const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
         const isFullScreenModal =
@@ -46,27 +60,22 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
             // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
             setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
         }
-
-        if (shouldHandleNavigationBack) {
-            window.history.pushState({shouldGoBack: true}, '', null);
-            window.addEventListener('popstate', handlePopStateRef.current);
-        }
-        onModalShow?.();
+        rest.onModalWillShow?.();
     };
 
-    useEffect(
-        () => () => {
-            window.removeEventListener('popstate', handlePopStateRef.current);
-        },
-        [],
-    );
+    const onModalWillHide = () => {
+        setStatusBarColor(previousStatusBarColor);
+        rest.onModalWillHide?.();
+    };
 
     return (
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
             onModalHide={hideModal}
             onModalShow={showModal}
+            onModalWillShow={onModalWillShow}
+            onModalWillHide={onModalWillHide}
             avoidKeyboard={false}
             fullscreen={fullscreen}
             useNativeDriver={false}