diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js index 7287f36e7f2c..d35637958f1d 100644 --- a/src/components/PopoverWithoutOverlay/index.js +++ b/src/components/PopoverWithoutOverlay/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useRef} from 'react'; import {View} from 'react-native'; import {SafeAreaInsetsContext} from 'react-native-safe-area-context'; import {PopoverContext} from '../PopoverProvider'; @@ -8,9 +8,11 @@ import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import getModalStyles from '../../styles/getModalStyles'; import withWindowDimensions from '../withWindowDimensions'; +import usePrevious from '../../hooks/usePrevious'; function Popover(props) { const {onOpen, close} = React.useContext(PopoverContext); + const firstRenderRef = useRef(true); const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles( 'popover', { @@ -23,6 +25,8 @@ function Popover(props) { props.outerStyle, ); + const prevIsVisible = usePrevious(props.isVisible); + React.useEffect(() => { if (props.isVisible) { props.onModalShow(); @@ -37,11 +41,18 @@ function Popover(props) { Modal.onModalDidClose(); } Modal.willAlertModalBecomeVisible(props.isVisible); + + // We prevent setting closeModal function to null when the component is invisible the first time it is rendered + if (prevIsVisible === props.isVisible && (!firstRenderRef.current || !props.isVisible)) { + firstRenderRef.current = false; + return; + } + firstRenderRef.current = false; Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null); // We want this effect to run strictly ONLY when isVisible prop changes // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.isVisible]); + }, [props.isVisible, prevIsVisible]); if (!props.isVisible) { return null;