CODEWITHSUNDEEP
navigationnativescript
Maka
Maka

Reputation: 663

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

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.

Upvotes: 0

Views: 387

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

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.

Upvotes: 1

Related Questions