RootLayout

<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 ​

<RootLayout>
  <!-- main content -->
  <GridLayout>
    <Label
      verticalAlignment="center"
      textAlignment="center"
      text="Main content area"
    />
  </GridLayout>
</RootLayout>

import { createPopupView } from './helper'
// create a dynamic popup
const view = createPopupView('#65adf1', 110, -30)

// 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))

// close the dynamic popup
getRootLayout()
  .close(view, {
    opacity: 0,
    translate: { x: 0, y: -500 },
  })
  .catch((ex) => console.error(ex))

// 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() ​

import { getRootLayout } from '@nativescript/core'

const rootLayout: RootLayout = getRootLayout()

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

Methods ​

open() ​

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

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

See View, RootLayoutOptions.

bringToFront() ​

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() ​

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

See View, TransitionAnimation.

closeAll() ​

closeAll(): Promise<void>

Closes all views.

getShadeCover() ​

getShadeCover(): View

Returns the shade cover (overlay view).

RootLayoutOptions ​

shadeCover ​

shadeCover: ShadeCoverOptions

See ShadeCoverOptions.

animation ​

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 ​

opacity: number

color ​

color: Color

Sets the color of the shade cover.

See Color.

tapToClose ​

tapToClose: boolean

Allows closing by tapping on the shade cover.

animation ​

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 ​

ignoreShadeRestore: boolean

TransitionAnimation ​

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.