NativeScript navigation Cannot read property 'navigation' of undefined for intro page

Question

I am having problems with navigating to other pages which have not been loaded before. I did not find exact same problem and solution for pure JS.

What I want is to load Intro page with Language selection when app starts for the first time. Than onTap of two available language buttons information is stored using application-settings module. Problem I am having is navigation to desired page when selected language (button) is pressed.

Here is XML:

     <!-- intro/intro-page -->
    <Page navigatingTo="onNavigatingTo" class="page intro-page" xmlns="http://schemas.nativescript.org/tns.xsd">
        <ActionBar class="action-bar">
            <Label class="action-bar-title" text="Select language"></Label>
        </ActionBar>

    <GridLayout columns="*" rows="*" class="page-content">

            <StackLayout class="p-t-15" verticalAlignment="center">
                <Image src="res://logo" height="75" class="action-image"></Image>
                <Label class="m-t-10 text-center" text="Select language"></Label>

                <Button class="btn btn-outline" text="English" tap="English"></Button>
                <Button class="btn btn-outline" text="Croatian" tap="Croatian"></Button>

            </StackLayout>
        </GridLayout>
    </Page>

JS:

    const IntroViewModel = require("./intro-view-model");
    const application = require("tns-core-modules/application");
    const frameModule = require("ui/frame");
    var appSettings = require("application-settings");


    function onNavigatingTo(args) {
        const page = args.object;
        page.bindingContext = new IntroViewModel();

    }


    function english() { 
            appSettings.setBoolean("firstRun", true);
            frameModule.topmost().navigate({
                moduleName: "home/english-page", //"settings/settings-page"        
                transition: {
                    name: "fade"
                }
            }); 

    }
    function croatian() {  
            appSettings.setBoolean("firstRun", true);
            frameModule.topmost().navigate({
                moduleName: "home/croatian-page", //"settings/settings-page"        
                transition: {
                    name: "fade"
                }
            }); 

    }

    exports.onNavigatingTo = onNavigatingTo;
    exports.croatian = croatian;
    exports.english = english;

Code above works if I call intro/intro-page from any other page. But when I call it using defPage = "intro/intro-page"; app-root and code below, it gives me error Cannot read property 'navigation' of undefined

    var defPage = "home/english-page";

    if (appSettings.getBoolean("firstRun", true) === true){  
        defPage = "intro/intro-page";       
    } 

    application.run({ moduleName: defPage });

I have no clue what is going on. I am using NS 6. Not sure if that is a problem.

is it possible for you to create a playground? Playground is updated to support {NS} 6 — Narendra
– Narendra, Commented Aug 1, 2019 at 6:19

Nick Iliev · Accepted Answer · 2019-08-01 07:54:17Z

1

The run method expects entry that contains a Frame. Look at any TypeScript template and you will probably see something like

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

Where app-root.xml is either a Frame or an element that contains a frame (e.g. RadSideDrawer). For example:

<Frame defaultPage="home/home-page"></Frame>

So that said, you can't replace the root frame with a Page as there will be no navigation frame and thus the app will fail with the described error.

answered Aug 1, 2019 at 7:54

Nick Iliev

9,6703 gold badges38 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Iliev Over a year ago

Here is a sample Playground on how you could implement this while uisng navigationgTo on your landing page play.nativescript.org/?template=play-tsc&id=x3FUJF

Maka Over a year ago

thanks for info. Here is what I've recreated. I am getting same error. I am not really sure how to get it sorted properly. play.nativescript.org/?template=play-js&id=pC3U7S&v=55 I have this for now: if (appSettings.getBoolean("firstRun", true) === true){ frameModule.topmost().navigate({ moduleName: "intro/intro-page", clearHistory: true, animated: false }); It sends me back to Intro page. But that "jump" between pages is visible and looks ugly. It takes 100-200ms but still visible. All I'm trying to do is eliminate that.

Collectives™ on Stack Overflow

NativeScript navigation Cannot read property 'navigation' of undefined for intro page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related