Issue with navigateTo in NativeScript Vue modal

0
votes

I am attempting to use navigateTo() within a modal in my NativeScript Vue application.

My modal components is wrapped in a <Frame>, which I understand is how to allow it to be a navigation controller. However, when I attempt to navigate to the sub-component of the modal, it actually opens behind the modal in the main frame.

You can see this behavior here: https://play.nativescript.org/?template=play-vue&id=azowAE&v=3

Click the "Open Modal" button and then click the "Show subpage" button. Seemingly nothing happens, but if you then click the "Close" button, you'll see the sub page opened behind the modal.

2
nativescriptnativescript-vue

2 Answers

2
votes

In order to navigate to a frame that is used in a modal, you should utilize the second argument to the $navigateTo method. This can reference a frame by reference or id. The easiest way I found was to give the frame in the modal an id:

<Frame id="modal-frame">...</Frame>

Then you can navigate inside the modal as as example

this.$navigateTo(OtherComponent, {frame: 'modal-frame'});

Note, you do not put a # in front of the ID like a CSS selector. Only the id value.

See for code reference: https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48

2
votes

Another cause for this same issue is when the sub-component that the modal is navigating to isn't wrapped in a <Page> tag.

When you add a catch to your navigate code then it gives the following errors, depending on whether you use the ref or id.

this.$navigateTo(NewModal, {
  frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));

"frame-ref" throws TypeError: Cannot read property 'id' of undefined

"frame-id" throws TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function