TabView: "TypeError: this.page.frame._getNavBarVisible is not a function" when swiping left and then right

[dragGH102]

I am using TabView component.
Apparently the issues I got is due to including pages inside tabItem content (xml includes)

I created a sample project to show the issue: https://github.com/dragGH102/nativescript-sample-tab-view

How to reproduce: swipe left-left (until third tab) and then right (tested on Android)

Error stacktrace:

com.tns.NativeScriptException: 
Calling js method instantiateItem failed

TypeError: this.page.frame._getNavBarVisible is not a function
File: "/data/data/org.nativescript.nativescriptsampletabview/files/app/tns_modules/ui/action-bar/action-bar.js, line: 124, column: 49

StackTrace: 
    Frame: function:'ActionBar.update', file:'/data/data/org.nativescript.nativescriptsampletabview/files/app/tns_modules/ui/action-bar/action-bar.js', line: 124, column: 50
    Frame: function:'ActionBar._createUI', file:'/data/data/org.nativescript.nativescriptsampletabview/files/app/tns_modules/ui/action-bar/action-bar.js', line: 118, column: 14
    Frame: function:'View._onContextChanged', file:'/data/data/org.nativescript.nativescriptsampletabview/files/app/tns_modules/ui/core/view.js', line: 202, column: 14
    Frame: function:'View._onAttached', file:'/data/data/org.nativescript.nativescriptsampletabview/files/app/tns_modules/ui/core/view.js', line: 160, column: 14
    Frame: function:'eachChild', file:'/data/data/org.nativescript.nativ

[enchev]

Hey @dragGH102,

Please use some layout as root for your custom components instead Page. You do not need also the StackLayout, TabView can be assigned directly as Page content.

[dragGH102]

@enchev thank you.
Apparently using a DockLayout/StackLayout directly instead of <Page> + <Dock/StackLayout>solved the issue.
Just for information: I'm using instead of a direct layout also for modals (showModal()).is it appropriate (or better) to remove also for modals?

Also, when defining the binding context (bindingContext) and using getViewById(<other_layout>, id), do they still work with a non-page container?

e.g.

includes/modal1/modal1.xml

<Page loaded="loaded"> <!-- remove this -->
    <StackLayout id="modal-container">
        <Label id="my-id" text="{{ contextElement }}" />
    </StackLayout>
</Page> <!-- remove this -->

includes/modal1/modal1.ts (or the page included in TabView)

import ObservableEventData = require("data/observable");
import observableModule = require("data/observable");

import {getViewById} from "ui/core/view";

let includeContainer;

let pageData = new observableModule.Observable({
    contextElement: "123"
});

exports.loaded = function(eventData: ObservableEventData) {
    includeContainer = eventData.object;
    includeContainer.bindingContext = pageData;
    getViewById(includeContainer, "my-id").height = 80;
};

Apparently everything works but I want to make sure it's the right way to make it

Thank you

[enchev]

Hey @dragGH102,

getViewById() should work normally without page. For modal pages you will still need Page tag however you can reuse content as custom components.

[chogarcia]

I am experiencing the same error.
I am just trying to use Angular2 hello world example and from there implement TabView.

@Component({
    selector: "my-app",
    template: `
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <TabView>
    <TabView.items>
      <TabViewItem title="First">
        <TabViewItem.view>
          <StackLayout class="tab-content">
            <Label text="First View" class="title"></Label>
            <Label text="This is the content of the first tab." textWrap="true"></Label>
          </StackLayout>
        </TabViewItem.view>
      </TabViewItem>
      <TabViewItem title="Second">
        <TabViewItem.view>
          <StackLayout class="tab-content">
            <Label text="Second View" class="title"></Label>
            <Label text="This is the content of the second tab." textWrap="true"></Label>
          </StackLayout>
        </TabViewItem.view>
      </TabViewItem>
    </TabView.items>
  </TabView>
</Page>
`,
})
export class AppComponent {
    public message: string = "Hello, Angular!";
}

Getting
EXCEPTION: TypeError: this.page.frame._getNavBarVisible is not a function

If I do what you said, with a Layout, no errors but tabs don't show up.

Would you kindly provide an example?

On a side note, I jumped from Ionic2 to NativeScript because of performance issues. I have being testing all of your app samples and they are slow on Nexus4. Is there something that I have to consider here?

[chogarcia]

Digging a bit more, and testing same behaviour without Angular2, it works.

[jvzanatta]

+1

code
`

    <!--Header-->
    <ActionBar row="0" class="header" title="TCCTreino">
        <ActionItem ios.position="right">
            <Button class="actionbar-button" text="Settings"></Button>
        </ActionItem>
    </ActionBar>

    <GridLayout row="1" class="mid" columns="auto, *">
        <Image col="0" class="img-body" src="~/images/body.jpeg"></Image>
        <StackLayout col="1">
            <Label class="user-data" [text]="user.name"></Label>
            <Label class="user-data" [text]="user.email"></Label>
        </StackLayout>
    </GridLayout>

    <StackLayout row="2">
        <Button class="actionbar-button" text="Settings"></Button>
    </StackLayout>

</GridLayout>

`

log

JS: EXCEPTION: Error: Uncaught (in promise): TypeError: this.page.frame._getNavBarVisible is not a function

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.