[SOLVED] Open second modal when first modal is closed using callback in react-native

Open second modal when first modal is closed using callback in react-native

I am handling multiple Modals in react native where i want to open the second Modal when i close the first Modal. This works like a charm on android but when i now debug the app for ios i have found that it is not working as intended as the first modal just closes and the app becomes unresponsive.

This is a known problem with Modals in ios from what i understand.

I could use setTimeout to fix the problem but this seems like a hacky solution that can cause problems overtime.

Is there really no callback that i can make instead so i can open the second modal when the first one have closed. It seems that onModalHide have been removed which could have been used otherwise.

Any help is greatly appriciated.

Solution

You can use onDismiss props and implement something like this :

const [isFirstModalClosed, setIsFirstModalClosed] = useState(false);
const openSecondModal = () => {
  // code to open the second modal
}

<Modal
  visible={true}
  onDismiss={() => setIsFirstModalClosed(true)}
>
  // contents of the first modal
</Modal>

{isFirstModalClosed && (
  <Modal visible={true} onDismiss={openSecondModal}>
    // contents of the second modal
  </Modal>
)}