diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js index fc64d8f38243..051c4ba3f80a 100644 --- a/src/components/Modal/BaseModal.js +++ b/src/components/Modal/BaseModal.js @@ -1,4 +1,4 @@ -import React, {forwardRef, useCallback, useEffect, useMemo} from 'react'; +import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import ReactNativeModal from 'react-native-modal'; @@ -14,6 +14,7 @@ import variables from '../../styles/variables'; import CONST from '../../CONST'; import ComposerFocusManager from '../../libs/ComposerFocusManager'; import useNativeDriver from '../../libs/useNativeDriver'; +import usePrevious from '../../hooks/usePrevious'; const propTypes = { ...modalPropTypes, @@ -55,6 +56,9 @@ function BaseModal({ const safeAreaInsets = useSafeAreaInsets(); + const isVisibleRef = useRef(isVisible); + const wasVisible = usePrevious(isVisible); + /** * Hides modal * @param {Boolean} [callHideCallback=true] Should we call the onModalHide callback @@ -76,20 +80,25 @@ function BaseModal({ ); useEffect(() => { - Modal.willAlertModalBecomeVisible(isVisible); - - // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu - Modal.setCloseModal(isVisible ? onClose : null); - }, [isVisible, onClose]); + isVisibleRef.current = isVisible; + if (isVisible) { + Modal.willAlertModalBecomeVisible(true); + // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu + Modal.setCloseModal(onClose); + } else if (wasVisible && !isVisible) { + Modal.willAlertModalBecomeVisible(false); + Modal.setCloseModal(null); + } + }, [isVisible, wasVisible, onClose]); useEffect( () => () => { // Only trigger onClose and setModalVisibility if the modal is unmounting while visible. - if (isVisible) { - hideModal(true); - Modal.willAlertModalBecomeVisible(false); + if (!isVisibleRef.current) { + return; } - + hideModal(true); + Modal.willAlertModalBecomeVisible(false); // To prevent closing any modal already unmounted when this modal still remains as visible state Modal.setCloseModal(null); },