How to use the tabris.NavigationView function in tabris

import {Button, Composite, NavigationView, Page, SearchAction, TextView, contentView, device} from 'tabris';

// Create an action on NavigationView to perform a search with dynamic proposals

const PROPOSALS = ['baseball', 'batman', 'battleship', 'bangkok', 'bangladesh', 'banana'];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const page = new Page({
  title: 'Search action'
}).appendTo(navigationView);

const searchBox = new Composite({
  centerX: 0, centerY: 0
}).appendTo(page);

const textView = new TextView().appendTo(searchBox);

const action = new SearchAction({
  title: 'Search',
  image: {

import {NavigationView, Button, Page, Action} from 'tabris';


let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView = new NavigationView();
const badlyTypedNavigationView2: NavigationView = new NavigationView();
const badlyTypedNavigationView3: NavigationView = new NavigationView();
const typedNavigationView: NavigationView = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,
not assignable to parameter

import {NavigationView, Button, Page, Action} from 'tabris';


let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView = new NavigationView();
const badlyTypedNavigationView2: NavigationView = new NavigationView();
const badlyTypedNavigationView3: NavigationView = new NavigationView();
const typedNavigationView: NavigationView = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,

let widget = new NavigationView();
widget.append(new Button());

class CustomPage extends Page {
  public foo: string;
}

class CustomAction extends Action {
  public bar: string;
}

const badlyTypedNavigationView1: NavigationView = new NavigationView();
const badlyTypedNavigationView2: NavigationView = new NavigationView();
const badlyTypedNavigationView3: NavigationView = new NavigationView();
const typedNavigationView: NavigationView = new NavigationView();
typedNavigationView.append(new Action());
typedNavigationView.append(new Page());

/*Expected
(5,
'Button' is not assignable to parameter
(15,
does not satisfy the constraint
(16,
does not satisfy the constraint
(17,
does not satisfy the constraint
(19,
not assignable to parameter
(20,
not assignable to parameter

function showPopover() {
  const popover = new Popover({width: 300, height: 400, anchor: button})
    .on('close', () => console.log('Popover closed'))
    .open();
  const navigationView = new NavigationView({
    layoutData: {left: 0, right: 0, top: 0, bottom: 0},
    navigationAction: new Action({
      title: 'Close',
      image: {
        src: device.platform === 'iOS' ? 'resources/close-black-24dp@3x.png' : 'resources/close-white-24dp@3x.png',
        scale: 3
      }
    }).on('select', () => popover.close())
  }).appendTo(popover.contentView);
  const page = new Page({title: 'Popover'}).appendTo(navigationView);
  new TextView({centerX: 0, centerY: 0, text: 'Hello popover'}).appendTo(page);
}

const {Button, Page, NavigationView, ScrollView, contentView} = require('tabris');
const ToastPage = require('./ToastPage');
const SharingPage = require('./SharingPage');
const MotionPage = require('./MotionPage');
const NetworkPage = require('./NetworkPage');
const MediaPage = require('./MediaPage');
const CameraPage = require('./CameraPage');

const navigationView = new NavigationView({left: 0, top: 0, right: 0, bottom: 0})
  .appendTo(contentView);

const mainPage = new Page({
  title: 'Cordova Examples'
}).appendTo(navigationView);

const contentContainer = new ScrollView({
  left: 0, top: 0, right: 0, bottom: 0, padding: 16
}).appendTo(mainPage);

[
  SharingPage,
  ToastPage,
  MotionPage,
  NetworkPage,
  CameraPage,

import {Action, NavigationView, contentView, device} from 'tabris';

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

createAction('Close', getImage('close'), 'navigation');
createAction('Settings', getImage('settings'), 'default');
createAction('Share', getImage('share'), 'overflow');

function createAction(title, image, placement) {
  new Action({
    title,
    placement,
    image: {src: image, scale: 3}
  }).appendTo(navigationView);
}

function getImage(image) {

const {CollectionView, Composite, ImageView, NavigationView, Page, TextView, WebView, contentView} = require('tabris');

const ITEM_FETCH_COUNT = 25;

let loading;
let items = [];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const page = new Page({
  title: 'Reddit - Pets'
}).appendTo(navigationView);

const collectionView = new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  background: '#f5f5f5',
  refreshEnabled: true,
  cellHeight: 96,
  cellType: index => items[index].loading ? 'loading' : 'normal',
  createCell: (type) => {
    if (type === 'normal') {
      return createItemCell();

const animationPage = require('./simple');
const peoplePage = require('./people');
const trayPage = require('./tray');
const {Button, NavigationView, Page, contentView} = require('tabris');

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);

const mainPage = new Page({
  title: 'Animation Examples'
}).appendTo(navigationView);

[animationPage, peoplePage, trayPage].forEach((page) => {
  new Button({
    left: 8, top: 'prev() 8', right: 8,
    text: page.title
  }).on('select', () => page.appendTo(navigationView))
    .appendTo(mainPage);
});

import {
  Button, CollectionView, Composite, ImageView, NavigationView, Page, TextView, contentView, drawer
} from 'tabris';

const PAGE_CONFIGS: Array<{title: string, icon: string}> = [
  {title: 'Basket', icon: 'resources/page.png'},
  {title: 'Checkout', icon: 'resources/page.png'}
];

const navigationView = new NavigationView({
  left: 0, top: 0, right: 0, bottom: 0,
  drawerActionVisible: true,
  pageAnimation: 'none'
}).appendTo(contentView);

drawer.enabled = true;

new ImageView({
  left: 0, right: 0, top: 0, height: 200,
  image: 'resources/landscape.jpg',
  scaleMode: 'stretch'
}).appendTo(drawer);

const pageSelector = new CollectionView({
  left: 0, top: 'prev()', right: 0, bottom: 0,
  itemCount: PAGE_CONFIGS.length,