Frame

<Frame> is a UI component used to display and navigate between Pages. A NativeScript app can have multiple Frames, or none - most apps will have at least a single Frame often set as the the root view (or inside a RootLayout).

Examples ​

A single root Frame ​

This example shows a single root frame that navigates to the main-page by default, and allows the user to navigate further within this frame (spanning the full-screen).

<!-- app-root -->
<Frame defaultPage="main-page"/>

A global menu bar and a Frame ​

This example shows an always visible menu bar stacked above a Frame that allows the user to navigate further.

<GridLayout rows="auto, *">
  <Label row="0" text="Example Menu Bar"/>
  <ContentView row="1">
    <Frame defaultPage="mainPage"/>
  </ContentView>
</GridLayout>

Multiple root Frames ​

This pseudo example shows two Frames side-by-side, the frame on the left represents a list of conversations, and the Frame on the right represents the details of the currently selected conversation.

The idea of using a Frame on the left is to allow navigating to a different Page while keeping the conversation-details open on the right.

<GridLayout columns="300, *">
  <ContentView col="0">
    <Frame defaultPage="conversation-list" />
  </ContentView>
  <ContentView col="1">
    <Frame defaultPage="conversation-details" />
  </ContentView>
</GridLayout>

Props ​

actionBarVisibility ​

actionBarVisibility: 'auto' | 'always' | 'never'

Used to control the visibility the Navigation Bar in iOS and the ActionBar in Android for all Pages within this Frame.

animated ​

animated: boolean

Gets or sets if navigation transitions within this Frame should be animated.

backStack ​

backStack: BackstackEntry[]

Readonly list of backstack entries.

See BackstackEntry.

currentEntry ​

currentEntry: NavigationEntry

Readonly. The current NavigationEntry the Frame is navigated to.

See NavigationEntry.

currentPage ​

currentPage: Page

Readonly. The current Page the Frame is navigated to.

See Page.

transition ​

transition: NavigationTransition

Gets or sets the default navigation transition for this Frame.

See NavigationTransition.

defaultAnimatedNavigation ​

defaultAnimatedNavigation: boolean

Static. Gets or sets if navigation transitions should be animated globally.

defaultTransition ​

defaultTransition: NavigationTransition

Static. Gets or sets the default NavigationTransition for all frames across the app.

See NavigationTransition.

...Inherited ​

For additional inherited properties, refer to the API Reference.

Methods ​

canGoBack() ​

canGoBack(): boolean

Returns wether or not this Frame can navigate back (there are entries in the backstack).

goBack() ​

goBack(to?: BackstackEntry): void

Navigates to the previous entry (or to) in the backstack.

See BackstackEntry.

navigate() ​

navigate(pageModuleName: string): void
// or
navigate(create: () => Page): void
// or
naviage(entry: NavigationEntry): void

Navigates to a Page.

See Frame.navigate Reference, Page, NavigationEntry.

getFrameById() ​

getFrameById(id: string): Frame

Static. Returns a Frame by it's id if found.

See Frame.

topmost() ​

topmost(): Frame

Static. Returns the topmost frame.

See Frame.

Events ​

navigatingTo ​

on('navigatingTo', (args: NavigationData) => {
  const frame = args.object as Frame
  const entry = args.entry as BackstackEntry
  const page = entry.resolvedPage as Page
})

Emitted when the Frame is navigating to a new Page.

navigatedTo ​

on('navigatedTo', (args: NavigationData) => {
  const frame = args.object as Frame
  const entry = args.entry as BackstackEntry
  const page = entry.resolvedPage as Page
})

Emitted when the Frame has navigated to a new Page.

Native component ​

• Android: org.nativescript.widgets.ContentLayout
• iOS: UINavigationController