The Nativescript RootLayout and Nativescript-Vue
So, if you follow Nativescript closely, the release note for Nativescript 8 introduced a new layout, RootLayout (see release note here) and documentation on usage here
Adding all of the info on why this new Layout is great will make the post too lengthy. The focus here is on RootLayout usage in Nativescript-vue, specifically, we will focus on two common challenges:
- How to get a View from a SFC (the Open, close bringToFront methods of the RootLayout requires a Nativescript View instance),
- The use of a global mixin to provide a readily available service that can be called from any component.
To add a a bit of structure to this post, we re-produce the work done by William Juan (official demo app for Root Layout linked in the documentation) using Angular, but this time, we will use Vue.
How To get NativeScript View from a SFC
Basics first: take a quick look at the RootLayout API below
Observe the open, close, bringToFront methods require a View instance. A quick look at the usage sample on the release page
Lets see what the content of the getPopup method looks like
What we really want to do is have the freedom to create layout to be used in sidebar or bottom bar etc, using the SFC we’ve come to love.
To do this, we quickly remember the showModal method, found in the official Nativescript-Vue documentation
This is the exact signature we want, with the showModal method, we just pass Component (a SFC) to the showModal method, and the content magically shows in the modal. For this to work, the code that gets a Nativescript View instance out of a SFC must have been written. Well, since the Nativescript code is open source, we can check out the implementation of the showModal method
And that is it. In my next post, I will show how this method and a number of other functions are extracted into a mixin.
Thank you.
