Page

<Page> is a UI component that represents an application screen. NativeScript apps typically consist of one or more <Page> that wrap content such as an <ActionBar> and other UI widgets. <Page> provides navigation events such as navigatedTo. See events for more.

Creating a Page #

<Page>
  <ActionBar title="My App" />
  <GridLayout>
    <Label text="My Content" />
  </GridLayout>
</Page>

Getting current page reference #

NativeScript provides various ways to access the current Page instance.

Via Page Eventes #

// loaded event
onPageLoaded(args: LoadEventData) {
    const page = args.object;
}

// navigatedTo event
export function onNavigatedTo(args) {
    const page = args.object;
}

Via the page property of a View instance #

onTap(args: EventData) {
    const btn = args.object as Button
    const page: Page = btn.page;
}

Via the currentPage property of a Frame instance #

const currentPage: Page = Frame.topmost().currentPage

See Getting a Frame instance for more ways to get a Frame instance.

Using the loaded event for triggering UI changes #

A typical scenario is performing UI changes after the page is loaded. The recommended way to do it is by using the loaded event, triggered by NativeScript when the page is fully loaded:

<Page
  loaded="onPageLoaded"
  navigatedFrom="onNavigatedFrom"
  navigatedTo="onNavigatedTo"
  navigatingFrom="onNavigatingFrom"
  navigatingTo="onNavigatingTo"
  unloaded="onUnloaded"
  layoutChanged="onLayoutChanged"
>
  <Page.actionBar>
    <ActionBar title="Page Creation" />
  </Page.actionBar>
  <!-- Each page can have only a single root view -->
  <StackLayout>
    <!-- content here -->
    <Label text="Hello, world!" />
  </StackLayout>
</Page>

import { EventData, Page } from '@nativescript/core'

export function onPageLoaded(args: EventData): void {
  console.log('Page Loaded')
  const page = args.object as Page
}
export function onLayoutChanged(args: EventData) {
  console.log(args.eventName)
  console.log(args.object)
}

export function onNavigatedTo(args: NavigatedData) {
  console.log(args.eventName)
  console.log(args.object)
  console.log(args.context)
  console.log(args.isBackNavigation)
}

export function onNavigatingFrom(args: NavigatedData) {
  console.log(args.eventName)
  console.log(args.object)
  console.log(args.context)
  console.log(args.isBackNavigation)
}

export function onUnloaded(args: EventData) {
  console.log(args.eventName)
  console.log(args.object)
}

export function onNavigatedFrom(args: NavigatedData) {
  console.log(args.eventName)
  console.log(args.object)
  console.log(args.context)
  console.log(args.isBackNavigation)
}

Props #

actionBar #

actionBar: ActionBar = page.actionBar

Gets the ActionBar for this page.

actionBarHidden #

<Page actionBarHidden="true">

page.actionBarHidden = true

Shows or hides the <ActionBar> for the page. Defaults to false.

frame #

frame: Frame = page.frame

The Frame instance containing the page.

navigationContext #

navigationContext = page.navigationContext

A property that is used to pass data to another page.

backgroundSpanUnderStatusBar #

Gets or sets whether the background of the page spans under the status bar. Defaults to false.

androidStatusBarBackground #

<Page androidStatusBarBackground="blue">

(Android-only) Gets or sets the color of the status bar on Android devices.

enableSwipeBackNavigation #

<Page enableSwipeBackNavigation="false">

page.enableSwipeBackNavigation = false

(iOS-only) Gets or sets whether the page can be swiped back on iOS. Defaults to true.

statusBarStyle #

Gets or sets the style of the status bar.

<Page statusBarStyle="light">

page.statusBarStyle = 'light'

Valid values:lightor dark.

...Inherited #

For additional inherited properties, refer to the API Reference.

Events #

loaded #

Emitted after the page has been loaded.

navigatedFrom #

Emitted after the app has navigated away from the current page.

navigatedTo #

Emitted after the app has navigated to the current page.

navigatingFrom #

Emitted before the app has navigated away from the current page.

navigatingTo #

Emitted before the app has navigated to the current page.

Native component #