As I develop an app, I encounter an issue with Modal usage across different screens. I have created a universal component for handling all Modals. By passing JSX and toggling visibility based on a Global variable, the problem arises when switching screens. The Modal from the previous screen remains visible in the background.
Although I attempted to control visibility using both a Global variable and a local one, the Modal still fails to close properly.
Here is the common Modal component I am using:
render() {
let { GlobalStore, renderContent = () => {}, modalStyle, modalHeight = '50%' } = this.props;
return (
<Modal
isVisible={GlobalStore.showModal}
backdropColor={Constants.COLORS.BLACK}
backdropOpacity={0.4}
onBackdropPress={() => GlobalStore.toggleModal(false)}
style={[styles.bottomModal,modalStyle]}>
<View style={[styles.modalContent,{height: modalHeight}]}>
{renderContent}
</View>
</Modal>
)
}
}
and implementation on screens:
{this.openModal?
<CustomModal visible={GlobalStore.showModal&&this.openModal}
modalHeight = {this.modalHeight} renderContent =
{this.ModalContent()}/>
:
null
}
My goal is to close previous modals that appear in the background without creating separate files for each Modal. Any assistance would be greatly appreciated. Thank you.