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.

Examples

Example: Simple Page

  • Vue

  • Svelte

  • Plain

  • React

<Page>
  <ActionBar title="My App" />
  <GridLayout>
    <label text="My Content" />
  </GridLayout>
</Page>
<page>
  <actionBar title="My App" />
  <gridLayout>
    <label text="My Content" />
  </gridLayout>
</page>
<Page>
  <ActionBar title="My App" />
  <GridLayout>
    <label text="My Content" />
  </GridLayout>
</Page>
<page>
  <actionBar title="My App" />
  <gridLayout>
    <label>My Content</label>
  </gridLayout>
</page>

Example: 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:

  • Plain

  • Vue

  • XML

  • TypeScript

<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)
}

  • HTML

  • JavaScript

<Page @loaded="greet">
  <ActionBar title="My App" />
  <GridLayout>
    <label text="My Content" />
  </GridLayout>
</Page>
export default {
  methods: {
    greet() {
      alert('Hello!').then(() => {
        console.log('Dialog closed')
      })
    }
  }
}

Developers coming from a web background would usually reach for the mounted lifecycle hook Vue provides, however in NativeScript the application, and certain elements might not yet be loaded when the mounted hook is executed, thus certain actions such as alerts, dialogs, navigation etc. are not possible inside the mounted hook. To work around this limitation, the loaded event may be used, which only fires after the application is ready. In this case, we are using the loaded event of the <Page> element, but this event is available for all NativeScript elements.

Props

Name Type Description

actionBarHidden

Boolean

Shows or hides the <ActionBar> for the page. + Default value: false.

backgroundSpanUnderStatusBar

Boolean

Gets or sets whether the background of the page spans under the status bar. + Default value: false.

androidStatusBarBackground

Color

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

enableSwipeBackNavigation

Boolean

(iOS-only) Gets or sets whether the page can be swiped back on iOS. + Default value: true.

statusBarStyle

String

Gets or sets the style of the status bar. + Valid values: + light, + dark.

...Inherited

Inherited

Additional inherited properties are not shown. Refer to the API Reference

Events

Name Description

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.

The events loaded, unloaded and layoutChanged are UI component lifecycle events and are universal for all classes that extend the View class (including Page). They can be used with all NativeScript elements, (e.g. layouts, buttons, UI plugins, etc.).

Native component

Android iOS

org.nativescript.widgets.GridLayout

UIViewController