Skip to content
15 changes: 13 additions & 2 deletions src/components/PopoverWithoutOverlay/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
{
Expand All @@ -23,6 +25,8 @@ function Popover(props) {
props.outerStyle,
);

const prevIsVisible = usePrevious(props.isVisible);

React.useEffect(() => {
if (props.isVisible) {
props.onModalShow();
Expand All @@ -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;
Expand Down