Navigation using Frames and Pages

Navigation in NativeScript is enabled by the Frame class.

Examples ​

Navigating to another page ​

To navigate from one Page to another, first obtain the desired Frame instance. For simple navigation, call the navigate method passing along the path of the page to navigate to.

frame.navigate('~/pages/details/details-page')

Getting a Frame instance ​

The following are some of the ways in which to obtain a Frame instance.

Getting the topmost frame ​

import { Frame } from'@nativescript/core'

constframe= Frame.topmost()

Getting the frame from a Page ​

For example, you can get the current Frame instance from a tap event's data as follows:

onFlickTap(args: EventData): void {
constbutton= args.object asButton;
constframe= button.page.frame;
}

Getting a frame by id ​

import { Frame } from'@nativescript/core'

constframe= Frame.getFrameById('frame-id')

Navigating back ​

To navigate back to the previous page, use the goBack method of the Frame instance.

frame.goBack()

Avoid navigating back to the previous page ​

To avoid navigating to the previous page, set the clearHistory property of the NavigationEntry object that you pass to the navigate method to true.

frame.navigate({
 moduleName: 'details/details-page',
 clearHistory: true,
})

Passing data between pages ​

To pass data to the page you are navigating to, set the value of the context property of the NavigationEntry to the data you would like to pass.

frame.navigate({
 moduleName: 'details/details-page',
 context: { id: 2 },
})

To access the passed data, handle the navigatedTo event for the details/details-page page and access the context property on the event's NavigatedData object.

import { NavigatedData } from'@nativescript/core'

exportfunctiononNavigatedTo(args:NavigatedData) {
this.id = args.context.id
this.notifyPropertyChange('id', args.context.id)
}

Creating multiple frames ​

If you need to create multiple frames, you can do so by wrapping them in a container layout. For example if you want to have 2 frames side-by-side, you can wrap them in a GridLayout:

<GridLayoutcolumns="*, *">
 <Framecol="0" />
 <Framecol="1" />
</GridLayout>

See also ​

• UI Components › Frame
• UI Components › Page
• API Reference › Frame
• API Reference › Page

Contributors