8.6 Released with 🥽 visionOS support and more!
Check it out

<RootLayout> is a layout container designed to be used as the primary RootLayout container for your app with a built-in API to easily control dynamic view layers. It extends a GridLayout so has all the features of a GridLayout, enhanced with additional APIs.

Examples ​

Using RootLayout to open dynamic popups ​

xml
<RootLayout>
  <!-- main content -->
  <GridLayout>
    <Label
      verticalAlignment="center"
      textAlignment="center"
      text="Main content area"
    />
  </GridLayout>
</RootLayout>
ts
import { createPopupView } from './helper'
// create a dynamic popup
const view = createPopupView('#65adf1', 110, -30)
ts
// open the dynamic popup
getRootLayout()
  .open(view, {
    shadeCover: {
      color: '#000',
      opacity: 0.7,
      tapToClose: true,
    },
    animation: {
      enterFrom: {
        opacity: 0,
        translateY: 500,
        duration: 500,
      },
      exitTo: {
        opacity: 0,
        duration: 300,
      },
    },
  })
  .catch((ex) => console.error(ex))
ts
// close the dynamic popup
getRootLayout()
  .close(view, {
    opacity: 0,
    translate: { x: 0, y: -500 },
  })
  .catch((ex) => console.error(ex))
ts
// helper to create a popup view
export function createPopupView(
  color: string,
  size: number,
  offset: number
): View {
  const layout = new StackLayout()
  layout.height = size
  layout.width = size
  layout.marginTop = offset
  layout.marginLeft = offset
  layout.backgroundColor = color
  layout.borderRadius = 10
  return layout
}

API ​

getRootLayout() ​

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

const rootLayout: RootLayout = getRootLayout()

Returns the reference to the RootLayout, or undefined if there's no <RootLayout>.

RootLayout is designed to be used as a single instance

Technically you can place multiple RootLayouts in your templates, but only the last created instance will be accessible via the getRootLayout method. The API has been designed to control a single instance, usually placed as the root view of your Application.

Methods ​

open() ​

ts
open(view: View, options?: RootLayoutOptions): Promise<void>

Opens the view and brings it to the front by default.

See View, RootLayoutOptions.

bringToFront() ​

ts
bringToFront(view: View, animated?: boolean): Promise<void>

Brings the view to the front if it's not already. If the view is not currently shown inside the RootLayout, the call is ignored.

See View.

close() ​

ts
close(view: View, exitTo?: TransitionAnimation): Promise<void>

See View, TransitionAnimation.

closeAll() ​

ts
closeAll(): Promise<void>

Closes all views.

getShadeCover() ​

ts
getShadeCover(): View

Returns the shade cover (overlay view).

RootLayoutOptions ​

shadeCover ​

ts
shadeCover: ShadeCoverOptions

See ShadeCoverOptions.

animation ​

ts
animation: {
  enterFrom?: TransitionAnimation,
  exitTo?: TransitionAnimation
}

enterFrom is only applied if it's the first one to be opened.

exitFrom is only applied if it's the last one to be closed

See TransitionAnimation.

ShadeCoverOptions ​

opacity ​

ts
opacity: number

color ​

ts
color: Color

Sets the color of the shade cover.

See Color.

tapToClose ​

ts
tapToClose: boolean

Allows closing by tapping on the shade cover.

animation ​

ts
animation: {
  enterFrom?: TransitionAnimation,
  exitTo?: TransitionAnimation
}

enterFrom is only applied if it's the first one to be opened.

exitFrom is only applied if it's the last one to be closed

See TransitionAnimation.

ignoreShadeRestore ​

ts
ignoreShadeRestore: boolean

TransitionAnimation ​

ts
interface TransitionAnimation {
  translateX?: number
  translateY?: number
  scaleX?: number
  scaleY?: number
  rotate?: number // degrees
  opacity?: number
  duration?: number // in ms
  curve?: CoreTypes.AnimationCurve
}

See CoreTypes.AnimationCurve.