Modal Navigation and close

Question

I have two scenarios

Opening a modal and after some navigation inside the modal, I need to close the modal however when I call this.$modal.close() in the last page of navigation utilising always the same frame the modal does not close.
Is there a way where you have multiple modals (one opening the next one) and at the last one, close them all? On android I just wait for each modal promise to be fulfilled but on iOS this does not work.

Here is a sample of both scenarios https://play.nativescript.org/?template=play-vue&id=OVxmoC&v=2

Manoj Manoj · Accepted Answer · 2019-05-13T20:21:38

You can call this.$modal.close() only form the root of modal component, if you call it from any other nested levels, it will be simply ignored. If you really want to close the modal after navigation, I think you must pass the $modal reference down the navigation tree, may be via props. You may even consider using Event Bus / Global Service if that's easier for you.

Modal.vue

           this.$navigateTo(Secondary, {
                frame: "modal-frame",
                props: {
                    parentModal: this.$modal
                }
            });

Secondary.vue

export default {
    props: ["parentModal"],
    data() {
        return {};
    },
    methods: {
        onTap: function() {
            if (this.parentModal) this.parentModal.close();
            else this.$modal.close();
        }
    }
};

Updated Playground

Modal Navigation and close

1 Answers