frameModule.topmost() in The NativeScript Book (using v4.0.0)


#1

I’m working through The NativeScript Book by the Bronstein brothers. It seems very good as a tutorial.

However I’ve hit an issue right at the beginning as I’ve gone back to work through the code in chapter 4.

<Page>
  <StackLayout>
    <Label text="Welcome to the Tekmo App!" />
    <Button text="About" tap="onTap" />
  </StackLayout>
</Page>
const frameModule = require("ui/frame"); // #A

function onTap() {
    console.log("Topmost: " + frameModule.topmost());
    frameModule.topmost().navigate("views/about/about");  //#B 
}

This prints JS: Topmost: undefined to the console before throwing an exception TypeError: Cannot read property 'navigate' of undefined.

This is using NativeScript 4.0.0 so presumably something has changed since the book was written. However, the ui/frame documentation doesn’t mention any changes.

What am I doing wrong?


#2

FWIW, that code works fine on the Playground using NativeScript version 3.4.1. I can’t see anything in the CHANGELOG that should affect .topmost().


#3

OK, solved it. Leaving the message here for the next noob that get caught by it. :slight_smile:

My app.js used .run() rather than the deprecated .start()

application.run({ moduleName: "views/home/home" });

I changed this to

application.run({ moduleName: "app-root" }); 

And created app-root.xml containing

<Frame defaultPage="views/home/home" id="topmost">
</Frame>

Now frameModule.topmost() worked as expected. But as .topmost() is also deprecated, I changed the call to

frameModule.getFrameById('topmost').navigate('views/about/about');

And everything started working.

I found the reference here: NativeScript 4.0 Changes.


#4

You can also use this trick described here: