8.8 released—CSS Media Query support, SF Symbols and much more...
Learn more

Navigation in NativeScript is enabled by the Frame class.

Examples

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.

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

Note

For a complete navigation example, have a look at Setup navigation from home to details component.

Getting a Frame instance

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

Getting the topmost frame

ts
import { Frame } from '@nativescript/core'

const frame = 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:

ts
onFlickTap(args: EventData): void {
  const button = args.object as Button;
  const frame = button.page.frame;
}

Getting a frame by id

ts
import { Frame } from '@nativescript/core'

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

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

ts
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.

ts
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.

ts
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.

ts
import { NavigatedData } from '@nativescript/core'

export function onNavigatedTo(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:

xml
<GridLayout columns="*, *">
  <Frame col="0" />
  <Frame col="1" />
</GridLayout>

See also

Previous
Navigation