Modal stuck open when no longer rendered

[AndyHubert]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:
A visible Modal component remains displayed, even after the its parent stops rendering it.

Expected behavior:
When a Modal component is no longer rendered, it should no longer be displayed.

Steps to reproduce:
Render a Modal component with visible={true}. Then, make a state change (whether via a button or timeout) by which the Modal component is no longer returned by the parent component's render function. The Modal continues to be displayed.

Related code:
https://github.com/akveo/react-native-ui-kitten/blob/master/src/framework/ui/modal/modal.component.tsx

A componentWillUnmount lifecycle hook is needed to call ModalService.hide.

[artyorsh]

This could be my misunderstanding, but I guess opening and closing modals should be managed manually. Can you share more details about the use case and related code if possible?

[AndyHubert]

Here is a silly example. Note that the Modal is forever stuck when "Delete me" is clicked.

https://snack.expo.io/r1F2sWfjr

The real world instance in which this is causing problems for me is with a list of items which each have a delete button. When the user clicks to delete, I want to confirm this action with a Modal. However the Modal gets stuck when the delete action is confirmed and the state is mutated.

[artyorsh]

@AndyHubert I guess this is not a bug but rather a misunderstanding of how this feature can be implemented. But thanks for reporting - it's a really interesting use-case 👍 For me it's more like a feature, and I guess we can think about implementing this in the future.

I think, the better way to achieve this behavior currently is to create a placeholder element for each element in buttons array and do not remove items from this array. Instead, you can work with, for example, booleans to determine whether the button should be rendered (and modal displayed) or not. See it in action: https://snack.expo.io/@art.yorsh/ui-kitten---dynamic-modals-(v4.2)

[imdadturi]

@artyorsh your given example is not working on android device, when modal is displayed , then it stays displayed, Delete Me button gets disabled.