Please note this to my knowledge only works with NativeScript-Core / PAN (Plain Awesome NativeScript) applications. I do not believe this will work with the Vue or Angular variations of NativeScript. There maybe another way to accomplish this with those variations, and if you know how -- please let me know and I'll update this post.
So I was minding my own business again, and I saw this question pop up in NativeScript GitHub. Take this scenario; you want to have a SideDrawer that is active on all pages.
Seems simple enough you create the /app-root.xml as this:
<nsDrawer:RadSideDrawer xmlns:nsDrawer="nativescript-ui-sidedrawer"><br> <nsDrawer:RadSideDrawer.drawerContent><br> <GridLayout backgroundColor="#ffffff"><br> <Label text="Go to Cool Page" tap="page1"/><br> <Label text="Go to Another Cool Page" tap="page2"/><br> </GridLayout><br> </nsDrawer:RadSideDrawer.drawerContent><br> <nsDrawer:RadSideDrawer.mainContent><br> <Frame defaultPage="/pages/main/main-page"></Frame><br> </nsDrawer:RadSideDrawer.mainContent><br></nsDrawer:RadSideDrawer><br>
But now I need a login page... And my awesome side drawer is now active on the login page. Uh-oh -- it even has a ton of links that go to places and so we don't want that if they haven't even logged in. In fact we probably don't want them to even have access to the side drawer when not logged in...
What is the solution?
My solution, is fairly simple is you revert your code back to close to the default app-root.xml:
Your <strong>app-root.xml</strong> actually is changed to this:
<Frame defaultPage="/pages/login/login-page"/>
That is because we want the main frame of the app to load my login page; in this case my login page will force them to login if they don't already have a valid stored login token... Notice, their is no SideDrawer, because it is no longer the root.. So part one is working great, no side drawer during login...
So now how do we get our cool SideDrawer to be active on the rest of all the pages...
const Application = require('tns-core-modules/application');<br><br>function loginIsValid() {<br> <strong> Application._resetRootView("/pages/root/root");</strong><br>}<br>
Yep, look their -- there is a cool feature in the framework that allows you to REPLACE (or RESET) the root view. So by doing this, my /pages/root/root.xml file now contains the SideDrawer root layout which I displayed at the top of this post.
Notes:
My own personal applications typically are laid out in such a fashion that I have a "pages" folder, and in the "pages" folder I have each separate page js, CSS, and XML. This typically allows me to quickly find the page I want to work on.
Cool post. It's worth noting `_resetRootView()` isn't officially supported and might not work in all scenarios with all the different kinds of root views. Truth is it was intended for testing purposes.
That being said, it makes a lot of sense to use it in a Login scenario since when you login/logout you want to lose all state/history anyway.
The only reason I mention it is because `_resetRootView()` has been around for a long time, figured it wasn't going any where any time soon. Nice to know it is well tested. 😀
I've used this technique in a couple different apps now-- Now that I think about it, in every case it has been for a login scenario exactly like this.