Another Vue of NativeScript Webinar is now on YouTube
Page

This is an overview of the most common usage of Page. For more information about the available properties, methods, or events, head over to the complete API documentation for 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.


A single page

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

Using the loaded event for triggering UI changes

A typical scenario is performing UI changes after tha 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="greet">
  <ActionBar title="My App" />
  <GridLayout>
    <Label text="My Content"/>
  </GridLayout>
</Page>
export default {
  methods: {
    greet() {
      alert('Hello!').then(() => {
        console.log('Dialog closed')
      })
    }
  }
}

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

NameTypeDescription
actionBarHiddenBooleanShows or hides the <ActionBar> for the page.
Default value: false.
backgroundSpanUnderStatusBarBooleanGets or sets whether the background of the page spans under the status bar.
Default value: false.
androidStatusBarBackgroundColor(Android-only) Gets or sets the color of the status bar on Android devices.
enableSwipeBackNavigationBoolean(iOS-only) Gets or sets whether the page can be swiped back on iOS.
Default value: true.
statusBarStyleStringGets or sets the style of the status bar.
Valid values:
light,
dark.

Events

NameDescription
loadedEmitted after the page has been loaded.
navigatedFromEmitted after the app has navigated away from the current page.
navigatedToEmitted after the app has navigated to the current page.
navigatingFromEmitted before the app has navigated away from the current page.
navigatingToEmitted before the app has navigated to the current page.

Native component

AndroidiOS
org.nativescript.widgets.GridLayoutUIViewController
Contributors