search

akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.28k stars 951 forks source link

Modal stuck open when no longer rendered #718

Closed AndyHubert closed 4 years ago

AndyHubert commented 4 years ago

Issue type

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

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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