# What is NativeScript? [​](https://docs.nativescript.org/\#what-is-nativescript)

NativeScript provides platform APIs directly to the JavaScript runtime ( _with strong types_) for a rich TypeScript development experience.

Some popular use cases:

- Building Web, iOS, Android and Vision Pro apps with a shared codebase (aka, cross platform apps)
- Building native platform apps with portable JavaScript skills
- Augmenting JavaScript projects with platform API capabilities
- AndroidTV and Watch development
- watchOS development
- Learning native platforms through JavaScript understanding
- Exploring platform API documentation by trying APIs [directly from a web browser](https://preview.nativescript.org/) without requiring a platform development machine setup.

### Why NativeScript? [​](https://docs.nativescript.org/\#why-nativescript)

- JavaScript skill reuse
- Natural platform feel and performance characteristics
- Improve how Platform developers can work together with JavaScript developers
- Strengthening job market potential by allowing developers to port their skills between different environments
- Fully open source and a member of [OpenJS Foundation](https://openjsf.org/), supporting the healthy growth of JavaScript and web technologies by providing a neutral organization to host and sustain projects, as well as collaboratively fund activities that benefit the ecosystem as a whole

This is all facilitated by the supported platform runtimes:

- [@nativescript/android](https://docs.nativescript.org/guide/extending-classes-and-implementing-interfaces-android)
- [@nativescript/ios](https://docs.nativescript.org/guide/extending-classes-and-conforming-to-protocols-ios)
- [@nativescript/visionos](https://docs.nativescript.org/guide/visionos)

To aid in cross-platform development, common use cases are implemented in [@nativescript/core](https://docs.nativescript.org/core) utilizing the underlying native APIs provided by each runtime.

Many popular JavaScript frameworks can be used; often referred to as _flavors_, for example:

- Plain JavaScript or TypeScript—currently part of `@nativescript/core`, uses XML to declare the UI and JavaScript classes for data binding
- Angular via `@nativescript/angular`
- Vue via `nativescript-vue`
- React via `react-nativescript`
- Solid via `@nativescript-community/solid-js`
- Svelte via `@nativescript-community/svelte-native`

There's more!

Given how NativeScript is built, new flavors can be implemented on top of it anytime. A few more great examples from the community:

- [rEFui](https://github.com/SudoMaker/rEFui#native)
- and [more with DOMiNATIVE](https://github.com/SudoMaker/dominative)

## Ready to dive in? [​](https://docs.nativescript.org/\#ready-to-dive-in)

You will want to setup your development machine using the [Environment Setup guide](https://docs.nativescript.org/setup/) which involves preparing your machine for iOS and Android development as well as installing the [NativeScript CLI](https://www.npmjs.com/package/nativescript) via `npm install -g nativescript`

Next [Environment Setup→](https://docs.nativescript.org/setup/)

2. [What is NativeScript?](https://docs.nativescript.org/#what-is-nativescript)
1. [Why NativeScript?](https://docs.nativescript.org/#why-nativescript)
3. [How to use the docs?](https://docs.nativescript.org/#how-to-use-the-docs)
4. [Ready to dive in?](https://docs.nativescript.org/#ready-to-dive-in)

## NativeScript Snacks

Each Snack reveals NativeScript's power, from UI tricks to platform SDK usages to flavor implementations all through [StackBlitz](https://stackblitz.com/). Get a peek 👀 at what's possible.

## Explore Snacks [​](https://docs.nativescript.org/snacks/\#explore-snacks)

### Spaceman using just TypeScript

[Spaceman using just TypeScript](https://www.youtube.com/watch?v=hHqlEbU8o2o)

[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript)

Shared Element Transitions using TypeScript.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-spaceman-transition-example?file=app%2Fspace-view.xml)

[Spaceman using just TypeScript](https://www.youtube.com/watch?v=hHqlEbU8o2o)

[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [Vue](https://nativescript-vue.org/)

### Spaceman using just Vue 3

Shared Element Transitions using Vue 3.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-vue3-spaceman-transition-example?file=app%2Fcomponents%2FSpaceView.vue)


### Music Player UI

[Music Player UI](https://www.youtube.com/watch?v=KatL9m7E2XI)

[Shared Elements](https://docs.nativescript.org/guide/shared-element-transitions) [TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript)

Music Player UI with Shared Element Transitions.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-music-player-transition-example?file=app%2Fmain-view.xml)


### Reflective UI

[NativeScript Reflective UI](https://www.youtube.com/watch?v=rbF6mYfwnck)

[iOS AVCaptureSession](https://developer.apple.com/documentation/avfoundation/avcapturesession?language=objc)

Using iOS AVCaptureSession to create live reflective UI mask. Try with your phone in Dark Mode, it's neat!

[View on StackBlitz](https://stackblitz.com/edit/nativescript-reflective-ui?file=src%2Fapp%2Fitem%2Fitems.component.ts)


### Day Night Switch

[Custom NativeScript Day/Night Switch](https://www.youtube.com/watch?v=8kb7ObVOJIg)

[Angular](https://angular.dev/) [React](https://react.dev/) [Solid](https://www.solidjs.com/) [Svelte](https://svelte.dev/) [Vue](https://vuejs.org/)

Custom NativeScript Day/Night Switch.

[Angular on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-angular?file=src%2Fapp%2Fexample.component.html) [React on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-react?file=src%2Fcomponents%2FHome.tsx) [Solid on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-solid?file=src%2Fcomponents%2Fhome.tsx) [Svelte on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-svelte?file=src%2Fcomponents%2FHome.svelte) [Vue on StackBlitz](https://stackblitz.com/edit/nativescript-daynightswitch-vue?file=src%2Fcomponents%2FHome.vue)


### Tetris Game with Vue 3

[Tetris Game with Vue 3](https://www.youtube.com/watch?v=To_bycK6BGY)

[Vue](https://nativescript-vue.org/)

Tetris Game with Vue 3.

[View on StackBlitz](https://stackblitz.com/edit/ns-tetris?file=src%2Fcomponents%2FHome.vue)

[iOS Recognize Text from an Image](https://www.youtube.com/watch?v=cCqqXezvfWs)

[Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS Vision Framework](https://developer.apple.com/documentation/vision?language=objc)

### iOS Recognize Text from an Image

Recognizing text from an Image on iOS.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-text-from-image?file=src%2Fapp%2Fhome%2Fhome.component.ts)

### iOS PDFKit

[iOS PDFKit](https://www.youtube.com/watch?v=ucmAXFaFbY0)

[Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS PDFKit](https://developer.apple.com/documentation/pdfkit?language=objc)

Generating and previewing PDFs using iOS PDFKit.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-pdfview-via-ios-pdfkit?file=src%2Fapp%2Fnative-pdfview%2Fnative-pdfview.ts)


### PDF w/ WKWebView & AndroidPdfViewer

[Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [iOS WKWebView](https://developer.apple.com/documentation/webkit/wkwebview) [Gradle AndroidPdfViewer](https://github.com/barteksc/AndroidPdfViewer)

Rendering PDF with WKWebView on iOS.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-pdfviewer?file=src%2Fapp%2Fnative-pdfview%2Findex.ios.ts)

[Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) [TextView](https://docs.nativescript.org/ui/text-view)

### Autogrow Textfield

Autogrowing Textfield as you type.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-ng-textview-autogrow-vs-textfield?file=src%2Fapp%2Fitem%2Fitems.component.html)


### Text to Speech

[Android TextToSpeech](https://developer.android.com/reference/android/speech/tts/TextToSpeech) [iOS AVSpeechUtterance](https://developer.apple.com/documentation/avfaudio/avspeechutterance?language=objc)

Simple Text to Speech.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-text-to-speech?file=src%2Fapp%2Fspeech%2Findex.ios.ts)

### Battery Level Check

[Android Battery Monitoring](https://developer.android.com/training/monitoring-device-state/battery-monitoring) [iOS UIDevice](https://developer.apple.com/documentation/uikit/uidevice?language=objc)

Getting the current battery level.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-battery-level-check?file=app%2Fbattery%2Findex.ios.ts)

### Toggle Device Light

[Android CameraManager](https://developer.android.com/reference/android/hardware/camera2/CameraManager) [iOS AVCaptureDevice](https://developer.apple.com/documentation/avfoundation/avcapturedevice?language=objc)

Toggling the Device Light on and off.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-torch?file=src%2Fapp%2Ftorch%2Findex.ios.ts)


### Using local image assets

[Image](https://docs.nativescript.org/ui/image)

Using local image assets.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-local-image-asset?file=package.json,src%2Fapp%2Fitem%2Fitems.component.html)

### Checkbox

[CheckBox](https://github.com/nstudio/nativescript-plugins/blob/main/packages/nativescript-checkbox/README.md)

Using checkbox components.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-checkbox-example?file=src%2Fapp%2Fitem%2Fitems.component.html)

### Dropdown Menus

[NativeScript Dropdown Menus](https://www.youtube.com/watch?v=0zE5OjiJTk8)

[iOS UIMenu](https://developer.apple.com/documentation/uikit/uimenu) [Android PopupMenu](https://developer.android.com/reference/android/widget/PopupMenu)

Using dropdown menus.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-dropdown-menus?file=src%2Fapp%2Fmenu-button%2Findex.ios.ts)

### Large Title Display on iOS

[Enable large title displays for iOS Navigation from NativeScript's Frame.](https://www.youtube.com/watch?v=bwgVIZSpZ00)

[iOS prefersLargeTitles](https://developer.apple.com/documentation/uikit/uinavigationbar/2908999-preferslargetitles?language=objc)

How to enable large title displays for iOS navigation with NativeScript using prefersLargeTitles property of UINavigationBar, accessible from every Frame.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-ios-large-titles-angular?file=src%2Fapp%2Fitem%2Fitems.component.ts)

### Hardware device volume

[Adjusting hardware device volume with NativeScript](https://www.youtube.com/watch?v=1DR_9AZrMe4)

[iOS outputVolume](https://developer.apple.com/documentation/avfaudio/avaudiosession/1616533-outputvolume?language=objc) [Android getStreamVolume](https://developer.android.com/reference/android/media/AudioManager#getStreamVolume(int)) [Vue](https://nativescript-vue.org/)

How to get the current device volume using NativeScript on iOS and Android.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-device-volume?file=src%2Futils%2Fvolume.ts)

### Top Bar Height

[Top Bar Height with NativeScript](https://www.youtube.com/watch?v=bXSyBTGJIlc)

[iOS statusBarManager](https://developer.apple.com/documentation/uikit/uiwindowscene/3213943-statusbarmanager?language=objc) [iOS UINavigationBar](https://developer.apple.com/documentation/uikit/uinavigationbar?language=objc) [Android Resources](https://developer.android.com/guide/topics/resources/providing-resources) [Android bar height id](https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/values/dimens_material.xml#39)

How to check the top bar height with NativeScript on iOS and Android.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-topbar-height?file=src%2Fapp%2Futils%2Fdevice.ts)

### iOS Spotlight Search

[Use iOS Spotlight Search with NativeScript](https://www.youtube.com/watch?v=uzzMskFL5g8)

[iOS Core Spotlight](https://developer.apple.com/documentation/corespotlight)

How to allow app content to be searchable using iOS Core Spotlight.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-ios-spotlight-search?file=src%2Fapp%2Fitem%2Fitem.service.ts)

### Improve UX with NativeScript TouchManager

[Instantly improve UX with NativeScript's TouchManager](https://www.youtube.com/watch?v=vAyGyuNFCbk)

[TouchManager](https://docs.nativescript.org/guide/animations#touchmanager-8-2)

Instantly improve UX with NativeScript's TouchManager.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-touchmanager?file=src%2Fapp%2Futils.ts)

### Tab Navigation with iOS and Android

[NativeScript Tab Navigation with Juicy Choices](https://www.youtube.com/watch?v=-FPEdFE1XeM)

[Angular](https://angular.dev/)

Example of how to configure tab navigation with lots of options.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-tab-nav-ng?file=src%2Fapp%2Ffeatures%2Fhome%2Fcomponents%2Fhome.component.html)

### Screen Snapshot

[Screen Snapshot](https://www.youtube.com/watch?v=ORp4y2tbJUA)

[iOS CALayer render](https://developer.apple.com/documentation/quartzcore/calayer/render(in:)) [Android createBitmap](https://developer.android.com/reference/android/graphics/Bitmap#createBitmap(android.graphics.Bitmap,%20int,%20int,%20int,%20int))

Example of how to take a snapshot of any view on screen.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-screen-snapshot?file=src%2Fhome.component.html)

### Solid NativeScript Vibes

[Solid NativeScript Vibes](https://www.youtube.com/watch?v=FLxZ_T5yN_A)

[iOS AVAudioPlayer](https://developer.apple.com/documentation/avfaudio/avaudioplayer/averagepower(forchannel:)?language=objc) [Android Visualizer](https://developer.android.com/reference/android/media/audiofx/Visualizer) [Solid](https://www.solidjs.com/)

Example of using audio player with metering.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-solid-vibes?file=src%2Fcomponents%2Fhome.tsx)

### CollectionView Layout Playground

[CollectionView Layout Playground](https://www.youtube.com/watch?v=SfYRtBiTXiM)

[@nativescript-community/ui-collectionview](https://github.com/nativescript-community/ui-collectionview)

Example of using CollectionView with different layout options.

[View on StackBlitz](https://stackblitz.com/edit/nativescript-collectionview-layout-playground?file=src%2Fapp%2Fitem%2Fitem-columns.component.html)

2. [Explore Snacks](https://docs.nativescript.org/snacks/#explore-snacks)

## NativeScript Tutorials

NativeScript is a celebration of the platform in your favorite language, **JavaScript**. Along with that comes all the benefits you might expect, like being able to use your favorite JavaScript framework.

| Name | Type | Difficulty |
| --- | --- | --- |
| [Build a master-detail app with Plain TypeScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-typescript) | Tutorial | Beginner |
| [Build a master-detail app with Plain JavaScript](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-plain-javascript) | Tutorial | Beginner |
| [Build a master-detail app with Angular](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular) | Tutorial | Beginner |
| [Build a master-detail app with Vue](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-vue) | Tutorial | Beginner |
| [Build a master-detail app with React](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-react) | Tutorial | Beginner |
| [Build a master-detail app with Svelte](https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-svelte) | Tutorial | Beginner |
| [Create a NativeScript plugin Part 1: Label Marquee](https://blog.nativescript.org/create-a-custom-view-plugin-marquee-label) | Blog/Tutorial | Intermediate |
| [Create a NativeScript plugin Part 2: Shimmer](https://blog.nativescript.org/create-a-custom-view-plugin-shimmer) | Blog/Tutorial | Intermediate |
| [Create a NativeScript plugin Part 3: Touch Effects](https://blog.nativescript.org/create-a-custom-view-plugin-touch-effects) | Blog/Tutorial | Intermediate |
| [Develop Vision Pro 🥽 apps with TypeScript](https://blog.nativescript.org/develop-visionos-apps-with-typescript) | Blog/Tutorial | Advanced |
| [Develop Vision Pro 🥽 apps with Angular](https://blog.nativescript.org/develop-visionos-apps-with-angular) | Blog/Tutorial | Advanced |
| [Develop Vision Pro 🥽 apps with React](https://blog.nativescript.org/develop-visionos-apps-with-react) | Blog/Tutorial | Advanced |
| [Develop Vision Pro 🥽 apps with Solid](https://blog.nativescript.org/develop-visionos-apps-with-solid) | Blog/Tutorial | Advanced |
| [Develop Vision Pro 🥽 apps with Svelte](https://blog.nativescript.org/develop-visionos-apps-with-svelte) | Blog/Tutorial | Advanced |
| [Develop Vision Pro 🥽 apps with Vue](https://blog.nativescript.org/develop-visionos-apps-with-vue) | Blog/Tutorial | Advanced |

## NativeScript Core Documentation

## @nativescript/core [​](https://docs.nativescript.org/core/\#nativescript-core)

- [Application](https://docs.nativescript.org/core/application)
- [ApplicationSettings](https://docs.nativescript.org/core/application-settings)
- [Color](https://docs.nativescript.org/core/color)
- [Connectivity](https://docs.nativescript.org/core/connectivity)
- [Device](https://docs.nativescript.org/core/device)
- [FileSystem](https://docs.nativescript.org/core/file-system)
- [FPS Meter](https://docs.nativescript.org/core/fps-meter)
- [Http](https://docs.nativescript.org/core/http)
- [ImageCache](https://docs.nativescript.org/core/image-cache)
- [Observable](https://docs.nativescript.org/core/observable)
- [Screen](https://docs.nativescript.org/core/screen)
- [Trace](https://docs.nativescript.org/core/tracing)
- [Utils](https://docs.nativescript.org/core/utils)
- [XmlParser](https://docs.nativescript.org/core/xml-parser)

See also [API Reference](https://docs.nativescript.org/api/).

2. [@nativescript/core](https://docs.nativescript.org/core/#nativescript-core)

## NativeScript Plugins Guide

## @nativescript/\* plugins [​](https://docs.nativescript.org/plugins/\#nativescript-plugins)

Many plugins offered by NativeScript's Technical Steering Committee (TSC) are listed in the sidebar/sub navigation to help with your developments. For example, everything from [biometrics](https://docs.nativescript.org/plugins/biometrics), [camera](https://docs.nativescript.org/plugins/camera) handling, [contacts](https://docs.nativescript.org/plugins/contacts) management, [Firebase](https://docs.nativescript.org/plugins/firebase-core) integration, [Google Maps](https://docs.nativescript.org/plugins/google-maps), to payment management using [Apple Pay](https://docs.nativescript.org/plugins/apple-pay), [Google Pay](https://docs.nativescript.org/plugins/google-pay), or [IAP and Subscription handling](https://docs.nativescript.org/plugins/payments) and many more can be found here.

## Developing your own plugins [​](https://docs.nativescript.org/plugins/\#developing-your-own-plugins)

If you are interested in building your own plugins, we recommend following our [Getting Started with Plugin Workspaces](https://docs.nativescript.org/plugins/plugin-workspace-guide) guide which uses our [plugin workspace seed](https://github.com/NativeScript/plugin-seed) ( _the exact same setup the TSC uses to develop it's own plugins_) as a starting point because it provides the following:

- consistent plugin source structure
- ability to scale and add additional plugins through automated tooling
- reduces configuration files to provide easy maintainence
- provides shareable structure for ease of demoing your plugins
- ability to focus your workspace down to a single plugin in an instant if you ever need to isolate development when working within a multi-plugin workspace
- provides automated migrations managed by the TSC to keep your plugin workspaces up-to-date without manual hassles

You may also find these resources helpful:

- [Introducing plugin workspaces to simplify and streamline maintenance](https://blog.nativescript.org/announcing-plugin-workspaces)
- [Migrate your plugin workspace in 2 seconds - NativeScript 8 + webpack5 + configuration updates](https://blog.nativescript.org/plugin-workspace-migrate-to-v2)

### Creating NativeScript Plugins and Enhancing Behavior [​](https://docs.nativescript.org/plugins/\#creating-nativescript-plugins-and-enhancing-behavior)

- [Part 1: How to create a NativeScript plugin that uses native iOS & Android views - Label Marquee!](https://blog.nativescript.org/create-a-custom-view-plugin-marquee-label)
- [Part 2: How to create a NativeScript plugin that uses native iOS & Android views - more native platform APIs - Shimmer!](https://blog.nativescript.org/create-a-custom-view-plugin-shimmer)
- [Part 3: Should this be a plugin or part of core? 💥 Holy Interactivity Batman!](https://blog.nativescript.org/create-a-custom-view-plugin-touch-effects)

2. [@nativescript/\* plugins](https://docs.nativescript.org/plugins/#nativescript-plugins)
3. [Developing your own plugins](https://docs.nativescript.org/plugins/#developing-your-own-plugins)
1. [Creating NativeScript Plugins and Enhancing Behavior](https://docs.nativescript.org/plugins/#creating-nativescript-plugins-and-enhancing-behavior)

## NativeScript Setup Guide

## Try it online [​](https://docs.nativescript.org/setup/\#try-it-online)

You can play with NativeScript online directly on StackBlitz, or locally using [NativeScript Preview](https://preview.nativescript.org/).

- [NativeScript TypeScript](https://nativescript.new/)
- [NativeScript JavaScript](https://nativescript.new/js)
- [NativeScript Angular](https://nativescript.new/angular)
- [NativeScript Vue 2](https://nativescript.new/vue)
- [NativeScript Vue 3](https://nativescript.new/vue3)
- [NativeScript React](https://nativescript.new/react)
- [NativeScript Svelte](https://nativescript.new/svelte)

## Local setup [​](https://docs.nativescript.org/setup/\#local-setup)

Select the guide relevant to your development machine and follow the steps carefully to get a clean working environment ready.

| Operating System | Android | iOS |
| --- | --- | --- |
| Windows | ✅ [Setup Guide](https://docs.nativescript.org/setup/windows) | ❌ Unsupported |
| macOS | ✅ [Setup Guide](https://docs.nativescript.org/setup/macos) | ✅ [Setup Guide](https://docs.nativescript.org/setup/macos#setting-up-macos-for-ios) |
| Linux | ✅ [Setup Guide](https://docs.nativescript.org/setup/linux) | ❌ Unsupported |

A note about iOS on unsupported systems

A Mac is required to build projects that use native iOS code. Simpler apps can be tested using [NativeScript Preview](https://preview.nativescript.org/).

2. [Try it online](https://docs.nativescript.org/setup/#try-it-online)
3. [Local setup](https://docs.nativescript.org/setup/#local-setup)≈

## NativeScript UI Components


## Layout Containers [​](https://docs.nativescript.org/ui/\#layout-containers)

- [StackLayout](https://docs.nativescript.org/ui/stack-layout)
- [GridLayout](https://docs.nativescript.org/ui/grid-layout)
- [RootLayout](https://docs.nativescript.org/ui/root-layout)
- [FlexboxLayout](https://docs.nativescript.org/ui/flexbox-layout)
- [WrapLayout](https://docs.nativescript.org/ui/wrap-layout)
- [DockLayout](https://docs.nativescript.org/ui/dock-layout)
- [AbsoluteLayout](https://docs.nativescript.org/ui/absolute-layout)

## Navigation Components [​](https://docs.nativescript.org/ui/\#navigation-components)

- [Frame](https://docs.nativescript.org/ui/frame)
- [Page](https://docs.nativescript.org/ui/page)
- [ActionBar](https://docs.nativescript.org/ui/action-bar)
- [ActionItem](https://docs.nativescript.org/ui/action-bar#action-item)
- [NavigationButton](https://docs.nativescript.org/ui/action-bar#navigation-button)

## Dialogs [​](https://docs.nativescript.org/ui/\#dialogs)

- [Alert](https://docs.nativescript.org/ui/dialogs#alert)
- [Action](https://docs.nativescript.org/ui/dialogs#action)
- [Confirm](https://docs.nativescript.org/ui/dialogs#confirm)
- [Prompt](https://docs.nativescript.org/ui/dialogs#prompt)
- [Login](https://docs.nativescript.org/ui/dialogs#login)

## Components [​](https://docs.nativescript.org/ui/\#components)

- [ActivityIndicator](https://docs.nativescript.org/ui/activity-indicator)
- [Button](https://docs.nativescript.org/ui/button)
- [DatePicker](https://docs.nativescript.org/ui/date-picker)
- [HtmlView](https://docs.nativescript.org/ui/html-view)
- [Image](https://docs.nativescript.org/ui/image)
- [Label](https://docs.nativescript.org/ui/label)
- [ListPicker](https://docs.nativescript.org/ui/list-picker)
- [ListView](https://docs.nativescript.org/ui/list-view)
- [Placeholder](https://docs.nativescript.org/ui/placeholder)
- [Progress](https://docs.nativescript.org/ui/progress)
- [ScrollView](https://docs.nativescript.org/ui/scroll-view)
- [SearchBar](https://docs.nativescript.org/ui/search-bar)
- [SegmentedBar](https://docs.nativescript.org/ui/segmented-bar)
- [Slider](https://docs.nativescript.org/ui/slider)
- [Switch](https://docs.nativescript.org/ui/switch)
- [TabView](https://docs.nativescript.org/ui/tab-view)
- [TextField](https://docs.nativescript.org/ui/text-field)
- [TextView](https://docs.nativescript.org/ui/text-view)
- [TimePicker](https://docs.nativescript.org/ui/time-picker)
- [WebView](https://docs.nativescript.org/ui/web-view)

2. [Layout Containers](https://docs.nativescript.org/ui/#layout-containers)
3. [Navigation Components](https://docs.nativescript.org/ui/#navigation-components)
4. [Dialogs](https://docs.nativescript.org/ui/#dialogs)
5. [Components](https://docs.nativescript.org/ui/#components)

## NativeScript Page Component

`<Page>` is a UI component for representing screens that users are able to navigate to through a [Frame](https://docs.nativescript.org/ui/frame). A Page itself can only contain a single child view with the exception of the [ActionBar](https://docs.nativescript.org/ui/action-bar) which has it's own special "slot".

![](https://docs.nativescript.org/assets/ActionBar.14a4cad9.png)

![](https://docs.nativescript.org/assets/ActionBar.b88bf667.png)

```xml
<Page>
  <ActionBar title="MyApp" />

  <!-- the main content - must be a single view -->
  <GridLayout>
    <Label text="Main Content" />
  </GridLayout>
</Page>
```

## Page Lifecycle [​](https://docs.nativescript.org/ui/page\#page-lifecycle)

A page emits various events during navigation that you can use to update data/state in your app.

![Frame and Page lifecycle](https://docs.nativescript.org/assets/Frame_Page_Lifecycle.drawio.6c5d01fb.svg)

### Lifecycle event examples [​](https://docs.nativescript.org/ui/page\#lifecycle-event-examples)

Navigating forward and back

```bash
# frame.navigate(mainPage) - initial navigation
mainPage    > navigatingTo (isBackNavigation: false)
mainPage    > loaded
mainPage    > navigatedTo (isBackNavigation: false)

# frame.navigate(detailsPage)
mainPage    > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage    > unloaded
mainPage    > navigatedFrom (isBackNavigation: false)
detailsPage > navigatedTo (isBackNavigation: false)

# frame.goBack()
detailsPage > navigatingFrom (isBackNavigation: true)
mainPage    > navigatingTo (isBackNavigation: true)
mainPage    > loaded
detailsPage > unloaded
detailsPage > navigatedFrom (isBackNavigation: true)
detailsPage > disposeNativeView # since it's no longer in the backstack
mainPage    > navigatedTo (isBackNavigation: true)
```

Navigating forward and clearing history

```bash
# frame.navigate(mainPage) - initial navigation
mainPage    > navigatingTo (isBackNavigation: false)
mainPage    > loaded
mainPage    > navigatedTo (isBackNavigation: false)

# frame.navigate(detailsPage, { clearHistory: true })
mainPage    > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage    > unloaded
mainPage    > navigatedFrom (isBackNavigation: false)
mainPage    > disposeNativeView
detailsPage > navigatedTo (isBackNavigation: false)

# frame.goBack() - no-op, there's nothing in the backstack.
```

Navigating forward without a backstack entry

```bash
# frame.navigate(mainPage, { backstackVisible: false }) - initial navigation
mainPage    > navigatingTo (isBackNavigation: false)
mainPage    > loaded
mainPage    > navigatedTo (isBackNavigation: false)

# frame.navigate(detailsPage)
mainPage    > navigatingFrom (isBackNavigation: false)
detailsPage > navigatingTo (isBackNavigation: false)
detailsPage > loaded
mainPage    > unloaded
mainPage    > navigatedFrom (isBackNavigation: false)
mainPage    > disposeNativeView # since backstackVisible: false, we won't be able to reach mainPage after this point
detailsPage > navigatedTo (isBackNavigation: false)
```

## Examples [​](https://docs.nativescript.org/ui/page\#examples)

### Getting a reference to the current Page [​](https://docs.nativescript.org/ui/page\#getting-a-reference-to-the-current-page)

NativeScript provides various ways to access the current Page instance.

#### Via Page Events [​](https://docs.nativescript.org/ui/page\#via-page-events)

Any events emitted by the Page will have a reference to the Page itself via `args.object`. For example:

```ts
// loaded event
onPageLoaded(args: LoadEventData) {
  const page = args.object as Page;
}

// navigatedTo event
onNavigatedTo(args: NavigatedData) {
  const page = args.object as Page;
}
```

#### Via the page property of any View within the Page [​](https://docs.nativescript.org/ui/page\#via-the-page-property-of-any-view-within-the-page)

Any View nested inside a Page hierarchy can access the Page via the `page` property.

```ts
onTap(args: EventData) {
  const button = args.object as Button
  const page = button.page as Page;
}
```

#### Via the currentPage property of a Frame instance [​](https://docs.nativescript.org/ui/page\#via-the-currentpage-property-of-a-frame-instance)

The currently displayed page can be accessed via the Frame, to get a reference to the frame you can use `Frame.topmost()` for example:

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

const frame = Frame.topmost()
const page = frame.currentPage // Page
```

See [Frame](https://docs.nativescript.org/ui/frame), [Getting a Frame Instance](https://docs.nativescript.org/ui/frame#getting-a-frame-instance).

### Handling various Page events [​](https://docs.nativescript.org/ui/page\#handling-various-page-events)

A page emits various events during it's lifecycle, navigation events and general View events like `loaded`/ `unloaded`/ `layoutChanged` etc.

Page DefinitionEvent Handlers

```xml
<Page
  loaded="onLoaded"
  unloaded="onUnloaded"
  navigatedFrom="onNavigatedFrom"
  navigatedTo="onNavigatedTo"
  navigatingFrom="onNavigatingFrom"
  navigatingTo="onNavigatingTo"
  layoutChanged="onLayoutChanged"
>
  <ActionBar title="MyApp" />
  <!-- ... -->
</Page>
```

```ts
onLoaded(args: EventData) {
  const page = args.object as Page
}

onUnloaded(args: EventData) {
  const page = args.object as Page
}

onLayoutChanged(args: EventData) {
  const page = args.object as Page
}

onNavigatedTo(args: NavigatedData) {
  const page = args.object as Page
  console.log(args.isBackNavigation)
}

onNavigatingFrom(args: NavigatedData) {
  const page = args.object as Page
  console.log(args.isBackNavigation)
}

onNavigatedFrom(args: NavigatedData) {
  const page = args.object as Page
  console.log(args.isBackNavigation)
}
```

## Props [​](https://docs.nativescript.org/ui/page\#props)

### actionBar [​](https://docs.nativescript.org/ui/page\#actionbar)

```ts
actionBar: ActionBar
```

Gets or sets the ActionBar for this page.

See [ActionBar](https://docs.nativescript.org/ui/action-bar).

### actionBarHidden [​](https://docs.nativescript.org/ui/page\#actionbarhidden)

```ts
actionBarHidden: boolean
```

Allows hiding the ActionBar.

Defaults to `false`.

### frame [​](https://docs.nativescript.org/ui/page\#frame)

```ts
frame: Frame
```

The Frame instance containing the page.

See [Frame](https://docs.nativescript.org/ui/frame).

### navigationContext [​](https://docs.nativescript.org/ui/page\#navigationcontext)

```ts
navigationContext: any
```

A context used to pass data during navigation.

### backgroundSpanUnderStatusBar [​](https://docs.nativescript.org/ui/page\#backgroundspanunderstatusbar)

```ts
backgroundSpanUnderStatusBar: boolean
```

Gets or sets whether the background of the page spans under the status bar.

Defaults to `false`.

### androidStatusBarBackground [​](https://docs.nativescript.org/ui/page\#androidstatusbarbackground)

```ts
androidStatusBarBackground: Color
```

Gets or sets the color of the status bar on Android devices. **Android only.**

See [Color](https://docs.nativescript.org/api/class/Color).

### enableSwipeBackNavigation [​](https://docs.nativescript.org/ui/page\#enableswipebacknavigation)

```ts
enableSwipeBackNavigation: boolean
```

Gets or sets whether the page can be swiped back on iOS. **iOS only.**

Defaults to `true`.

### statusBarStyle [​](https://docs.nativescript.org/ui/page\#statusbarstyle)

```ts
statusBarStyle: 'light' | 'dark'
```

Gets or sets the style of the status bar.

### ...Inherited [​](https://docs.nativescript.org/ui/page\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Page).

## Events [​](https://docs.nativescript.org/ui/page\#events)

### loaded [​](https://docs.nativescript.org/ui/page\#loaded)

```ts
on('loaded', (args: EventData) => {
  const page = args.object as Page
  console.log('Page loaded')
})
```

Emitted after the page has been loaded.

### navigatingTo [​](https://docs.nativescript.org/ui/page\#navigatingto)

```ts
on('navigatingTo', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page is being navigated to:', args.isBackNavigation)
})
```

Emitted before the app has navigated to the current page.

### navigatedTo [​](https://docs.nativescript.org/ui/page\#navigatedto)

```ts
on('navigatedTo', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page has been navigated to:', args.isBackNavigation)
})
```

Emitted after the app has navigated to the current page.

### navigatingFrom [​](https://docs.nativescript.org/ui/page\#navigatingfrom)

```ts
on('navigatingFrom', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page is being navigated from:', args.isBackNavigation)
})
```

Emitted before the app has navigated away from the current page.

### navigatedFrom [​](https://docs.nativescript.org/ui/page\#navigatedfrom)

```ts
on('navigatedFrom', (args: NavigatedData) => {
  const page = args.object as Page
  console.log('Page has been navigated from:', args.isBackNavigation)
})
```

Emitted after the app has navigated away from the current page.

## Native component [​](https://docs.nativescript.org/ui/page\#native-component)

- Android: [`org.nativescript.widgets.GridLayout`](https://github.com/NativeScript/NativeScript/blob/master/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/GridLayout.java)
- iOS: [`UIViewController`](https://developer.apple.com/documentation/uikit/uiviewcontroller)

2. [Page Lifecycle](https://docs.nativescript.org/ui/page#page-lifecycle)
1. [Lifecycle event examples](https://docs.nativescript.org/ui/page#lifecycle-event-examples)
3. [Examples](https://docs.nativescript.org/ui/page#examples)
1. [Getting a reference to the current Page](https://docs.nativescript.org/ui/page#getting-a-reference-to-the-current-page)
2. [Handling various Page events](https://docs.nativescript.org/ui/page#handling-various-page-events)
4. [Props](https://docs.nativescript.org/ui/page#props)
1. [actionBar](https://docs.nativescript.org/ui/page#actionbar)
2. [actionBarHidden](https://docs.nativescript.org/ui/page#actionbarhidden)
3. [frame](https://docs.nativescript.org/ui/page#frame)
4. [navigationContext](https://docs.nativescript.org/ui/page#navigationcontext)
5. [backgroundSpanUnderStatusBar](https://docs.nativescript.org/ui/page#backgroundspanunderstatusbar)
6. [androidStatusBarBackground](https://docs.nativescript.org/ui/page#androidstatusbarbackground)
7. [enableSwipeBackNavigation](https://docs.nativescript.org/ui/page#enableswipebacknavigation)
8. [statusBarStyle](https://docs.nativescript.org/ui/page#statusbarstyle)
9. [...Inherited](https://docs.nativescript.org/ui/page#inherited)
5. [Events](https://docs.nativescript.org/ui/page#events)
1. [loaded](https://docs.nativescript.org/ui/page#loaded)
2. [navigatingTo](https://docs.nativescript.org/ui/page#navigatingto)
3. [navigatedTo](https://docs.nativescript.org/ui/page#navigatedto)
4. [navigatingFrom](https://docs.nativescript.org/ui/page#navigatingfrom)
5. [navigatedFrom](https://docs.nativescript.org/ui/page#navigatedfrom)
6. [Native component](https://docs.nativescript.org/ui/page#native-component)

## NativeScript Webpack Configuration

Note

This section is only aplicable to `@nativescript/webpack` version `5.0.0` and above. If you are using an older version, consider upgrading.

All NativeScript applications are bundled using webpack. To manage the required configuration, we maintain the `@nativescript/webpack` package.

All new projects come with the base `webpack.config.js` that's pre-configured to build a NativeScript app:

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  // Learn how to customize:
  // https://docs.nativescript.org/webpack

  return webpack.resolveConfig()
}
```

The above config configures most things required to bundle a NativeScript application. Internally it's using [webpack-chain](https://github.com/neutrinojs/webpack-chain) to generate the final config that is passed to webpack.

In some cases you may wish to extend the configuration, which is possible using the [API](https://docs.nativescript.org/configuration/webpack#api) for applications, and the [Plugin API](https://docs.nativescript.org/configuration/webpack#plugin-api) for plugins. This page contains many examples of common things you might want to change in the [Examples of configurations section](https://docs.nativescript.org/configuration/webpack#examples-of-configurations) \- for anything else not mentioned here, refer to the [webpack-chain documentation](https://github.com/neutrinojs/webpack-chain).

## CLI Flags [​](https://docs.nativescript.org/configuration/webpack\#cli-flags)

When running a NativeScript app the following flags have an effect on the final webpack config

### --no-hmr [​](https://docs.nativescript.org/configuration/webpack\#no-hmr)

Disable HMR (enabled by default)

### --env.verbose [​](https://docs.nativescript.org/configuration/webpack\#env-verbose)

Prints verbose logs and the internal config before building

### --env.replace=from:to [​](https://docs.nativescript.org/configuration/webpack\#env-replace-from-to)

Add file replacement rules. For source files ( `.js` and `.ts`) this will add a new alias to the config, for everything else, it will add a new copy rule.

Example:

```bash
--env.replace=./src/environments/environment.ts:./src/environments/environment.prod.ts
```

will add an alias, so the following code

```ts
import { environment } from './environments/environment.ts'
```

would resolve the import path to `./environments/environment.prod.ts`.

### --env.appComponents [​](https://docs.nativescript.org/configuration/webpack\#env-appcomponents)

Allows passing additional App Components for android.

For example if you have a custom activity defined in `myCustomActivity.ts` you can pass `--env.appComponents=myCustomActivity.ts` to include it in the build.

### --env.production [​](https://docs.nativescript.org/configuration/webpack\#env-production)

Enable production mode. This will minify the bundle using Terser.

### --env.report [​](https://docs.nativescript.org/configuration/webpack\#env-report)

Generate a report with the BundleAnalyzerPlugin

### --env.profile [​](https://docs.nativescript.org/configuration/webpack\#env-profile)

Generate a `webpack.stats.json` to analyze on [https://webpack.github.io/analyse/](https://webpack.github.io/analyse/)

### --env.watchNodeModules [​](https://docs.nativescript.org/configuration/webpack\#env-watchnodemodules)

Enable watching `node_modules` for changes. Useful when debugging plugins and making changes directly in `node_modules`.

### --env.e2e [​](https://docs.nativescript.org/configuration/webpack\#env-e2e)

Enables E2E (end-to-end) mode - this currently enables the `testID` property in `@nativescript/core`.

### Additional flags [​](https://docs.nativescript.org/configuration/webpack\#additional-flags)

Additional env flags that are usually passed by the CLI automatically

- `--env.appPath` \- path to the app source (same as `appPath` in the `nativescript.config.ts`)
- `--env.appResourcesPath` \- path to App\_Resources (same as `appResourcesPath` in the `nativescript.config.ts`)
- `--env.nativescriptLibPath` \- path to the currently running CLI's library.
- `--env.android` \- `true` when running on android
- `--env.ios` \- `true` when running on ios
- `--env.platform=<platform>` \- for specifying the platform to use. Can be `android` or `ios`, or a custom platform in the future.
- `--env.hmr` \- `true` when building with HMR enabled

## Global "magic" variables [​](https://docs.nativescript.org/configuration/webpack\#global-magic-variables)

We define a few useful globally available variables that you can use to alter logic in your applications.

- `__DEV__` \- `true` when webpack is building in development mode
```ts
if (__DEV__) {
    // we are running a dev build
}
```

- `global.isAndroid`, (available as `__ANDROID__` too) - `true` when the platform is Android
```ts
if (global.isAndroid) {
    // we are running on android
}
```

- `global.isIOS`, (available as `__IOS__` too) - `true` when the platform is iOS
```ts
if (global.isIOS) {
    // we are running on iOS
}
```


The following variables are also defined, but are primarily intended to be used by NativeScript Core internally, or plugins that wish to use these.

- `__NS_WEBPACK__` \- always `true` when building with webpack
- `__NS_ENV_VERBOSE__` \- `true` when `--env.verbose` is set
- `__NS_DEV_HOST_IPS__` \- an array of IP addresses of the host machine (the machine running the build) when in `development` mode, and an empty array in production mode.
- `__CSS_PARSER__` \- the CSS parser used by NativeScript Core. The value is set based on the `cssParser` value in the `nativescript.config.ts` and defaults to `css-tree`
- `__UI_USE_XML_PARSER__` \- a flag used by NativeScript Core to disable the XML parser when it's not used
- `__UI_USE_EXTERNAL_RENDERER__` \- a flag used by NativeScript Core to disable registering global modules when an external renderer is used.

## Using DotEnv files [​](https://docs.nativescript.org/configuration/webpack\#using-dotenv-files)

[DotEnv](https://github.com/mrsteele/dotenv-webpack) is pre-configured to allow defining environment variables to be made available during runtime. You can create a `.env` file in your project root and define values that will be available to your app during runtime.

In case you need multiple environments, you can create additional env files with the naming convention of `.env.<name>` (e.g. `.env.prod`, `.env.staging`).

The following logic is used when loading environment files:

- `.env` is loaded by default if it exists
- `.env.<name>` is loaded when `--env.env=<name>` is passed to the build/run command and `.env.<name>` exists, otherwise it falls back to loading `.env` (if it exists)

As a general practice, `.env` files should not be committed to your source repository as they can contain sensitive values. Often times a `.env.example` is committed with all the variable names omitting the values, and each developer would then duplicate it to a `.env` or `.env.<name>` file and fill in the values.

### Example DotEnv files [​](https://docs.nativescript.org/configuration/webpack\#example-dotenv-files)

The following files in the project root will make `MY_API_ENDPOINT` and `MY_API_SECRET` available in the app codebase.

```bash
# example .env file
MY_API_ENDPOINT=https://staging-api-host/api/v2
MY_API_SECRET=supersecrettoken
```

```bash
# example .env.prod file
MY_API_ENDPOINT=https://production-api-host/api/v2
MY_API_SECRET=verysuperverysecretverytoken
```

Running the app would allow you to access these variables through `process.env.<VARIABLE_NAME>`.

Note

Please note that the way DotEnv works is it's using the webpack [DefinePlugin](https://docs.nativescript.org/configuration/webpack#extending-the-defineplugin-options) internally to define the `process.env.<VARIABLE_NAME>` values, meaning they are essentially statically replaced in the bundled code. This is important to keep in mind because destructuring, or looping over `process` or `process.env` is not possible.

See details about the limitations in the [DotEnv documentation](https://github.com/mrsteele/dotenv-webpack#limitations)

```ts
// default, no flags - loaded from .env by default

console.log(process.env.MY_API_ENDPOINT) // https://staging-api-host/api/v2
console.log(process.env.MY_API_SECRET) // supersecrettoken
```

```ts
// With --env.env=prod: loaded from .env.prod

console.log(process.env.MY_API_ENDPOINT) // https://production-api-host/api/v2
console.log(process.env.MY_API_SECRET) // verysuperverysecretverytoken
```

```ts
// With --env.env=nonexistent: falls back to .env

console.log(process.env.MY_API_ENDPOINT) // https://staging-api-host/api/v2
console.log(process.env.MY_API_SECRET) // supersecrettoken
```

## Configuration examples [​](https://docs.nativescript.org/configuration/webpack\#configuration-examples)

Here are some common examples of things you may want to do in your `webpack.config.js`.

Note that the config is built using [webpack-chain](https://github.com/neutrinojs/webpack-chain), so the `config` variable in all the examples below are instances of a chainable config. You can find more examples in webpack-chain's documentation as well as read the [source of the base configs](https://github.com/NativeScript/NativeScript/tree/fb2c29106378f21583d890174f1c5a6bca6e6b8a/packages/webpack5/src/configuration) to see how we implemented them.

### Adding a copy rule [​](https://docs.nativescript.org/configuration/webpack\#adding-a-copy-rule)

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  // Example: copy all markdown files to the build directory
  webpack.Utils.addCopyRule('**/*.md')

  // Example: copy all files from a dependency
  webpack.Utils.addCopyRule({
    from: '@nativescript/webpack/stubs',
    to: 'custom/location',
    // the context of the "from" rule, in this case node_modules
    // we used the getProjectFilePath util here, but this could have been
    // a path.resolve(__dirname, 'node_modules') too.
    context: webpack.Utils.project.getProjectFilePath('node_modules'),
  })

  return webpack.resolveConfig()
}
```

For all the valid options you can pass, refer to the [CopyWebpackPlugin Documentation](https://webpack.js.org/plugins/copy-webpack-plugin/#patterns)

### Adding a plugin [​](https://docs.nativescript.org/configuration/webpack\#adding-a-plugin)

js

```
const webpack = require('@nativescript/webpack')

// import the plugin first
const { BannerPlugin } = require('webpack')

module.exports = (env) => {
  webpack.init(env)

  // first we add our callback to the internal chain
  webpack.chainWebpack((config) => {
    // we add the plugin
    config.plugin('BannerPlugin').use(BannerPlugin, [\
      {\
        banner: 'hello world',\
      },\
    ])
  })

  return webpack.resolveConfig()
}
```

The second argument of the `.use` call is an array of arguments you would pass to the plugin. For example, the above example is converted from the official BannerPlugin docs that stated the following:

js

```
new webpack.BannerPlugin({
  banner: 'hello world',
})
```

### Adding a resolver plugin [​](https://docs.nativescript.org/configuration/webpack\#adding-a-resolver-plugin)

js

```
const webpack = require('@nativescript/webpack')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.resolve.plugin('TsconfigPathsPlugin').use(TsconfigPathsPlugin)
  })

  return webpack.resolveConfig()
}
```

### Adding a loader [​](https://docs.nativescript.org/configuration/webpack\#adding-a-loader)

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    // add a new rule for *.something files
    config.module
      .rule('something')
      .test(/\.something$/)
      .use('something-loader')
      .loader('something-loader')
      .options({
        example: true,
      })
  })

  return webpack.resolveConfig()
}
```

### Adding Externals [​](https://docs.nativescript.org/configuration/webpack\#adding-externals)

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.externals(
      // make sure to keep pre-defined externals
      config.get('externals').concat([\
        // add your own externals\
        'some-external-dependency',\
      ]),
    )
  })

  return webpack.resolveConfig()
}
```

### Adding path aliases [​](https://docs.nativescript.org/configuration/webpack\#adding-path-aliases)

You can define `import`-aliases for specific source directories.

js

```
const webpack = require('@nativescript/webpack')
const { resolve } = require('path')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    // change the "@" alias to "app/libs"
    config.resolve.alias.set('@', resolve(__dirname, 'app/libs'))
  })

  return webpack.resolveConfig()
}
```

### Extending the DefinePlugin options [​](https://docs.nativescript.org/configuration/webpack\#extending-the-defineplugin-options)

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.plugin('DefinePlugin').tap((args) => {
      Object.assign(args[0], {
        'global.isProduction': !!env.production,
        'global.someNumber': 42,
        'global.someString': JSON.stringify('some string value'),
      })

      return args
    })
  })

  return webpack.resolveConfig()
}
```

### Changing an existing rule [​](https://docs.nativescript.org/configuration/webpack\#changing-an-existing-rule)

To change an existing rule, it's useful to know how it has been set up first:

```bash
ns prepare android|ios --env.verbose
# Note: we plan to add a separate command to just print the internal config
```

Will print the resolved internal config with helpful comments above each rule that you can grab and use. For example:

js

```
// ...
/* config.module.rule('js') */
{
  test: /\.js$/,
  exclude: [\
    /node_modules/\
  ],
  use: [\
    /* config.module.rule('js').use('babel-loader') */\
    {\
      loader: 'babel-loader',\
      options: {\
        generatorOpts: {\
          compact: false\
        }\
      }\
    }\
  ]
},
// ...
```

To add a new loader, we can use the same syntax we used above for adding new loaders:

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.module
      .rule('js')
      .use('something-loader')
      .loader('something-loader')
      .options({
        example: true,
      })
  })

  return webpack.resolveConfig()
}
```

### Changing an existing loader options [​](https://docs.nativescript.org/configuration/webpack\#changing-an-existing-loader-options)

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.module
      .rule('scss')
      .use('sass-loader')
      .options({ sassOptions: { indentedSyntax: true } })
  })

  return webpack.resolveConfig()
}
```

### Changing an existing plugin configuration [​](https://docs.nativescript.org/configuration/webpack\#changing-an-existing-plugin-configuration)

Let's change the BannerPlugin we added above:

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.plugin('BannerPlugin').tap((args) => {
      // args is and Array of all the arguments passed to the BannerPlugin constructor

      // args[0] is the first argument, which we set above.
      // be careful when accessing an array index
      // and do proper checks before writing to
      // avoid errors
      args[0].banner = 'changed banner.'

      // should always return all the arguments that should be passed to the plugin constructor
      // in some cases you may want to remove an argument - you can do that by returning an array
      // with that argument removed from it.
      return args
    })
  })

  return webpack.resolveConfig()
}
```

### Explicitly set base config [​](https://docs.nativescript.org/configuration/webpack\#explicitly-set-base-config)

In some cases, you may want to explicitly set which base config should be used.

For example in the NativeScript-Vue repository, the `sample` app doesn't have `nativescript-vue` listed as a dependency, so we have to specify the base config we want to use.

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  // set the base config
  // can be false to opt out from using a base config (used mostly in tests)
  // or can be one of the base configs: base, angular, javascript, react, svelte, typescript, vue
  webpack.useConfig('vue')

  return webpack.resolveConfig()
}
```

### Suppressing warnings [​](https://docs.nativescript.org/configuration/webpack\#suppressing-warnings)

If your build produces warnings that you want to hide, you can do that with the following:

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  webpack.chainWebpack((config) => {
    config.set(
      'ignoreWarnings',
      (config.get('ignoreWarnings') || []).concat([\
        /a regex that matches the warning to suppress/,\
      ]),
    )
  })

  return webpack.resolveConfig()
}
```

### Merging options into the config [​](https://docs.nativescript.org/configuration/webpack\#merging-options-into-the-config)

For simple things, you can merge objects into the final config instead of using `chainWebpack`

js

```
const webpack = require('@nativescript/webpack')

module.exports = (env) => {
  webpack.init(env)

  // merge a simple object
  webpack.mergeWebpack({ mode: 'production' })

  // using a function
  webpack.mergeWebpack((env) => {
    // return the object to be merged
    return {
      mode: 'production',
    }
  })

  return webpack.resolveConfig()
}
```

## Plugin API [​](https://docs.nativescript.org/configuration/webpack\#plugin-api)

NativeScript plugins can provide a `nativescript.webpack.js` file in their root folder (next to `package.json`), and `@nativescript/webpack` will include these configs when resolving the final config.

For example, a plugin could register a new loader it requires:

js

```
/**
 * This optionally provides typehints
 * this requires "@nativescript/webpack" to be a dependency (dev)
 *
 * @param {typeof import("@nativescript/webpack")} webpack
 */
module.exports = (webpack) => {
  // same API as the user configs
  // for example make changes to the internal config with webpack-chain
  webpack.chainWebpack(
    (config, env) => {
      // as an example - add a new rule for svg files
      config.module
        .rule('something')
        .test(/\.something$/)
        .use('something-loader')
        .loader('something-loader')
    } /*, options */,
  )
}
```

## API [​](https://docs.nativescript.org/configuration/webpack\#api)

### init [​](https://docs.nativescript.org/configuration/webpack\#init)

```ts
webpack.init(env: IWebpackEnv): void
```

**Required**: initialize the internal `env` object that's used throughout the config building process.

The passed env should be an object containing key-value pairs. This is generally handled by webpack.

* * *

### useConfig [​](https://docs.nativescript.org/configuration/webpack\#useconfig)

```ts
webpack.useConfig(config: string | false): void
```

_Optional_: specify base config - defaults to auto-discovery.

Passing `false` will opt-out from using a base config, however this is generally never recommended.

* * *

### chainWebpack [​](https://docs.nativescript.org/configuration/webpack\#chainwebpack)

```ts
webpack.chainWebpack(chainFn, options?): void
```

_Optional_: add a new `chainFn` to the internal chain that will be called while resolving the final config.

The `chainFn` should be a function that accepts 2 parameters — `config` and `env`.

The `options` is an optional object with the following optional properties:

- `order: number`: controls the order in which the `chainFn` should be applied.

Useful when related plugins rely on changes made in the right order. For example, `plugin1` can specify `order: 1` and `plugin2` can specify `order: 2` \- this will guarantee that `plugin1`'s `chainFn` is called first, and that `plugin2` can rely on values set by `plugin1`.


**Example: Force production mode**

js

```
webpack.chainWebpack((config, env) => {
  config.mode('production')
})
```

**Example: Run a config "last"**

Setting `order: 10` doesn't necessarily guarantee the `chainFn` will be applied last, since other calls to `chainWebpack` could specify a higher number. We recommend against setting higher values, and using `10` as a conventional "last".

js

```
webpack.chainWebpack(
  (config, env) => {
    config.set('somethingThatShouldBeSetLast', true)
  },
  { order: 10 },
)
```

* * *

### mergeWebpack [​](https://docs.nativescript.org/configuration/webpack\#mergewebpack)

```ts
webpack.mergeWebpack(mergeFnOrObject): void
```

_Optional_: merges an object (or an object returned by a function) into the resolved chain config.

**Example**

js

```
// merge an object into the internal config
webpack.mergeWebpack({
  something: true,
})
// or pass a function that returns an object
webpack.mergeWebpack((env) => {
  return {
    something: true,
  }
})
```

* * *

### resolveChainableConfig [​](https://docs.nativescript.org/configuration/webpack\#resolvechainableconfig)

```ts
webpack.resolveChainableConfig(): ChainableConfig // Config from webpack-chain
```

Resolve a new instance of the internal chain config with all chain functions applied.

* * *

### resolveConfig [​](https://docs.nativescript.org/configuration/webpack\#resolveconfig)

```ts
webpack.resolveConfig(): Config // Config from webpack
```

Resolve a "final" configuration that has all chain functions and merges applied.

This returns a config that webpack can process.

2. [CLI Flags](https://docs.nativescript.org/configuration/webpack#cli-flags)
01. [--no-hmr](https://docs.nativescript.org/configuration/webpack#no-hmr)
02. [--env.verbose](https://docs.nativescript.org/configuration/webpack#env-verbose)
03. [--env.replace=from:to](https://docs.nativescript.org/configuration/webpack#env-replace-from-to)
04. [--env.appComponents](https://docs.nativescript.org/configuration/webpack#env-appcomponents)
05. [--env.production](https://docs.nativescript.org/configuration/webpack#env-production)
06. [--env.report](https://docs.nativescript.org/configuration/webpack#env-report)
07. [--env.profile](https://docs.nativescript.org/configuration/webpack#env-profile)
08. [--env.watchNodeModules](https://docs.nativescript.org/configuration/webpack#env-watchnodemodules)
09. [--env.e2e](https://docs.nativescript.org/configuration/webpack#env-e2e)
10. [Additional flags](https://docs.nativescript.org/configuration/webpack#additional-flags)
3. [Global "magic" variables](https://docs.nativescript.org/configuration/webpack#global-magic-variables)
4. [Using DotEnv files](https://docs.nativescript.org/configuration/webpack#using-dotenv-files)
1. [Example DotEnv files](https://docs.nativescript.org/configuration/webpack#example-dotenv-files)
5. [Configuration examples](https://docs.nativescript.org/configuration/webpack#configuration-examples)
01. [Adding a copy rule](https://docs.nativescript.org/configuration/webpack#adding-a-copy-rule)
02. [Adding a plugin](https://docs.nativescript.org/configuration/webpack#adding-a-plugin)
03. [Adding a resolver plugin](https://docs.nativescript.org/configuration/webpack#adding-a-resolver-plugin)
04. [Adding a loader](https://docs.nativescript.org/configuration/webpack#adding-a-loader)
05. [Adding Externals](https://docs.nativescript.org/configuration/webpack#adding-externals)
06. [Adding path aliases](https://docs.nativescript.org/configuration/webpack#adding-path-aliases)
07. [Extending the DefinePlugin options](https://docs.nativescript.org/configuration/webpack#extending-the-defineplugin-options)
08. [Changing an existing rule](https://docs.nativescript.org/configuration/webpack#changing-an-existing-rule)
09. [Changing an existing loader options](https://docs.nativescript.org/configuration/webpack#changing-an-existing-loader-options)
10. [Changing an existing plugin configuration](https://docs.nativescript.org/configuration/webpack#changing-an-existing-plugin-configuration)
11. [Explicitly set base config](https://docs.nativescript.org/configuration/webpack#explicitly-set-base-config)
12. [Suppressing warnings](https://docs.nativescript.org/configuration/webpack#suppressing-warnings)
13. [Merging options into the config](https://docs.nativescript.org/configuration/webpack#merging-options-into-the-config)
6. [Plugin API](https://docs.nativescript.org/configuration/webpack#plugin-api)
7. [API](https://docs.nativescript.org/configuration/webpack#api)
1. [init](https://docs.nativescript.org/configuration/webpack#init)
2. [useConfig](https://docs.nativescript.org/configuration/webpack#useconfig)
3. [chainWebpack](https://docs.nativescript.org/configuration/webpack#chainwebpack)
4. [mergeWebpack](https://docs.nativescript.org/configuration/webpack#mergewebpack)
5. [resolveChainableConfig](https://docs.nativescript.org/configuration/webpack#resolvechainableconfig)
6. [resolveConfig](https://docs.nativescript.org/configuration/webpack#resolveconfig)

## NativeScript Navigation Guide

When it comes to navigation, there are two primary types of navigation, regular navigation using [Frame](https://docs.nativescript.org/ui/frame) & [Page](https://docs.nativescript.org/ui/frame), and navigation using modals. The key difference is the handling of the backstack and the back button—modals allow navigating the user through a "detached" flow, while Frames & Pages usually keep track of the backstack. It's important to note that modals can have their own Frame & Page backstack too, allowing for great flexibility when designing the navigation of your app.

- [Navigation using Frames and Pages](https://docs.nativescript.org/guide/navigation/frames-and-pages)
- [Navigation using Modals](https://docs.nativescript.org/guide/navigation/modals)

## Example user flow [​](https://docs.nativescript.org/guide/navigation/\#example-user-flow)

For example, let's assume we have a **Home Page**, from which the user can navigate to a **List Page**. On the **List Page** the user is able to tweak some filters, we can show these in a modal to not disrupt the backstack/back button flow. When the user taps on a list item, we navigate to a **Details Page**. On the **Details Page** the user can view an additional **Info Page** in the **Info Modal** and navigate around further without disrupting the main backstack, once the **Info Modal** is closed, the user can continue navigating forwards and back in the **Main Frame**.

![](https://docs.nativescript.org/assets/Frame_Page_Modal_Timeline.drawio.5e028c34.svg)

2. [Example user flow](https://docs.nativescript.org/guide/navigation/#example-user-flow)

## Network Connectivity APIs

`Connectivity` provides easy-to-use APIs consolidating the appropriate platform native APIs to interact with the network's connection type and availability.

## Using Connectivity [​](https://docs.nativescript.org/core/connectivity\#using-connectivity)

To use Connectivity, import it from `@nativescript/core`.

```ts
import { Connectivity } from '@nativescript/core'
```

### Getting the current connection type [​](https://docs.nativescript.org/core/connectivity\#getting-the-current-connection-type)

To check what type of network is currently connected use the [getConnectionType()](https://docs.nativescript.org/core/connectivity#getConnectionType) method.

```ts
const connectionType: number = Connectivity.getConnectionType()

if (connectionType) {
  // `Connectivity.connectionType.none`` is `0` so truthiness can be used to determine if the device is connected to any type of network
  fetch('https://httpbin.org/get')
    .then((response) => response.text())
    .then((result) => console.log(`Fetched ${result} with ${connectionType}`))
} else {
  console.log('Not connected to a network.')
}
```

Conditional behavior can easily be added for certain types of connections using the `Connectivity.connectionType` enum.

```ts
if (
  connectionType === Connectivity.connectionType.wifi ||
  connectionType === Connectivity.connectionType.ethernet
) {
  // Download large file
} else {
  // Download mobile friendly file
}
```

### Monitor changes to the connection type [​](https://docs.nativescript.org/core/connectivity\#monitor-changes-to-the-connection-type)

Using the [startMonitoring()](https://docs.nativescript.org/core/connectivity#startMonitoring) method changes to the connection type can be observed.

```ts
Connectivity.startMonitoring((change: number) => {
  switch (change) {
    case Connectivity.connectionType.wifi:
    case Connectivity.connectionType.ethernet:
      console.log('Connected to home network')
      break
    case Connectivity.connectionType.mobile:
    case Connectivity.connectionType.bluetooth:
      console.log('Connected to mobile network')
      break
    case Connectivity.connectionType.vpn:
      console.log('Connected to vpn network')
      break
    default:
      console.log('Not connected to any network')
      break
  }
})
```

If you wish to halt the monitoring of connectivity changes, use the [stopMonitoring()](https://docs.nativescript.org/core/connectivity#stopMonitoring) function.

```ts
Connectivity.stopMonitoring()
```

## API [​](https://docs.nativescript.org/core/connectivity\#api)

### getConnectionType() [​](https://docs.nativescript.org/core/connectivity\#getconnectiontype)

```ts
Connectivity.getConnectionType(): number
```

This method retrieves the current connection type. It returns a number value representing one of the `connectionType` enumeration values.

Note

For Android, the `android.permission.ACCESS_NETWORK_STATE` permission must be added to the `AndroidManifest.xml` file to use this method.

* * *

### startMonitoring() [​](https://docs.nativescript.org/core/connectivity\#startmonitoring)

```ts
Connectivity.startMonitoring(connectionTypeChangedCallback: (newConnectionType: number) => void): void
```

This method initiates the monitoring of the network connection type. The `connectionTypeChangedCallback` is a function that will be invoked when the network connection type changes.

* * *

### stopMonitoring() [​](https://docs.nativescript.org/core/connectivity\#stopmonitoring)

```ts
Connectivity.stopMonitoring()
```

This method halts the monitoring of the network connection type.

* * *

### connectionType [​](https://docs.nativescript.org/core/connectivity\#connectiontype)

```ts
Connectivity.connectionType: number
```

This enumeration defines the different possible connection types.

More connection types

- `none = 0`
- `wifi = 1`
- `mobile = 2`,
- `ethernet = 3`,
- `bluetooth = 4`,
- `vpn = 5`

* * *

## API Reference(s) [​](https://docs.nativescript.org/core/connectivity\#api-reference-s)

- [@nativescript/core/connectivity](https://docs.nativescript.org/api/namespace/Connectivity) module
- [connectionType](https://docs.nativescript.org/api/enum/Connectivity-connectionType) enum

## Native Component [​](https://docs.nativescript.org/core/connectivity\#native-component)

- `Android`: [CONNECTIVITY\_SERVICE (android.content.Context)](https://developer.android.com/reference/android/content/Context)
- `iOS`: [SCNetworkReachability](https://developer.apple.com/documentation/systemconfiguration/scnetworkreachability-g7d)

2. [Using Connectivity](https://docs.nativescript.org/core/connectivity#using-connectivity)
1. [Getting the current connection type](https://docs.nativescript.org/core/connectivity#getting-the-current-connection-type)
2. [Monitor changes to the connection type](https://docs.nativescript.org/core/connectivity#monitor-changes-to-the-connection-type)
3. [API](https://docs.nativescript.org/core/connectivity#api)
1. [getConnectionType()](https://docs.nativescript.org/core/connectivity#getconnectiontype)
2. [startMonitoring()](https://docs.nativescript.org/core/connectivity#startmonitoring)
3. [stopMonitoring()](https://docs.nativescript.org/core/connectivity#stopmonitoring)
4. [connectionType](https://docs.nativescript.org/core/connectivity#connectiontype)
4. [API Reference(s)](https://docs.nativescript.org/core/connectivity#api-reference-s)
5. [Native Component](https://docs.nativescript.org/core/connectivity#native-component)

## NativeScript Button Component

`<Button>` is a UI component that displays a button which reacts to user gestures.

For more information about the available gestures, see [Gestures](https://docs.nativescript.org/guide/gestures).

![](https://docs.nativescript.org/assets/Button.5e246a6f.png)

![](https://docs.nativescript.org/assets/Button.88434d8a.png)

```xml
<Button text="This is a button!" />
```

```html
<button text="This is a button!" (tap)="tapMe($event)"></button>
```

```tsx
<button
  onTap={() => {
    alert('Button Clicked')
  }}
>
  Click Me
</button>
```

```tsx
<button on:tap={() => alert('button clicked')}>Click Me</button>
```

```svelte
<button text="this is a button" on:tap={showAlert}></button>
```

```vue
<Button text="This is a button!" @tap="showAlert"></Button>
```

## Examples [​](https://docs.nativescript.org/ui/button\#examples)

### Formatting text inside a Button [​](https://docs.nativescript.org/ui/button\#formatting-text-inside-a-button)

If you need to style parts of the text, you can use a combination of a `FormattedString` and `Span` elements.

```xml
<Button>
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Button>
```

## Props [​](https://docs.nativescript.org/ui/button\#props)

### text [​](https://docs.nativescript.org/ui/button\#text)

```ts
text: string
```

Sets the text shown in the button.

### textWrap [​](https://docs.nativescript.org/ui/button\#textwrap)

```ts
textWrap: boolean
```

Gets or sets whether the button should wrap longer text to new lines.

Default value is `false`.

### isEnabled [​](https://docs.nativescript.org/ui/button\#isenabled)

```ts
isEnabled: boolean
```

Allows disabling the button. A disabled button does not react to user gestures.

Default value is `true`.

### ...Inherited [​](https://docs.nativescript.org/ui/button\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Button).

## Events [​](https://docs.nativescript.org/ui/button\#events)

### tap [​](https://docs.nativescript.org/ui/button\#tap)

```ts
on('tap', (args: TapGestureEventData) => {
  const button = args.object as Button
  console.log(`The button has been tapped!`)
})
```

Emitted when the button is tapped

See [TapGestureEventData](https://docs.nativescript.org/api/interface/TapGestureEventData).

## Native component [​](https://docs.nativescript.org/ui/button\#native-component)

- Android: [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html)
- iOS: [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton)

2. [Examples](https://docs.nativescript.org/ui/button#examples)
1. [Formatting text inside a Button](https://docs.nativescript.org/ui/button#formatting-text-inside-a-button)
3. [Props](https://docs.nativescript.org/ui/button#props)
1. [text](https://docs.nativescript.org/ui/button#text)
2. [textWrap](https://docs.nativescript.org/ui/button#textwrap)
3. [isEnabled](https://docs.nativescript.org/ui/button#isenabled)
4. [...Inherited](https://docs.nativescript.org/ui/button#inherited)
4. [Events](https://docs.nativescript.org/ui/button#events)
1. [tap](https://docs.nativescript.org/ui/button#tap)
5. [Native component](https://docs.nativescript.org/ui/button#native-component)

## NativeScript Dialogs

NativeScript offers various dialogs, available via the `Dialogs` import from `@nativescript/core`, or globally.

```ts
import { Dialogs } from '@nativescript/core'

Dialogs.alert(options)
Dialogs.action(options)
Dialogs.confirm(options)
Dialogs.prompt(options)
Dialogs.login(options)

// is the same as:
alert(options)
action(options)
confirm(options)
prompt(options)
login(options)
```

All dialogs take a `DialogOptions` object with the properties:

- `title`: Sets the dialog title.
- `message` : Sets the dialog message.
- `cancelable` ( **Android only**): Sets if the dialog can be canceled by taping outside of the dialog.
- `theme` ( **Android only**): Sets the theme of the Dialog. Usable themes can be found in [R.style](https://developer.android.com/reference/android/R.style)

See [DialogOptions](https://docs.nativescript.org/api/interface/DialogOptions), [R.style](https://developer.android.com/reference/android/R.style).

## Avialable Dialogs [​](https://docs.nativescript.org/ui/dialogs\#avialable-dialogs)

### Alert [​](https://docs.nativescript.org/ui/dialogs\#alert)

![](https://docs.nativescript.org/assets/Dialogs-Alert.5178d13c.png)

![](https://docs.nativescript.org/assets/Dialogs-Alert.e5fce53e.png)

```ts
Dialogs.alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
```

HTMLTypeScript

```html
<Button
  text="Alert"
  (tap)="showAlert()"
></Button>
```

```ts
showAlert() {
  Dialogs.alert({
    title: 'Alert!',
    message: 'Please try again later.',
    okButtonText: 'OK',
    cancelable: true,
  })
}
```

```tsx
Dialogs.alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
```

```tsx
Dialogs.alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
```

```svelte
Dialogs.alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
```

```vue
Dialogs.alert({
  title: 'Alert!',
  message: 'Please try again later.',
  okButtonText: 'OK',
  cancelable: true,
})
```

A dialog for alerting the user.

See [alert()](https://docs.nativescript.org/api/#alert).

### Action [​](https://docs.nativescript.org/ui/dialogs\#action)

![](https://docs.nativescript.org/assets/Dialogs-Action.f360d3ba.png)

![](https://docs.nativescript.org/assets/Dialogs-Action.7978c5f6.png)

```ts
Dialogs.action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
}).then((result) => {
  console.log(result)
})
```

HTMLTypeScript

```html
<Button
  text="Action"
  (tap)="showAction()"
></Button>
```

```ts
showAction() {
  Dialogs.action({
    title: 'Action!',
    message: 'Choose your language:',
    cancelButtonText: 'Cancel',
    actions: ['TypeScript', 'JavaScript', 'Neither'],
    cancelable: true,
    destructiveActionsIndexes: [2],
  }).then((result) => {
    console.log(result)
  })
}
```

```tsx
Dialogs.action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
})
```

```tsx
Dialogs.action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
})
```

```svelte
Dialogs.action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
})
```

```vue
Dialogs.action({
  title: 'Action!',
  message: 'Choose your language:',
  cancelButtonText: 'Cancel',
  actions: ['TypeScript', 'JavaScript', 'Neither'],
  cancelable: true,
  destructiveActionsIndexes: [2],
}).then((result) => {
  console.log(result)
})
```

A dialog for prompting the user to choose.

**Note**: `destructiveActionsIndexes` allows setting some actions as destructive - shown in red. **iOS only.**

See [action()](https://docs.nativescript.org/api/#action).

### Confirm [​](https://docs.nativescript.org/ui/dialogs\#confirm)

![](https://docs.nativescript.org/assets/Dialogs-Confirm.0782c165.png)

![](https://docs.nativescript.org/assets/Dialogs-Confirm.9dcee399.png)

```ts
Dialogs.confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
}).then((result) => {
  console.log(result)
})
```

HTMLTypeScript

```html
<Button
  text="Confirm"
  (tap)="showConfirm()"
></Button>
```

```ts
showConfirm() {
  Dialogs.confirm({
    title: 'Confirm!',
    message: 'Are you sure you want to do this?',
    okButtonText: 'Yes',
    cancelButtonText: 'No',
    neutralButtonText: 'Cancel',
  }).then((result) => {
    console.log(result)
  })
}
```

```tsx
Dialogs.confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
})
```

```tsx
Dialogs.confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
})
```

```svelte
Dialogs.confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
})
```

```vue
Dialogs.confirm({
  title: 'Confirm!',
  message: 'Are you sure you want to do this?',
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  neutralButtonText: 'Cancel',
}).then((result) => {
  console.log(result)
})
```

A dialog for prompting the user to confirm.

See [confirm()](https://docs.nativescript.org/api/#confirm).

### Prompt [​](https://docs.nativescript.org/ui/dialogs\#prompt)

![](https://docs.nativescript.org/assets/Dialogs-Prompt.e5876065.png)

![](https://docs.nativescript.org/assets/Dialogs-Prompt.5b4ad2fc.png)

```ts
Dialogs.prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
}).then((result) => {
  console.log(result)
})
```

HTMLTypeScript

```html
<Button
  text="Prompt"
  (tap)="showPrompt()"
></Button>
```

```ts
showPrompt() {
  Dialogs.prompt({
    title: 'Prompt!',
    message: 'Enter the name of this framework:',
    defaultText: 'NativeScript',
    okButtonText: 'OK',
    neutralButtonText: 'Cancel',
    // cancelable: true,
    // cancelButtonText: 'Cancel',
    // capitalizationType: 'none',
    // inputType: 'email',
  }).then((result) => {
    console.log(result)
  })
}
```

```tsx
Dialogs.prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
})
```

```tsx
Dialogs.prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
})
```

```svelte
Dialogs.prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
})
```

```vue
Dialogs.prompt({
  title: 'Prompt!',
  message: 'Enter the name of this framework:',
  defaultText: 'NativeScript',
  okButtonText: 'OK',
  neutralButtonText: 'Cancel',
  // cancelable: true,
  // cancelButtonText: 'Cancel',
  // capitalizationType: 'none',
  // inputType: 'email',
}).then((result) => {
  console.log(result)
})
```

A dialog for prompting the user for input.

- `defaultText`: Sets the default text to display in the input box.
- `inputType`: Sets the prompt input type: `email`, `decimal`, `phone`, `number`, `text`, `password`, or `email`
- `capitalizationType`: Sets the prompt capitalization type. Avalable options: `none`, `allCharacters`, `sentences`, or `words`.

See [prompt()](https://docs.nativescript.org/api/#prompt), [CoreTypes.AutocapitalizationType](https://docs.nativescript.org/api/namespace/CoreTypes-AutocapitalizationType)

### Login [​](https://docs.nativescript.org/ui/dialogs\#login)

![](https://docs.nativescript.org/assets/Dialogs-Login.fee16420.png)

![](https://docs.nativescript.org/assets/Dialogs-Login.ffcf2c76.png)

```ts
Dialogs.login({
  title: 'Login!',
  message: 'Enter your credentials',
  okButtonText: 'Login',
  cancelButtonText: 'Cancel',
  userName: 'NativeScript',
  password: 'hunter2',
  // neutralButtonText: 'Neutral',
  // cancelable: true,
  // passwordHint: 'Your password',
  // userNameHint: 'Your username',
}).then((result) => {
  console.log(result)
})
```

HTMLTypeScript

```html
<Button
  text="Login"
  (tap)="showLogin()"
></Button>
```

```ts
showLogin() {
  Dialogs.login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  }).then((result) => {
    console.log(result)
  })
}
```

```tsx
Dialogs.login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  })
}
```

```tsx
Dialogs.login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  })
}
```

```svelte
Dialogs.login({
    title: 'Login!',
    message: 'Enter your credentials',
    okButtonText: 'Login',
    cancelButtonText: 'Cancel',
    userName: 'NativeScript',
    password: 'hunter2',
    // neutralButtonText: 'Neutral',
    // cancelable: true,
    // passwordHint: 'Your password',
    // userNameHint: 'Your username',
  })
}
```

```vue
Dialogs.login({
  title: 'Login!',
  message: 'Enter your credentials',
  okButtonText: 'Login',
  cancelButtonText: 'Cancel',
  userName: 'NativeScript',
  password: 'hunter2',
  // neutralButtonText: 'Neutral',
  // cancelable: true,
  // passwordHint: 'Your password',
  // userNameHint: 'Your username',
}).then((result) => {
  console.log(result)
})
```

A dialog for prompting the user for credentials.

See [login()](https://docs.nativescript.org/api/#login).

## Native Component [​](https://docs.nativescript.org/ui/dialogs\#native-component)

- Android: [android.app.AlertDialog.Builder](https://developer.android.com/reference/android/app/AlertDialog.Builder)
- iOS: [UIAlertController](https://developer.apple.com/documentation/uikit/uialertcontroller)

2. [Avialable Dialogs](https://docs.nativescript.org/ui/dialogs#avialable-dialogs)
1. [Alert](https://docs.nativescript.org/ui/dialogs#alert)
2. [Action](https://docs.nativescript.org/ui/dialogs#action)
3. [Confirm](https://docs.nativescript.org/ui/dialogs#confirm)
4. [Prompt](https://docs.nativescript.org/ui/dialogs#prompt)
5. [Login](https://docs.nativescript.org/ui/dialogs#login)
3. [Native Component](https://docs.nativescript.org/ui/dialogs#native-component)

## Developing for Vision Pro

![Vision Pro](https://docs.nativescript.org/assets/vision-pro.420753ac.png)

Apple provides [visionOS](https://developer.apple.com/visionos/) development starting with [Xcode 15.2](https://developer.apple.com/xcode/resources/) or higher.

Note

You will need an [Apple developer account](https://developer.apple.com/programs/enroll/) to download developer tools and SDKs.

[Building visionOS apps with NativeScript ~ Choose the flavor you love](https://www.youtube.com/watch?v=1NGoY74-vZc)

## Create a visionOS project [​](https://docs.nativescript.org/guide/visionos\#create-a-visionos-project)

You can develop with a physical Vision Pro plugged in or using the Vision Pro Simulator.

**You will need at least the 8.7+ NativeScript CLI**:

```bash
npm install -g nativescript@latest
```

You can now use the `--vision` (or `--visionos`) flags when creating your app.

```bash
ns create myapp --vision
```

This will setup a preconfigured visionOS ready app using a plain TypeScript base.

If you prefer a flavor, you can use any of the following:

- [Angular](https://angular.io/): `ns create myapp --vision-ng`
- [React](https://react.dev/): `ns create myapp --vision-react`
- [Solid](https://www.solidjs.com/): `ns create myapp --vision-solid`
- [Svelte](https://svelte.dev/): `ns create myapp --vision-svelte`
- [Vue (3.x)](https://vuejs.org/): `ns create myapp --vision-vue`

All projects are preconfigured with [tailwindcss](https://tailwindcss.com/).

### Run your visionOS project [​](https://docs.nativescript.org/guide/visionos\#run-your-visionos-project)

Open the Vision Pro Simulator, then run your app with:

```bash
ns run vision --no-hmr
```

The `vision` platform target is a shorthand alias for `visionos` so this can also be used:

```bash
ns run visionos --no-hmr
```

#### Develop with physical Vision Pro [​](https://docs.nativescript.org/guide/visionos\#develop-with-physical-vision-pro)

You can use a [Developer Strap](https://developer.apple.com/visionos/developer-strap/purchase) to connect your Vision Pro to your Mac.

> The Developer Strap is an optional accessory that provides a USB-C connection between Apple Vision Pro and Mac and is helpful for accelerating the development of graphics-intensive apps and games. The Developer Strap provides the same audio experience as the in-box Right Audio Strap, so developers can keep the Developer Strap attached for both development and testing.

Once connected, you can run `ns device` to list all connected physical devices:

```bash
% ns device
Searching for devices...

 Connected devices & emulators
┌───┬──────────────────┬──────────┬───────────────────────────┬────────┬───────────┬─────────────────┐
│ # │ Device Name      │ Platform │ Device Identifier         │ Type   │ Status    │ Connection Type │
│ 1 │ Apple Vision Pro │ visionOS │ 00008112-001A10812278A01E │ Device │ Connected │ USB             │
```

You can then run on that device as follows:

```bash
ns run visionos --no-hmr --device=00008112-001A10812278A01E
```

### What makes a project work on visionOS? [​](https://docs.nativescript.org/guide/visionos\#what-makes-a-project-work-on-visionos)

Primarily 2 key elements make up a NativeScript driven visionOS project:

1. `App_Resources/visionOS/src/NativeScriptApp.swift`
2. The following dependencies:

json

```
{
  "dependencies": {
    "@nativescript/core": "~8.8.0"
  },
  "devDependencies": {
    "@nativescript/visionos": "~8.8.0",
    "@nativescript/webpack": "~5.0.0"
  }
}
```

## Design Guidelines and Notes [​](https://docs.nativescript.org/guide/visionos\#design-guidelines-and-notes)

We strongly encourage developers to understand and use Apple's system glass materials throughout their apps in addition to closely following their design guidelines.

We recommend watching the following WWDC 2023 videos covering visionOS for fundamental understandings:

- [Design for spatial user interfaces](https://developer.apple.com/videos/play/wwdc2023/10076/)
- [Design considerations for vision and motion](https://developer.apple.com/videos/play/wwdc2023/10078/)
- [Meet UIKit for spatial computing](https://developer.apple.com/videos/play/wwdc2023/111215/)
- [Create accessible spatial experiences](https://developer.apple.com/videos/play/wwdc2023/10034/)
- [Explore immersive sound design](https://developer.apple.com/videos/play/wwdc2023/10271/)
- [Deliver video content for spatial experiences](https://developer.apple.com/videos/play/wwdc2023/10071/)
- [Create a great spatial playback experience](https://developer.apple.com/videos/play/wwdc2023/10070/)

You may by interested in more [here](https://developer.apple.com/videos/wwdc2023/).

### CSS Adjustments for visionOS [​](https://docs.nativescript.org/guide/visionos\#css-adjustments-for-visionos)

You will likely want to make your Pages transparent to allow the natural glass materials to come through by using this CSS specifier:

```css
.ns-visionos Page {
  background-color: transparent;
}
```

When running your app on `visionOS`, you can scope CSS selectors where needed by the root level `.ns-visionos` class.

### Hover effect for visionOS materials [​](https://docs.nativescript.org/guide/visionos\#hover-effect-for-visionos-materials)

All standard/system UI Component usages like Button, Switch, Pickers, etc. will automatically get system hover style effects on visionOS.

It's common to add `tap` bindings in NativeScript to things like StackLayout, GridLayout, etc. which are just [UIView](https://developer.apple.com/documentation/uikit/uiview)'s.

You can use new @nativescript/core APIs to easily enable visionOS [hover styles](https://developer.apple.com/documentation/uikit/uihoverstyle) on any view type throughout your app or customize per view.

Apple discusses some of the important spatial considerations with these effects in [this session](https://developer.apple.com/videos/play/wwdc2023/111215/).

Each view can specify it's own custom `visionHoverStyle` as follows:

```xml
<GridLayout visionHoverStyle="{{visionHoverStyle}}" tap="{{tapAction}}"/>
```

The `visionHoverStyle` property can be defined as a `string` or `VisionHoverOptions`.

```ts
import { VisionHoverOptions } from '@nativescript/core'

const visionHoverStyle: VisionHoverOptions = {
  effect: 'highlight',
  shape: 'rect',
  shapeCornerRadius: 16,
}
```

This would apply a visionOS system highlight rectangle with a cornerRadius of 16 to that `GridLayout` when a hover is detected.

The options are as follows:

```ts
export type VisionHoverEffect = 'automatic' | 'highlight' | 'lift'
export type VisionHoverShape = 'circle' | 'rect'
export type VisionHoverOptions = {
  effect: VisionHoverEffect
  shape?: VisionHoverShape
  shapeCornerRadius?: number
}
```

When a `string` is provided, it will look for predefined `visionHoverStyle`'s within the `TouchManager.visionHoverOptions` that match the string name. This allows you to predefine and share custom visionHoverStyle's across your entire app.

You can enable these effects globally throughout your app for any view which has a `tap` binding by enabling:

```ts
TouchManager.enableGlobalHoverWhereTap = true
```

This allows you to predefine any number of custom `visionHoverStyle`'s you'd like to use throughout your app. You could do so in the `app.ts` or `main.ts` (aka, bootstrap file), for example:

```ts
TouchManager.enableGlobalHoverWhereTap = true
TouchManager.visionHoverOptions = {
  default: {
    effect: 'highlight',
    shape: 'rect',
    shapeCornerRadius: 16,
  },
  slimBox: {
    effect: 'lift',
    shape: 'rect',
    shapeCornerRadius: 8,
  },
  round: {
    effect: 'lift',
    shape: 'circle',
  },
}
```

You could then apply custom `visionHoverStyle`'s by their name anywhere in your app:

```xml
<GridLayout visionHoverStyle="default" tap="tapAction"/>
<GridLayout visionHoverStyle="slimBox" tap="tapAction"/>
<GridLayout visionHoverStyle="round" tap="tapAction"/>
```

You can also disable a hoverStyle on any view by adding the `visionIgnoreHoverStyle` property if desired.

Note

When no `visionHoverStyle` is defined and not using `TouchManager.enableGlobalHoverWhereTap`, visionOS will use default behavior by enabling hoverStyle's on standard controls as mentioned. Other views would have no hoverStyle as expected.

### View template visionOS scoping [​](https://docs.nativescript.org/guide/visionos\#view-template-visionos-scoping)

You can also scope sections of your view templates specifically for visionOS layouts as needed:

```xml
<visionos>
    <Label>I only show on visionOS</Label>
</visionos>
<ios>
    <Label>I only show on iOS</Label>
</ios>
<android>
    <Label>I only show on Android</Label>
</android>
```

Note

You should not have to do a lot of this throughout apps in general but these options are available to you where desired.

## NativeScript and the SwiftUI App Lifecycle [​](https://docs.nativescript.org/guide/visionos\#nativescript-and-the-swiftui-app-lifecycle)

Starting with NativeScript 8.6 we support the [SwiftUI App](https://developer.apple.com/documentation/swiftui/app) Lifecycle for the first time. For a better understanding of the SwiftUI App Lifecycle, we recommend the following articles:

- [https://peterfriese.dev/posts/ultimate-guide-to-swiftui2-application-lifecycle/](https://peterfriese.dev/posts/ultimate-guide-to-swiftui2-application-lifecycle/)
- [https://dev.to/sam\_programiz/swiftui-app-life-cycle-2n68](https://dev.to/sam_programiz/swiftui-app-life-cycle-2n68)

> how can we tell the compiler about the entry point to our application?

Historically with NativeScript apps, we would use the [Objective C main entry](https://github.com/NativeScript/ios/blob/d67588cb3866212ccd86b105edf1207fddde2db9/project-template/internal/main.m#L19) to define the entry point where the NativeScript engine was intialized and your app would be booted.

We now also support a SwiftUI `@main` entry via a single `App_Resources/visionOS/src/NativeScriptApp.swift` file:

swift

```
import SwiftUI

@main
struct NativeScriptApp: App {

    var body: some Scene {
        NativeScriptMainWindow()
    }
}
```

The `NativeScriptMainWindow` is a SwiftUI [WindowGroup](https://developer.apple.com/documentation/swiftui/windowgroup) which returns a Scene, your NativeScript app. In visionOS apps, you can expand this `struct` to support new [Scenes](https://developer.apple.com/documentation/swiftui/scene) and [Spaces](https://developer.apple.com/documentation/visionos/presenting-windows-and-spaces) with new and exciting window styles like [volumetric](https://developer.apple.com/documentation/swiftui/windowstyle/volumetric/) as well as [Immersive Spaces](https://developer.apple.com/documentation/visionos/creating-fully-immersive-experiences).

`NativeScriptMainWindow` is a SwiftUI struct representing a Scene itself which looks like this:

swift

```
struct NativeScriptMainWindow: Scene {
    var body: some Scene {
        WindowGroup {
            NativeScriptAppView(found: { windowScene in
                NativeScriptEmbedder.sharedInstance().setWindowScene(windowScene)
            }).onAppear {
                // Your app is booted here!
                DispatchQueue.main.async {
                    NativeScriptStart.boot()
                }
            }
        }
        .windowStyle(.plain)
    }

    init() {
        // NativeScript engine is configured here!
        NativeScriptEmbedder.sharedInstance().setDelegate(NativeScriptViewRegistry.shared)
        NativeScriptStart.setup()
    }
}
```

Note

This is enabled for `visionOS` only right now with NativeScript however this will be used in iOS and macOS apps in the future.

### Support multiple windows [​](https://docs.nativescript.org/guide/visionos\#support-multiple-windows)

In order to add volumetric and immersize spaces, be sure you add the following setting to your `App_Resources/visionOS/Info.plist`:

```xml
<key>UIApplicationSceneManifest</key>
<dict>
    <key>UIApplicationSupportsMultipleScenes</key>
    <true/>
</dict>
```

## Vision Pro Tutorials in all Flavors [​](https://docs.nativescript.org/guide/visionos\#vision-pro-tutorials-in-all-flavors)

You can follow along in these "Vision Pro 🥽 Hello World" tutorials:

- [Develop Vision Pro 🥽 apps with TypeScript](https://blog.nativescript.org/develop-visionos-apps-with-typescript)
- [Develop Vision Pro 🥽 apps with Angular](https://blog.nativescript.org/develop-visionos-apps-with-angular)
- [Develop Vision Pro 🥽 apps with React](https://blog.nativescript.org/develop-visionos-apps-with-react)
- [Develop Vision Pro 🥽 apps with Solid](https://blog.nativescript.org/develop-visionos-apps-with-solid)
- [Develop Vision Pro 🥽 apps with Svelte](https://blog.nativescript.org/develop-visionos-apps-with-svelte)
- [Develop Vision Pro 🥽 apps with Vue](https://blog.nativescript.org/develop-visionos-apps-with-vue)

### Vision Pro for Angular Developers [​](https://docs.nativescript.org/guide/visionos\#vision-pro-for-angular-developers)

[How to Develop a Vision Pro App using Angular with Nathan Walker](https://www.youtube.com/watch?v=OXkUXRUOj5o)

## Blog Posts [​](https://docs.nativescript.org/guide/visionos\#blog-posts)

### Particle Systems via RealityKit and Multiple Scenes during Vision Pro development with NativeScript [​](https://docs.nativescript.org/guide/visionos\#particle-systems-via-realitykit-and-multiple-scenes-during-vision-pro-development-with-nativescript)

[https://blog.nativescript.org/particles-and-multiple-scenes-vision-pro-development/](https://blog.nativescript.org/particles-and-multiple-scenes-vision-pro-development/)

### How to add visionOS to an existing app? [​](https://docs.nativescript.org/guide/visionos\#how-to-add-visionos-to-an-existing-app)

[https://blog.nativescript.org/add-visionos-to-existing-nativescript-app/](https://blog.nativescript.org/add-visionos-to-existing-nativescript-app/)

2. [Create a visionOS project](https://docs.nativescript.org/guide/visionos#create-a-visionos-project)
1. [Run your visionOS project](https://docs.nativescript.org/guide/visionos#run-your-visionos-project)
2. [What makes a project work on visionOS?](https://docs.nativescript.org/guide/visionos#what-makes-a-project-work-on-visionos)
3. [Design Guidelines and Notes](https://docs.nativescript.org/guide/visionos#design-guidelines-and-notes)
1. [CSS Adjustments for visionOS](https://docs.nativescript.org/guide/visionos#css-adjustments-for-visionos)
2. [Hover effect for visionOS materials](https://docs.nativescript.org/guide/visionos#hover-effect-for-visionos-materials)
3. [View template visionOS scoping](https://docs.nativescript.org/guide/visionos#view-template-visionos-scoping)
4. [NativeScript and the SwiftUI App Lifecycle](https://docs.nativescript.org/guide/visionos#nativescript-and-the-swiftui-app-lifecycle)
1. [Support multiple windows](https://docs.nativescript.org/guide/visionos#support-multiple-windows)
5. [Vision Pro Tutorials in all Flavors](https://docs.nativescript.org/guide/visionos#vision-pro-tutorials-in-all-flavors)
1. [Vision Pro for Angular Developers](https://docs.nativescript.org/guide/visionos#vision-pro-for-angular-developers)
6. [Blog Posts](https://docs.nativescript.org/guide/visionos#blog-posts)
1. [Particle Systems via RealityKit and Multiple Scenes during Vision Pro development with NativeScript](https://docs.nativescript.org/guide/visionos#particle-systems-via-realitykit-and-multiple-scenes-during-vision-pro-development-with-nativescript)
2. [How to add visionOS to an existing app?](https://docs.nativescript.org/guide/visionos#how-to-add-visionos-to-an-existing-app)

## NativeScript Label Component


`<Label>` is a UI component that displays read-only text.

Note

The NativeScript `<Label>` is not the same as the HTML `<Label>`.

![](https://docs.nativescript.org/assets/Label.1a303448.png)

![](https://docs.nativescript.org/assets/Label.e6147e0f.png)

```xml
<Label text="Hello NativeScript!" />
```

```html
<Label text="Hello NativeScript!"></Label>
```

```tsx
<label>Text Here</label>
```

```tsx
<label text="TextHere" />
```

```svelte
<label text="Hello NativeScript"></label>
```

```vue
<Label text="Hello NativeScript!"></Label>
```

## Examples [​](https://docs.nativescript.org/ui/label\#examples)

### Styling the label [​](https://docs.nativescript.org/ui/label\#styling-the-label)

If you need to style parts of the text, you can use a combination of a `FormattedString` and `Span` elements.

```xml
<Label textWrap="true">
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</Label>
```

#### Span linkTap event [​](https://docs.nativescript.org/ui/label\#span-linktap-event)

Tap event for Span.

```ts
on('linkTap', (data: EventData) => {
  console.log('Span tapped')
})
```

## Props [​](https://docs.nativescript.org/ui/label\#props)

### letterSpacing [​](https://docs.nativescript.org/ui/label\#letterspacing)

```ts
letterSpacing: number
```

Gets or sets the letter spacing.

See [MDN: CSS letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing).

### lineHeight [​](https://docs.nativescript.org/ui/label\#lineheight)

```ts
lineHeight: number
```

Gets or sets the line height.

See [MDN: CSS line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).

### text [​](https://docs.nativescript.org/ui/label\#text)

```ts
text: string
```

Gets or sets the text shown.

### textAlignment [​](https://docs.nativescript.org/ui/label\#textalignment)

```ts
textAlignment: 'initial' | 'left' | 'center' | 'right' = 'left'
```

Gets or sets the text alignment style property.

Defaults to `left`.

### textDecoration [​](https://docs.nativescript.org/ui/label\#textdecoration)

```ts
textDecoration: TextDecorationType // "none" | "underline" | "line-through" | "underline line-through"
```

Gets or sets the text decoration style.

See [TextDecorationType](https://docs.nativescript.org/api/namespace/CoreTypes#textdecorationtype).

Defaults to `none`.

### textTransform [​](https://docs.nativescript.org/ui/label\#texttransform)

```ts
textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"
```

Gets or sets the text transform.

See [TextTransformType](https://docs.nativescript.org/api/namespace/CoreTypes#texttransformtype).

Defaults to `initial`.

### textWrap [​](https://docs.nativescript.org/ui/label\#textwrap)

```ts
textWrap: boolean
```

Gets or sets whether the label should wrap longer text to new lines.

Default value is `false`.

### whiteSpace [​](https://docs.nativescript.org/ui/label\#whitespace)

```ts
whiteSpace: WhiteSpaceType // "initial" | "normal" | "nowrap"
```

Gets or sets white-space handling.

See [WhiteSpaceType](https://docs.nativescript.org/api/namespace/CoreTypes#whitespacetype) and [MDN: CSS white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space).

Defaults to `initial`.

### ...Inherited [​](https://docs.nativescript.org/ui/label\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Label).

## Native component [​](https://docs.nativescript.org/ui/label\#native-component)

- Android: [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html)
- iOS: [`UILabel`](https://developer.apple.com/documentation/uikit/uilabel)

2. [Examples](https://docs.nativescript.org/ui/label#examples)
1. [Styling the label](https://docs.nativescript.org/ui/label#styling-the-label)
3. [Props](https://docs.nativescript.org/ui/label#props)
1. [letterSpacing](https://docs.nativescript.org/ui/label#letterspacing)
2. [lineHeight](https://docs.nativescript.org/ui/label#lineheight)
3. [text](https://docs.nativescript.org/ui/label#text)
4. [textAlignment](https://docs.nativescript.org/ui/label#textalignment)
5. [textDecoration](https://docs.nativescript.org/ui/label#textdecoration)
6. [textTransform](https://docs.nativescript.org/ui/label#texttransform)
7. [textWrap](https://docs.nativescript.org/ui/label#textwrap)
8. [whiteSpace](https://docs.nativescript.org/ui/label#whitespace)
9. [...Inherited](https://docs.nativescript.org/ui/label#inherited)
4. [Native component](https://docs.nativescript.org/ui/label#native-component)

## Recommended NativeScript Plugins

This page serves as a quick reference for finding plugins for commonly used features. Feel free to request additional plugins to be listed here by submitting a request on the [Docs GitHub Repository](https://github.com/NativeScript/docs/issues/new?title=%5Brequest%5D%20add%20%60xyz%60%20to%20the%20recommended%20plugins&body=%3C!--%20Please%20fill%20this%20with%20more%20details,%20and%20make%20sure%20to%20update%20the%20issue%20title.%20--%3E).

## WebSockets [​](https://docs.nativescript.org/recommended-plugins\#websockets)

### @valor/nativescript-websockets [​](https://docs.nativescript.org/recommended-plugins\#valor-nativescript-websockets)

For web-compatible WebSockets, we recommend installing the [`@valor/nativescript-websockets`](https://www.npmjs.com/package/@valor/nativescript-websockets) plugin:

NPMYarn

```bash
npm i --save @valor/nativescript-websockets
```

```bash
yarn add @valor/nativescript-websockets
```

## Image Caching [​](https://docs.nativescript.org/recommended-plugins\#image-caching)

For image-heavy applications, it's a good practice to adopt an image-caching strategy that helps keep the memory usage down (remote images are cached after first download for example).

### @triniwiz/nativescript-image-cache-it [​](https://docs.nativescript.org/recommended-plugins\#triniwiz-nativescript-image-cache-it)

One of the go-to plugins is [`@triniwiz/nativescript-image-cache-it`](https://www.npmjs.com/package/@triniwiz/nativescript-image-cache-it). It uses `SDWebImage` on iOS and `Glide` on android.

NPMYarn

```bash
npm i --save @triniwiz/nativescript-image-cache-it
```

```bash
yarn add @triniwiz/nativescript-image-cache-it
```

### @nativescript-community/ui-image [​](https://docs.nativescript.org/recommended-plugins\#nativescript-community-ui-image)

Another great plugin is from the NativeScript-Community ['@nativescript-community/ui-image'](https://www.npmjs.com/package/@nativescript-community/ui-image). It uses `SDWebImage` on iOS and `Fresco` on android.

NPMYarn

```bash
npm i --save @nativescript-community/ui-image
```

```bash
yarn add @nativescript-community/ui-image
```

## Text [​](https://docs.nativescript.org/recommended-plugins\#text)

### @nativescript-community/ui-label [​](https://docs.nativescript.org/recommended-plugins\#nativescript-community-ui-label)

As an alternative to the core [Label](https://docs.nativescript.org/ui/label), check out [`@nativescript-community/ui-label`](https://www.npmjs.com/package/@nativescript-community/ui-label).

NPMYarn

```bash
npm i --save @nativescript-community/ui-label
```

```bash
yarn add @nativescript-community/ui-label
```

## HTTP [​](https://docs.nativescript.org/recommended-plugins\#http)

### @nativescript-community/https [​](https://docs.nativescript.org/recommended-plugins\#nativescript-community-https)

A drop-in replacement for the core HTTP with improvements and additions like connection pooling, form data support and certificate pinning. Check out [`@nativescript-community/https`](https://www.npmjs.com/package/@nativescript-community/https).

NPMYarn

```bash
npm i --save @nativescript-community/https
```

```bash
yarn add @nativescript-community/https
```

### @klippa/nativescript-http [​](https://docs.nativescript.org/recommended-plugins\#klippa-nativescript-http)

A drop-in replacement for the core HTTP with improvements and additions like connection pooling, form data support and certificate pinning. Check out [`@klippa/nativescript-http`](https://www.npmjs.com/package/@klippa/nativescript-http).

NPMYarn

```bash
npm i --save @klippa/nativescript-http
```

```bash
yarn add @klippa/nativescript-http
```

2. [WebSockets](https://docs.nativescript.org/recommended-plugins#websockets)
1. [@valor/nativescript-websockets](https://docs.nativescript.org/recommended-plugins#valor-nativescript-websockets)
3. [Image Caching](https://docs.nativescript.org/recommended-plugins#image-caching)
1. [@triniwiz/nativescript-image-cache-it](https://docs.nativescript.org/recommended-plugins#triniwiz-nativescript-image-cache-it)
2. [@nativescript-community/ui-image](https://docs.nativescript.org/recommended-plugins#nativescript-community-ui-image)
4. [Text](https://docs.nativescript.org/recommended-plugins#text)
1. [@nativescript-community/ui-label](https://docs.nativescript.org/recommended-plugins#nativescript-community-ui-label)
5. [HTTP](https://docs.nativescript.org/recommended-plugins#http)
1. [@nativescript-community/https](https://docs.nativescript.org/recommended-plugins#nativescript-community-https)
2. [@klippa/nativescript-http](https://docs.nativescript.org/recommended-plugins#klippa-nativescript-http)

## Slider UI Component


`<Slider>` is a UI component that provides a slider control for picking values within a specified numeric range.

![](https://docs.nativescript.org/assets/Slider.ea3be06a.png)

![](https://docs.nativescript.org/assets/Slider.a74366f7.png)

```xml
<Slider value="75" minValue="0" maxValue="100" />
```

```html
<Slider value="75" minValue="0" maxValue="100" />
```

```tsx
<slider value="{sliderValue}" onValueChange={sliderValueChanged} />
```

```tsx
<slider
  width={300}
  value={sliderValue()}
  on:valueChange={handleChange}
/>
```

```svelte
<slider bind:value={sliderValue} />
```

```vue
<Slider v-model="sliderValue"/>
```

## Props [​](https://docs.nativescript.org/ui/slider\#props)

### value [​](https://docs.nativescript.org/ui/slider\#value)

```ts
value: number
```

Gets or sets the currently selected value of the slider.

Defaults to `0`.

### minValue [​](https://docs.nativescript.org/ui/slider\#minvalue)

```ts
minValue: number
```

Gets or sets the minimum value of the slider.

### maxValue [​](https://docs.nativescript.org/ui/slider\#maxvalue)

```ts
maxValue: number
```

Gets or sets the maximum value of the slider.

### ...Inherited [​](https://docs.nativescript.org/ui/slider\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Slider).

## Events [​](https://docs.nativescript.org/ui/slider\#events)

### valueChange [​](https://docs.nativescript.org/ui/slider\#valuechange)

```ts
on('valueChange', (args: PropertyChangeData) => {
  const slider = args.object as Slider
  console.log('Slider value changed to', args.value)
})
```

Emitted when the value of the slider changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

## Native component [​](https://docs.nativescript.org/ui/slider\#native-component)

- Android: [`android.widget.SeekBar`](https://developer.android.com/reference/android/widget/SeekBar.html)
- iOS: [`UISlider`](https://developer.apple.com/documentation/uikit/uislider)

2. [Props](https://docs.nativescript.org/ui/slider#props)
1. [value](https://docs.nativescript.org/ui/slider#value)
2. [minValue](https://docs.nativescript.org/ui/slider#minvalue)
3. [maxValue](https://docs.nativescript.org/ui/slider#maxvalue)
4. [...Inherited](https://docs.nativescript.org/ui/slider#inherited)
3. [Events](https://docs.nativescript.org/ui/slider#events)
1. [valueChange](https://docs.nativescript.org/ui/slider#valuechange)
4. [Native component](https://docs.nativescript.org/ui/slider#native-component)

## NativeScript Color Class

The `Color` class enables the creation of a color object:

- using color components (alpha, red, green, blue) ranging from 0 to 255,
- using various color representations like ARGB, color names, hex values, and more.

The `ios` and `android` properties of the `Color` class instance return the native platform instance of [UIColor](https://developer.apple.com/documentation/uikit/uicolor) on iOS and [Color](https://developer.android.com/reference/android/graphics/Color) on Android.

## How to use the Color class [​](https://docs.nativescript.org/core/color\#how-to-use-the-color-class)

### Create a color object from a hex value [​](https://docs.nativescript.org/core/color\#create-a-color-object-from-a-hex-value)

```ts
const color = new Color('#FF00CC')
const colorShortHex = new Color('#F0C')
```

### Create a color object from an alpha value [​](https://docs.nativescript.org/core/color\#create-a-color-object-from-an-alpha-value)

```ts
const colorARGB = new Color(100, 255, 100, 100)
```

## Color API [​](https://docs.nativescript.org/core/color\#color-api)

The Color class offers the following properties and methods.

### constructor [​](https://docs.nativescript.org/core/color\#constructor)

Creates a color object. The Color class offers the following constructor overloads:

```ts
const color = new Color(knownColor)
```

Creates a Color instance from a known color name.

- `knownColor` : A color name string such as `'red'`, `'purple'`, `'orange'`.

```ts
const color = new Color(hex)
```

Creates a Color instance from a color hexidecimal code.

- `hex`: A string of a hexidecimal color value such as `'#fff'` or `'#FF00CC'`.

```ts
const color = new Color(argb)
```

Creates a Color instance from a number representing a color with an alpha.

- `argb`: A number such as `4293377432` as, representing color.

```ts
const color = new Color(alpha: number, red: number, green:number, blue: number, type?: 'rgb' | 'hsl' | 'hsv')
```

* * *

### a [​](https://docs.nativescript.org/core/color\#a)

```ts
colorAlpha: number = color.a
```

Gets the Alpha component of the color. This is a `read-only` property.

* * *

### r [​](https://docs.nativescript.org/core/color\#r)

```ts
colorRed: number = color.r
```

Gets the Red component of the color. This is a `read-only` property.

* * *

### g [​](https://docs.nativescript.org/core/color\#g)

```ts
colorGreen: number = color.g
```

Gets the Green component of the color. This is a `read-only` property.

* * *

### b [​](https://docs.nativescript.org/core/color\#b)

```ts
colorBlue: number = color.b
```

Gets the Blue component of the color. This is a `read-only` property.

* * *

### argb [​](https://docs.nativescript.org/core/color\#argb)

```ts
colorARGB: number = color.argb
```

Gets the Argb Number representation of this color where each 8 bits represent a single color component. This is a `read-only` property.

* * *

### hex [​](https://docs.nativescript.org/core/color\#hex)

```ts
colorHex: string = color.hex
```

Gets the Hexadecimal string representation of the color.

* * *

### name [​](https://docs.nativescript.org/core/color\#name)

```ts
colorName: string = color.name
```

Gets the known name of this instance. Defined only if it has been constructed from a known color name - e.g. "red".

* * *

### android [​](https://docs.nativescript.org/core/color\#android)

```ts
androidColor = color.android
```

Gets the android-specific integer value representation. Same as the `ARGB` one.

* * *

### ios [​](https://docs.nativescript.org/core/color\#ios)

```ts
iOSColor: UIColor = color.ios
```

Gets the iOS-specific [UIColor](https://developer.apple.com/documentation/uikit/uicolor) value representation.

* * *

### Color.equals() [​](https://docs.nativescript.org/core/color\#color-equals)

```ts
areColorsEqual: boolean = Color.equals(value1: Color, value2: Color)
```

A static Color class method that compares two `Color` instances and returns `true` if they are the same or `false` otherwise.

* * *

### Color.isValid() [​](https://docs.nativescript.org/core/color\#color-isvalid)

```ts
isValidColorValue: boolean = Color.isValid(value)
```

A static Color class method that validates if a value can be converted to a color.

* * *

### Color.fromIosColor() [​](https://docs.nativescript.org/core/color\#color-fromioscolor)

```ts
colorFromIosColor: Color = Color.fromIosColor(value)
```

Creates a Color instance from iOS-specific UIColor value representation. `value` is of type [UIColor](https://developer.apple.com/documentation/uikit/uicolor).

* * *

### Color.mix() [​](https://docs.nativescript.org/core/color\#color-mix)

```ts
colorMix: Color = Color.mix(color1: Color, color2: Color, amount: number)
```

A static method that creates a Color instance from mixture of two colors.

* * *

### Color.fromHSL() [​](https://docs.nativescript.org/core/color\#color-fromhsl)

```ts
colorNew: Color = Color.fromHSL(a, h, s, l)
```

A static method that returns a new Color from HSL.

* * *

### Color.fromHSV() [​](https://docs.nativescript.org/core/color\#color-fromhsv)

```ts
colorNew: Color = Color.fromHSV(a, h, s, v)
```

A static method that returns a new Color from HSV.

* * *

### equals() [​](https://docs.nativescript.org/core/color\#equals)

```ts
color.equals(value)
```

A Color instance method that checks whether the color instance on which the method is called equals the Color instance passed to the method.

* * *

### isDark() [​](https://docs.nativescript.org/core/color\#isdark)

```ts
color.isDark()
```

A Color instance method that returns `true` if the color is dark or returns `false` otherwise. A color is dark when `brightenss < 128`.

* * *

### isLight() [​](https://docs.nativescript.org/core/color\#islight)

```ts
color.isLight()
```

A Color instance method that returns `true` if the color is light or returns `false` otherwise.A color is light when `brightenss >= 128`

* * *

### getBrightness() [​](https://docs.nativescript.org/core/color\#getbrightness)

```ts
colorBrightness: number = color.getBrightness()
```

Returns the color's [brightness](http://www.w3.org/TR/AERT#color-contrast) value.

* * *

### getLuminance [​](https://docs.nativescript.org/core/color\#getluminance)

```ts
colorLuminance: number = color.getLuminance()
```

Returns the color's [luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef) value.

* * *

### setAlpha() [​](https://docs.nativescript.org/core/color\#setalpha)

```ts
colorWithAlpha: Color = color.setAlpha(a)
```

Adds the specified alpha to the color instance on which the method is called and returns the result as a new Color instance.

`a` is a value between `0` and `255`.

* * *

### toHsl() [​](https://docs.nativescript.org/core/color\#tohsl)

```ts
colorHsl: { h: number; s: number; l: number; a: number } = color.toHsl()
```

Returns the hsl( `{ h: number; s: number; l: number; a: number }`) representation of the color.

* * *

### toHslString() [​](https://docs.nativescript.org/core/color\#tohslstring)

```ts
colorHslString: string = color.toHslString()
```

Returns the [CSS hsl](https://www.w3schools.com/Css/css_colors_hsl.asp) representation of the color.

* * *

### toHsv() [​](https://docs.nativescript.org/core/color\#tohsv)

```ts
colorHsv: { h: number; s: number; v: number; a: number } = color.toHsv()
```

Returns the hsv( `{ h: number; s: number; v: number; a: number }`) representation of the color

* * *

### toHsvString() [​](https://docs.nativescript.org/core/color\#tohsvstring)

```ts
colorHsvString: string = color.toHsvString()
```

Returns the [CSS rgb](https://www.w3schools.com/Css/css_colors_rgb.asp) representation of the color.

* * *

### desaturate() [​](https://docs.nativescript.org/core/color\#desaturate)

```ts
colorDesaturated: Color = color.desaturate(amount)
```

Desaturates the color by the specified amount. `amount` is a number between `0` and `100` inclusive. Providing `100` is the same as calling [greyscale](https://docs.nativescript.org/core/color#greyscale).

* * *

### saturate() [​](https://docs.nativescript.org/core/color\#saturate)

```ts
colorSaturated: Color = color.saturate(amount)
```

Saturates the color by the specified amount. `amount` is a number between `0` and `100` inclusive.

* * *

### greyscale() [​](https://docs.nativescript.org/core/color\#greyscale)

```ts
colorGrayscaled: Color = color.greyscale()
```

Completely desaturates a color into greyscale. Same as calling [desaturate(100)](https://docs.nativescript.org/core/color#desaturate).

* * *

### lighten() [​](https://docs.nativescript.org/core/color\#lighten)

```ts
colorLightened: Color = color.lighten(amount)
```

Lightens the color by the specified amount. `amount` is a number between `0` and `100` inclusive. Providing `100` returns white.

* * *

### brighten() [​](https://docs.nativescript.org/core/color\#brighten)

```ts
colorBrightened: Color = color.brighten(amount)
```

Brightens the color by the specified amount. `amount` is a number between `0` and `100` inclusive.

* * *

### darken() [​](https://docs.nativescript.org/core/color\#darken)

```ts
colorDarkened: Color = color.darken(amount: number)
```

Darkens the color by the specified amount. `amount` is a number between `0` and `100` inclusive. `100` returns black.

* * *

### spin() [​](https://docs.nativescript.org/core/color\#spin)

```ts
colorSpinned: Color = color.spin(amount)
```

Spins the hue by the given amount, from - `360` to `360`. Calling with `0`, `360`, or - `360` does nothing since it sets the hue back to what it was before.

* * *

### complement() [​](https://docs.nativescript.org/core/color\#complement)

```ts
colorComplement: Color = color.complement()
```

Returns a Color instance that is the complement of the current color.

* * *

## Native Component [​](https://docs.nativescript.org/core/color\#native-component)

- `Android`: [android.graphics.Color](https://developer.android.com/reference/android/graphics/Color)
- `iOS`: [UIColor](https://developer.apple.com/documentation/uikit/uicolor?language=objc)

2. [How to use the Color class](https://docs.nativescript.org/core/color#how-to-use-the-color-class)
1. [Create a color object from a hex value](https://docs.nativescript.org/core/color#create-a-color-object-from-a-hex-value)
2. [Create a color object from an alpha value](https://docs.nativescript.org/core/color#create-a-color-object-from-an-alpha-value)
3. [Color API](https://docs.nativescript.org/core/color#color-api)
01. [constructor](https://docs.nativescript.org/core/color#constructor)
02. [a](https://docs.nativescript.org/core/color#a)
03. [r](https://docs.nativescript.org/core/color#r)
04. [g](https://docs.nativescript.org/core/color#g)
05. [b](https://docs.nativescript.org/core/color#b)
06. [argb](https://docs.nativescript.org/core/color#argb)
07. [hex](https://docs.nativescript.org/core/color#hex)
08. [name](https://docs.nativescript.org/core/color#name)
09. [android](https://docs.nativescript.org/core/color#android)
10. [ios](https://docs.nativescript.org/core/color#ios)
11. [Color.equals()](https://docs.nativescript.org/core/color#color-equals)
12. [Color.isValid()](https://docs.nativescript.org/core/color#color-isvalid)
13. [Color.fromIosColor()](https://docs.nativescript.org/core/color#color-fromioscolor)
14. [Color.mix()](https://docs.nativescript.org/core/color#color-mix)
15. [Color.fromHSL()](https://docs.nativescript.org/core/color#color-fromhsl)
16. [Color.fromHSV()](https://docs.nativescript.org/core/color#color-fromhsv)
17. [equals()](https://docs.nativescript.org/core/color#equals)
18. [isDark()](https://docs.nativescript.org/core/color#isdark)
19. [isLight()](https://docs.nativescript.org/core/color#islight)
20. [getBrightness()](https://docs.nativescript.org/core/color#getbrightness)
21. [getLuminance](https://docs.nativescript.org/core/color#getluminance)
22. [setAlpha()](https://docs.nativescript.org/core/color#setalpha)
23. [toHsl()](https://docs.nativescript.org/core/color#tohsl)
24. [toHslString()](https://docs.nativescript.org/core/color#tohslstring)
25. [toHsv()](https://docs.nativescript.org/core/color#tohsv)
26. [toHsvString()](https://docs.nativescript.org/core/color#tohsvstring)
27. [desaturate()](https://docs.nativescript.org/core/color#desaturate)
28. [saturate()](https://docs.nativescript.org/core/color#saturate)
29. [greyscale()](https://docs.nativescript.org/core/color#greyscale)
30. [lighten()](https://docs.nativescript.org/core/color#lighten)
31. [brighten()](https://docs.nativescript.org/core/color#brighten)
32. [darken()](https://docs.nativescript.org/core/color#darken)
33. [spin()](https://docs.nativescript.org/core/color#spin)
34. [complement()](https://docs.nativescript.org/core/color#complement)
4. [Native Component](https://docs.nativescript.org/core/color#native-component)

## NativeScript Multithreading Guide

One of NativeScript's benefits is that it allows fast and efficient access to all native platform (Android/Objective-C) APIs through JavaScript, without using (de)serialization or reflection. JavaScript executes on the main thread (aka the UI thread). That means that operations that potentially take longer can lag the rendering of the UI and make the application lag.

To tackle issues with slowness where UI sharpness and high performance are critical, developers can use worker threads. Workers are scripts executing on a background thread in an absolutely isolated context. Tasks that could take long to execute should be offloaded to a worker thread.

The Workers API in NativeScript is loosely based on the [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) and the [Web Workers Specification](https://www.w3.org/TR/workers/).

For optimal results when using the Workers API, follow these guidelines:

- Always make sure you close the worker threads, using the appropriate API ( `terminate()` or `close()`), when the worker's finished its job. If Worker instances become unreachable in the scope you are working in before you are able to terminate it, you will be able to close it only from inside the worker script itself by calling the `close()` function.
- Workers are not a general solution for all performance-related problems. Starting a Worker has an overhead of its own, and may sometimes be slower than processing a quick task. Optimize DB queries, or rethink complex application logic before resorting to workers.
- Since worker threads have access to the entire native SDK, the NativeScript developer must take care of all the synchronization when calling APIs which are not guaranteed to be thread-safe from more than one thread.

## Using Workers [​](https://docs.nativescript.org/guide/multithreading\#using-workers)

### Spawning a worker [​](https://docs.nativescript.org/guide/multithreading\#spawning-a-worker)

Creating a new worker is simple, all you need is to call the `Worker()` constructor with a path to the worker script (relative to current file, or an aliased path eg. `~/path/to/worker.ts`). The worker itself can be written in JavaScript or TypeScript.

```ts
const myWorker = new Worker('./worker.ts')
```

### Sending messages to a worker [​](https://docs.nativescript.org/guide/multithreading\#sending-messages-to-a-worker)

To send messages to the worker, use the [`postMessage()`](https://docs.nativescript.org/guide/multithreading#postmessage) method on the [`Worker`](https://docs.nativescript.org/guide/multithreading#constructor) instance.

```ts
// send myMessage to the worker
myWorker.postMessage(myMessage)
```

### Receiving messages from a worker [​](https://docs.nativescript.org/guide/multithreading\#receiving-messages-from-a-worker)

To receive messages from the worker, use the [`onmessage`](https://docs.nativescript.org/guide/multithreading#onmessage) callback on the [`Worker`](https://docs.nativescript.org/guide/multithreading#constructor) instance.

```ts
// attach a message handler that will receive messages from the worker thread
myWorker.onmessage = (e) => {
  console.log('Message received from the worker thread.')
  const data = e.data // data from the worker
}
```

### Sending messages to main thread [​](https://docs.nativescript.org/guide/multithreading\#sending-messages-to-main-thread)

To send messages back to the main thread use the [`self.postMessage()`](https://docs.nativescript.org/guide/multithreading#postmessage-1) method in the worker.

```ts
// send the workerResult back to the main thread
self.postMessage(workerResult)
```

### Receiving messages from main thread [​](https://docs.nativescript.org/guide/multithreading\#receiving-messages-from-main-thread)

To receive messages in the worker, use the [`self.onmessage`](https://docs.nativescript.org/guide/multithreading#onmessage-1) event handler in the worker.

```ts
// attach a message handler that will receive the messages from the main thread
self.onmessage = (e) => {
  console.log('Message received from the main thread.')
  const data = e.data // data from myMessage
}
```

### Terminating a worker [​](https://docs.nativescript.org/guide/multithreading\#terminating-a-worker)

If you need to stop executing the worker, you can terminate it from the main thread using the `terminate` method on the `Worker` instance:

```ts
myWorker.terminate()
```

The worker thread is killed immediately.

### Handling errors [​](https://docs.nativescript.org/guide/multithreading\#handling-errors)

Runtime errors inside the worker are reported back to the main thread through the `onerror` callback on the `Worker` instance.

```ts
myWorker.onerror = (e) => {
  console.log(
    `Error occured in the worker thread in file ${e.filename} on line ${e.lineno}`,
  )
  console.log(e.message, e.stackTrace)
}
```

The worker can also self-handle errors by setting up an `onerror` handler, which can mark the error as "handled" and prevent the callback on the main thread from being called.

```ts
self.onerror = (e) => {
  console.log('Error occured, error:', e)

  // return true-like to stop the event from being passed onto the main thread
  return true
}
```

## Workers API [​](https://docs.nativescript.org/guide/multithreading\#workers-api)

### constructor [​](https://docs.nativescript.org/guide/multithreading\#constructor)

```ts
const myWorker = new Worker(path: string)
```

Creates an instance of a Worker and spawns a new OS thread, where the script pointed to by the `path` parameter is executed.

* * *

### postMessage [​](https://docs.nativescript.org/guide/multithreading\#postmessage)

```ts
myWorker.postMessage(message)
```

Sends a JSON-serializable message to the associated script's `onmessage` event handler.

* * *

### terminate [​](https://docs.nativescript.org/guide/multithreading\#terminate)

```ts
myWorker.terminate()
```

Terminates the execution of the worker thread on the next run loop tick.

* * *

### onmessage [​](https://docs.nativescript.org/guide/multithreading\#onmessage)

```ts
myWorker.onmessage = function handler(message: { data: any }) {}
```

Handles incoming messages sent from the associated worker thread. **Note** that you are responsible for creating & setting the handler function.

The `data` in the `message` object is the JSON-serializable message the worker sends with [postMessage](https://docs.nativescript.org/guide/multithreading#postmessage-1).

* * *

### onerror [​](https://docs.nativescript.org/guide/multithreading\#onerror)

```ts
myWorker.onerror = function handler(error: {
  message: string // the error message
  stackTrace?: string // the stack trace if applicable
  filename: string // the file where the uncaught error was thrown
  lineno: number // the line where the uncaught error was thrown
}) {}
```

Handles uncaught errors from the worker thread. **Note** that you are responsible for creating & setting the handler function.

* * *

## Worker Global Scope [​](https://docs.nativescript.org/guide/multithreading\#worker-global-scope)

Each worker gets it's own global scope (so `global.foo` in the worker is not the same as `global.foo` on the main thread).

### self [​](https://docs.nativescript.org/guide/multithreading\#self)

```ts
self === global // true
```

Returns a reference to the `WorkerGlobalScope` itself - also available as `global`

* * *

### postMessage [​](https://docs.nativescript.org/guide/multithreading\#postmessage-1)

```ts
self.postMessage(message)
```

Sends a JSON-serializable message to the Worker instance's [`onmessage`](https://docs.nativescript.org/guide/multithreading#onmessage) event handler on the main thread.

* * *

### close [​](https://docs.nativescript.org/guide/multithreading\#close)

```ts
self.close()
```

Terminates the execution of the worker thread on the next run loop tick.

* * *

### onmessage [​](https://docs.nativescript.org/guide/multithreading\#onmessage-1)

```ts
self.onmessage = function handler(message: { data: any }) {}
```

Handles incoming messages sent from the main thread.

The `data` in the `message` object is the JSON-serializable message the main thread sends with [postMessage](https://docs.nativescript.org/guide/multithreading#postmessage).

* * *

### onerror [​](https://docs.nativescript.org/guide/multithreading\#onerror-1)

```ts
self.onerror = function handler(error: Error): boolean {
  return true
}
```

Handles uncaught errors occurring during execution of functions inside the Worker Scope (worker thread).

If the handler returns a `true`-like value, the message will not propagate to the Worker instance's `onerror` handler on the main thread.

After `onerror` is called in the worker thread, execution is not terminated and the worker is still capable of sending/receiving messages.

* * *

### onclose [​](https://docs.nativescript.org/guide/multithreading\#onclose)

```ts
self.onclose = function handler() {
  // do cleanup work
}
```

Handles any "clean-up" work. Suitable for freeing up resources, closing streams and sockets.

* * *

## Example Worker [​](https://docs.nativescript.org/guide/multithreading\#example-worker)

Note

In order to use `setTimeout`, `setInterval`, or other globals coming from the `@nativescript/core`, you will need to include them in your worker script:

```ts
import '@nativescript/core/globals'
```

```ts
// main-view-model.js

const worker = new Worker('./workers/image-processor')

// send a message to our worker
worker.postMessage({ src: imageSource, mode: 'scale', options: options })

// handle incoming messages from the worker
worker.onmessage = function (message) {
  if (message.data.success) {
    // the src received from the worker
    const src = message.data.src

    // terminate worker or send another message...
    worker.terminate()
  } else {
    // handle unsuccessful task
  }
}

// handle worker errors
worker.onerror = function (err) {
  console.log(
    `An unhandled error occurred in worker: ${err.filename}, line: ${err.lineno} :`,
    err.message,
  )
}
```

```ts
// workers/image-processor.js

// load NativeScript globals in the worker thread
import '@nativescript/core/globals'

self.onmessage = function (message) {
  const src = message.data.src
  const mode = message.data.mode || 'noop'
  const options = message.data.options

  const result = processImage(src, mode, options)

  if (result) {
    // send the result back to the main thread
    self.postMessage({
      success: true,
      src: result,
    })

    return
  }

  // no result, send back an empty object for example
  self.postMessage({})
}

// example heavy function to process an image
function processImage(src, mode, options) {
  console.log(options)
  // image processing logic
  // save image, retrieve location
  // return source to processed image
  return updatedImgSrc
}
```

## Limitations [​](https://docs.nativescript.org/guide/multithreading\#limitations)

There are certain limitations to keep in mind when working with workers:

- **No JavaScript memory sharing**. This means that you can't access a JavaScript value/object from both threads. You can only serialize the object, send it to the other thread and deserialize it there. This is what postMessage() function is responsible for. However, this is not the case with native objects. You can access a native object from more than one thread, without copying it, because the runtime will create a separate JavaScript wrapper object for each thread. Keep in mind that when you are using non-thread-safe native APIs and data you have to handle the synchronization part on your own. The runtime doesn't perform any locking or synchronization logic on native data access and API calls.
- **Only JSON-serializable objects can be sent with the `postMessage()` API**.
  - You can’t send native objects. This means that you can't send native objects with postMessage, because in most of the cases JSON serializing a JavaScript wrapper of a native object results in empty object literal - "{}". On the other side this message will be deserialized to a pure empty JavaScript object. Sending native object is something we want to support in the future.
  - Be careful when sending circular objects because their recursive nodes will be stripped on the serialization step.
- **No object transferring**. If you are a web developer you may be familiar with the ArrayBuffer and MessagePort transferring support in browsers. Currently, in NativeScript there is no such concept as object transferring.
- **Debugging workers is not currently possible.**
- **No nested workers support**. We want to hear from the community if this is something we need to support.

2. [Using Workers](https://docs.nativescript.org/guide/multithreading#using-workers)
1. [Spawning a worker](https://docs.nativescript.org/guide/multithreading#spawning-a-worker)
2. [Sending messages to a worker](https://docs.nativescript.org/guide/multithreading#sending-messages-to-a-worker)
3. [Receiving messages from a worker](https://docs.nativescript.org/guide/multithreading#receiving-messages-from-a-worker)
4. [Sending messages to main thread](https://docs.nativescript.org/guide/multithreading#sending-messages-to-main-thread)
5. [Receiving messages from main thread](https://docs.nativescript.org/guide/multithreading#receiving-messages-from-main-thread)
6. [Terminating a worker](https://docs.nativescript.org/guide/multithreading#terminating-a-worker)
7. [Handling errors](https://docs.nativescript.org/guide/multithreading#handling-errors)
3. [Workers API](https://docs.nativescript.org/guide/multithreading#workers-api)
1. [constructor](https://docs.nativescript.org/guide/multithreading#constructor)
2. [postMessage](https://docs.nativescript.org/guide/multithreading#postmessage)
3. [terminate](https://docs.nativescript.org/guide/multithreading#terminate)
4. [onmessage](https://docs.nativescript.org/guide/multithreading#onmessage)
5. [onerror](https://docs.nativescript.org/guide/multithreading#onerror)
4. [Worker Global Scope](https://docs.nativescript.org/guide/multithreading#worker-global-scope)
1. [self](https://docs.nativescript.org/guide/multithreading#self)
2. [postMessage](https://docs.nativescript.org/guide/multithreading#postmessage-1)
3. [close](https://docs.nativescript.org/guide/multithreading#close)
4. [onmessage](https://docs.nativescript.org/guide/multithreading#onmessage-1)
5. [onerror](https://docs.nativescript.org/guide/multithreading#onerror-1)
6. [onclose](https://docs.nativescript.org/guide/multithreading#onclose)
5. [Example Worker](https://docs.nativescript.org/guide/multithreading#example-worker)
6. [Limitations](https://docs.nativescript.org/guide/multithreading#limitations)

## NativeScript Placeholder Component


`<Placeholder>` allows adding native views directly in your markup without creating a full [View](https://docs.nativescript.org/ui/placeholder#) wrapper for it. When NativeScript is constructing the UI and encounters a Placeholder element, it emits a `creatingView` event, allowing you to pass in any native view to be rendered by assigning it to the `args.view` parameter.

![](https://docs.nativescript.org/assets/Placeholder.7d77856e.png)

![](https://docs.nativescript.org/assets/Placeholder.aa60cb68.png)


```xml
<Placeholder creatingView="creatingView" />
```

```ts
import { Utils } from '@nativescript/core'

export function creatingView(args) {
  let nativeView
  if (__IOS__) {
    // Example with UITextView on iOS
    nativeView = UITextView.new()
    nativeView.text = 'Native View (iOS)'
  } else if (__ANDROID__) {
    // Example with TextView on Android
    nativeView = new android.widget.TextView(
      Utils.android.getApplicationContext()
    )
    nativeView.setText('Native View (Android)')
  }

  // assign it to args.view so NativeScript can place it into the UI
  args.view = nativeView
}
```

HTMLTypeScript

```html
<Placeholder (creatingView)="creatingView($event)" />
```

```ts
import { Component, NO_ERRORS_SCHEMA } from '@angular/core'
import { NativeScriptCommonModule } from '@nativescript/angular';
import { Utils } from '@nativescript/core'

@Component({
  selector: 'ns-placeholder',
  templateUrl: './component.html',
  imports: [NativeScriptCommonModule],
  schemas: [NO_ERRORS_SCHEMA]
})
export class PlaceholderComponent {

  creatingView(args) {
    let nativeView
    if (__IOS__) {
      // Example with UITextView on iOS
      nativeView = UITextView.new()
      nativeView.text = 'Native View (iOS)'
    } else if (__ANDROID__) {
      // Example with TextView on Android
      nativeView = new android.widget.TextView(
        Utils.android.getApplicationContext()
      )
      nativeView.setText('Native View (Android)')
    }

    // assign it to args.view so NativeScript can place it into the UI
    args.view = nativeView
  }
}
```

```tsx
<placeholder onCreatingView={creatingView} />
```

```tsx
<placeholder on:creatingView={creatingView}></placeholder>
```

```svelte
<placeholder on:creatingView={creatingView}></placeholder>
```

```vue
<Placeholder @creatingView="creatingView" />
```

## Props [​](https://docs.nativescript.org/ui/placeholder\#props)

### ...Inherited [​](https://docs.nativescript.org/ui/placeholder\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Placeholder).

## Events [​](https://docs.nativescript.org/ui/placeholder\#events)

### creatingView [​](https://docs.nativescript.org/ui/placeholder\#creatingview)

```ts
on('creatingView', (args: CreateViewEventData) => {
  const placeholder = args.object as Placeholder
  args.view = someNativeView
})
```

Emitted when building the UI, the event args allow passing a native view instance back via `args.view`.

See [CreateViewEventData](https://docs.nativescript.org/api/interface/CreateViewEventData)

2. [Props](https://docs.nativescript.org/ui/placeholder#props)
1. [...Inherited](https://docs.nativescript.org/ui/placeholder#inherited)
3. [Events](https://docs.nativescript.org/ui/placeholder#events)
1. [creatingView](https://docs.nativescript.org/ui/placeholder#creatingview)

## Publishing NativeScript Apps


## [Publishing to Google Play](https://docs.nativescript.org/guide/publishing/android-google-play) [​](https://docs.nativescript.org/guide/publishing/\#publishing-to-google-play)

## [Publishing to Apple App Store](https://docs.nativescript.org/guide/publishing/apple-app-store) [​](https://docs.nativescript.org/guide/publishing/\#publishing-to-apple-app-store)

## [Publishing iOS updated using ns publish ios](https://docs.nativescript.org/guide/publishing/ns-publish) [​](https://docs.nativescript.org/guide/publishing/\#publishing-ios-updated-using-ns-publish-ios)

## [Publishing with Fastlane](https://blog.nativescript.org/automatic-nativescript-app-deployments-with-fastlane/) [​](https://docs.nativescript.org/guide/publishing/\#publishing-with-fastlane)

Next [Introduction→](https://docs.nativescript.org/)

2. [Publishing to Google Play](https://docs.nativescript.org/guide/publishing/#publishing-to-google-play)
3. [Publishing to Apple App Store](https://docs.nativescript.org/guide/publishing/#publishing-to-apple-app-store)
4. [Publishing iOS updated using ns publish ios](https://docs.nativescript.org/guide/publishing/#publishing-ios-updated-using-ns-publish-ios)
5. [Publishing with Fastlane](https://docs.nativescript.org/guide/publishing/#publishing-with-fastlane)

## NativeScript Best Practices

### The story of 😢 or 😊 [​](https://docs.nativescript.org/best-practices/\#the-story-of-%F0%9F%98%A2-or-%F0%9F%98%8A)

We are providing a sample "vanilla" NativeScript app which shows some of the bad vs. good practices for you to run and see for yourself. Using vanilla NativeScript is a great way to see the raw examples of why these are bad and good practices which are applicable to any frontend framework integration. Each framework integration effectively utilizes these same practices for it's own various cases.

Clone and see for yourself: [https://github.com/NativeScript/examples-best-practices](https://github.com/NativeScript/examples-best-practices)

### [View bindings](https://docs.nativescript.org/best-practices/view-bindings) [​](https://docs.nativescript.org/best-practices/\#view-bindings)

### [ListViews](https://docs.nativescript.org/best-practices/listviews) [​](https://docs.nativescript.org/best-practices/\#listviews)

### [hidden, visibility, v-if, ngIf and all those "if" things](https://docs.nativescript.org/best-practices/if-things) [​](https://docs.nativescript.org/best-practices/\#hidden-visibility-v-if-ngif-and-all-those-if-things)

### [Rogue timers and intervals](https://docs.nativescript.org/best-practices/rogue-timers) [​](https://docs.nativescript.org/best-practices/\#rogue-timers-and-intervals)

### [Various usages of @NativeClass() decorator](https://docs.nativescript.org/best-practices/native-class) [​](https://docs.nativescript.org/best-practices/\#various-usages-of-nativeclass-decorator)

### [Android tips](https://docs.nativescript.org/best-practices/android-tips) [​](https://docs.nativescript.org/best-practices/\#android-tips)

### [iOS tips](https://docs.nativescript.org/best-practices/ios-tips) [​](https://docs.nativescript.org/best-practices/\#ios-tips)

### [.ios and .android files or platform conditionals?](https://docs.nativescript.org/best-practices/platform-file-split-or-not) [​](https://docs.nativescript.org/best-practices/\#ios-and-android-files-or-platform-conditionals)

### [Optimizing Images](https://docs.nativescript.org/best-practices/optimizing-images) [​](https://docs.nativescript.org/best-practices/\#optimizing-images)


02. [The story of 😢 or 😊](https://docs.nativescript.org/best-practices/#the-story-of-%F0%9F%98%A2-or-%F0%9F%98%8A)
03. [View bindings](https://docs.nativescript.org/best-practices/#view-bindings)
04. [ListViews](https://docs.nativescript.org/best-practices/#listviews)
05. [hidden, visibility, v-if, ngIf and all those "if" things](https://docs.nativescript.org/best-practices/#hidden-visibility-v-if-ngif-and-all-those-if-things)
06. [Rogue timers and intervals](https://docs.nativescript.org/best-practices/#rogue-timers-and-intervals)
07. [Various usages of @NativeClass() decorator](https://docs.nativescript.org/best-practices/#various-usages-of-nativeclass-decorator)
08. [Android tips](https://docs.nativescript.org/best-practices/#android-tips)
09. [iOS tips](https://docs.nativescript.org/best-practices/#ios-tips)
10. [.ios and .android files or platform conditionals?](https://docs.nativescript.org/best-practices/#ios-and-android-files-or-platform-conditionals)
11. [Optimizing Images](https://docs.nativescript.org/best-practices/#optimizing-images)

## NativeScript Switch Component


`<Switch>` is a UI component that lets users toggle between two states.

![](https://docs.nativescript.org/assets/Switch.e3255ab6.png)

![](https://docs.nativescript.org/assets/Switch.795d39fc.png)

```xml
<Switch checked="true" />
```

```html
<Switch checked="true" />
```

```tsx
<switch
  checked={switchValue}
  onCheckedChange={(args) => {
    setSwitchValue(args.value)
  }}
></switch>
```

```tsx
<switch
  on:checkedChange={handleChange}
  checked={switchValue()}
></switch>
```

```svelte
<switch bind:checked={switchValue}/>
```

```vue
<Switch v-model="switchValue" />
```

## Examples [​](https://docs.nativescript.org/ui/switch\#examples)

### Styling a Switch [​](https://docs.nativescript.org/ui/switch\#styling-a-switch)

```xml
<Switch checked="true"
  color="#BFCDAC"
  backgroundColor="green"
  offBackgroundColor="#DC493D"
/>
```

## Props [​](https://docs.nativescript.org/ui/switch\#props)

### checked [​](https://docs.nativescript.org/ui/switch\#checked)

```ts
checked: boolean
```

Gets or sets the state switch.

Defaults to `false`.

### offBackgroundColor [​](https://docs.nativescript.org/ui/switch\#offbackgroundcolor)

```ts
offBackgroundColor: Color
```

Gets or sets the off-state background color.

See [Color](https://docs.nativescript.org/api/class/Color).

### ...Inherited [​](https://docs.nativescript.org/ui/switch\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Switch).

## Events [​](https://docs.nativescript.org/ui/switch\#events)

### checkedChange [​](https://docs.nativescript.org/ui/switch\#checkedchange)

```ts
on('checkedChange', (args: PropertyChangeData) => {
  const switch = args.object as Switch
  console.log('Switch checked:', args.value)
})
```

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

## Native component [​](https://docs.nativescript.org/ui/switch\#native-component)

- Android: [`android.widget.Switch`](https://developer.android.com/reference/android/widget/Switch.html)
- iOS: [`UISwitch`](https://developer.apple.com/documentation/uikit/uiswitch)

2. [Examples](https://docs.nativescript.org/ui/switch#examples)
1. [Styling a Switch](https://docs.nativescript.org/ui/switch#styling-a-switch)
3. [Props](https://docs.nativescript.org/ui/switch#props)
1. [checked](https://docs.nativescript.org/ui/switch#checked)
2. [offBackgroundColor](https://docs.nativescript.org/ui/switch#offbackgroundcolor)
3. [...Inherited](https://docs.nativescript.org/ui/switch#inherited)
4. [Events](https://docs.nativescript.org/ui/switch#events)
1. [checkedChange](https://docs.nativescript.org/ui/switch#checkedchange)
5. [Native component](https://docs.nativescript.org/ui/switch#native-component)

## Progress Component Guide


`<Progress>` is a UI component that shows a bar to indicate the progress of a task.

See also: [ActivityIndicator](https://docs.nativescript.org/ui/activity-indicator).

![](https://docs.nativescript.org/assets/Progress.5112d167.png)

![](https://docs.nativescript.org/assets/Progress.da7075e2.png)

```xml
<Progress value="75" />
```

```html
<Progress value="75"></Progress>
```

```tsx
export function Progress() {

  const [currentValue, setCurrentValue] = React.useState(0)
  setInterval(() => {
    setCurrentValue(currentValue + 10)
    if (currentValue > 101) setCurrentValue(0)
  }, 1000)

  return (
    <frame>
      <page style={styles.container}>
        <actionBar title="Progress"></actionBar>

        <gridLayout>

          <progress value={currentValue} />

        </gridLayout>
      </page>
    </frame>
  )
}
```

```tsx
import { createSignal } from 'solid-js'

export const Progress = () => {
  const [count, setCount] = createSignal(0)
  setInterval(() => {
    setCount(count() + 1)
    if (count() === 101) setCount(0)
  }, 100)
  return (
    <>
      <actionbar title="Progress">
      </actionbar>
      <gridlayout>
        <progress value={count()}></progress>
      </gridlayout>
    </>
  )
}
```

```svelte
<script lang="ts">
  let currentValue = 0
  setInterval(() => {
    currentValue++
    if (currentValue === 101) currentValue = 0
  }, 100)
</script>

<page>
  <actionBar title="Progress">
  </actionBar>

  <gridLayout width="100%">
    <progress bind:value={currentValue}></progress>
  </gridLayout>
</page>
```

```vue
<script lang="ts" setup>
  import { ref } from 'vue'

  const currentValue = ref(0);
  setInterval( () =>{
    currentValue.value ++;
    if(currentValue.value === 101)
      currentValue.value = 0;
  }, 100);
</script>

<template>
  <Page>
    <GridLayout>
      <Progress :value="currentValue"></Progress>
    </GridLayout>
  </Page>
</template>
```

## Example [​](https://docs.nativescript.org/ui/progress\#example)

### Styling the Progress bar [​](https://docs.nativescript.org/ui/progress\#styling-the-progress-bar)

To style the Progress bar, set the `backgroundColor` and `color`.

The `backgroundColor` will be applied to the track, and the `color` will be applied to the bar itself.

```xml
<Progress
  value="75"
  backgroundColor="#fff"
  color="#000"
/>
```

## Props [​](https://docs.nativescript.org/ui/progress\#props)

### value [​](https://docs.nativescript.org/ui/progress\#value)

```ts
value: number
```

Gets or sets the current value of the progress bar.

Must be within the range of 0 to [maxValue](https://docs.nativescript.org/ui/progress#maxValue).

### maxValue [​](https://docs.nativescript.org/ui/progress\#maxValue)

```ts
maxValue: number
```

Gets or sets the maximum value of the progress bar.

Defaults to: `100`.

### ...Inherited [​](https://docs.nativescript.org/ui/progress\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/Progress)

## Native component [​](https://docs.nativescript.org/ui/progress\#native-component)

- Android: [`android.widget.ProgressBar` (indeterminate = false)](https://developer.android.com/reference/android/widget/ProgressBar.html)
- iOS: [`UIProgressView`](https://developer.apple.com/documentation/uikit/uiprogressview)

2. [Example](https://docs.nativescript.org/ui/progress#example)
1. [Styling the Progress bar](https://docs.nativescript.org/ui/progress#styling-the-progress-bar)
3. [Props](https://docs.nativescript.org/ui/progress#props)
1. [value](https://docs.nativescript.org/ui/progress#value)
2. [maxValue](https://docs.nativescript.org/ui/progress#maxValue)
3. [...Inherited](https://docs.nativescript.org/ui/progress#inherited)
4. [Native component](https://docs.nativescript.org/ui/progress#native-component)

## NativeScript App Updates

Updating a NativeScript app is usually a quick process if done regularly. The following guides aim to document the general update steps, highlighting breaking changes (if any) when updating between specific versions.

## Update guides [​](https://docs.nativescript.org/guide/updating/\#update-guides)

- [Updating to latest](https://docs.nativescript.org/guide/updating/to-latest)

## Updating to a tagged version [​](https://docs.nativescript.org/guide/updating/\#updating-to-a-tagged-version)

To try upcoming features that have not been release yet, you can install the `next` tag of the CLI (built from the latest commit in the [NativeScript CLI repository](https://github.com/NativeScript/nativescript-cli/commits/main)) via:

```bash
npm install -g nativescript@next
```

You can also pass a tag to the `ns update` command.

For example, to try all the latest features that have not made it into a stable release yet, you can run:

```bash
ns update next
```

2. [Update guides](https://docs.nativescript.org/guide/updating/#update-guides)
3. [Updating to a tagged version](https://docs.nativescript.org/guide/updating/#updating-to-a-tagged-version)

## Application Settings Guide

`ApplicationSettings` allows you to store and retrieve data from the device local storage via getters and setters for storing and retrieving different data types. Use the appropriate setter to avoid errors.

## How to use ApplicationSettings [​](https://docs.nativescript.org/core/application-settings\#how-to-use-applicationsettings)

### Store a string value [​](https://docs.nativescript.org/core/application-settings\#store-a-string-value)

To store a string value, use the [setString](https://docs.nativescript.org/core/application-settings#setstring) method:

```ts
ApplicationSettings.setString('username', 'Wolfgang')
```

TIP

You can use this method with the `JSON.stringify()` (as shown in the `saveObjectAsString` method in the StackBlitz demo app at the link above) to store an object or an array as a string. Then, use `JSON.parse()` to convert the result of [getString()](https://docs.nativescript.org/core/application-settings#getstring) back to the object or array.

### Store a boolean value [​](https://docs.nativescript.org/core/application-settings\#store-a-boolean-value)

To store a boolean value, call the [setBoolean](https://docs.nativescript.org/core/application-settings#setboolean) method passing the key as the first argument and the value as second argument.

```ts
ApplicationSettings.setBoolean('isTurnedOn', true)
```

### Store a numeric value [​](https://docs.nativescript.org/core/application-settings\#store-a-numeric-value)

To store a number, use the [setNumber()](https://docs.nativescript.org/core/application-settings#setnumber) method:

```ts
ApplicationSettings.setNumber('locationX', 54.321)
```

## ApplicationSettings API [​](https://docs.nativescript.org/core/application-settings\#applicationsettings-api)

### setString() [​](https://docs.nativescript.org/core/application-settings\#setstring)

```ts
ApplicationSettings.setString(key: string, value: string)
```

Stores a string value for the specified key.

* * *

### getString() [​](https://docs.nativescript.org/core/application-settings\#getstring)

```ts
ApplicationSettings.getString(key: string, deafaultValue?: string)
```

Gets a value (if existing) for a key as a `String` object. A default value can be provided in case there is no existing value.

* * *

### setNumber() [​](https://docs.nativescript.org/core/application-settings\#setnumber)

```ts
ApplicationSettings.setNumber(key: string, value: number)
```

Sets a `Number` object for a key.

* * *

### getNumber() [​](https://docs.nativescript.org/core/application-settings\#getnumber)

```ts
ApplicationSettings.getNumber(key: string, deafaultValue?: number)
```

Gets a value (if existing) for a key as a `Number` object. A default value can be provided in case the value does not exist.

* * *

### setBoolean() [​](https://docs.nativescript.org/core/application-settings\#setboolean)

```ts
ApplicationSettings.setBoolean(key: string, value: boolean)
```

Sets a `boolean` for a key.

* * *

### getBoolean() [​](https://docs.nativescript.org/core/application-settings\#getboolean)

```ts
ApplicationSettings.getBoolean(key: string, deafaultValue?: boolean)
```

Gets a value (if existing) for a key as a `boolean`. A default value can be provided in case the value does not exist.value.

* * *

### remove() [​](https://docs.nativescript.org/core/application-settings\#remove)

```ts
ApplicationSettings.remove(key: string)
```

Removes the key and its value from the device storage.

* * *

### clear() [​](https://docs.nativescript.org/core/application-settings\#clear)

```ts
ApplicationSettings.clear()
```

Removes all values from the device storage.

* * *

### getAllKeys() [​](https://docs.nativescript.org/core/application-settings\#getallkeys)

```ts
ApplicationSettings.getAllKeys(): Array<string>
```

Returns an array of all stored keys or an empty array if no keys exist in the device storage.

* * *

## API Reference(s) [​](https://docs.nativescript.org/core/application-settings\#api-reference-s)

- [ApplicationSettings](https://docs.nativescript.org/api/namespace/ApplicationSettings) module

## Native Component [​](https://docs.nativescript.org/core/application-settings\#native-component)

- `Android`: [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences)
- `iOS`: [NSUserDefaults](https://developer.apple.com/documentation/foundation/nsuserdefaults)

2. [How to use ApplicationSettings](https://docs.nativescript.org/core/application-settings#how-to-use-applicationsettings)
1. [Store a string value](https://docs.nativescript.org/core/application-settings#store-a-string-value)
2. [Store a boolean value](https://docs.nativescript.org/core/application-settings#store-a-boolean-value)
3. [Store a numeric value](https://docs.nativescript.org/core/application-settings#store-a-numeric-value)
3. [ApplicationSettings API](https://docs.nativescript.org/core/application-settings#applicationsettings-api)
1. [setString()](https://docs.nativescript.org/core/application-settings#setstring)
2. [getString()](https://docs.nativescript.org/core/application-settings#getstring)
3. [setNumber()](https://docs.nativescript.org/core/application-settings#setnumber)
4. [getNumber()](https://docs.nativescript.org/core/application-settings#getnumber)
5. [setBoolean()](https://docs.nativescript.org/core/application-settings#setboolean)
6. [getBoolean()](https://docs.nativescript.org/core/application-settings#getboolean)
7. [remove()](https://docs.nativescript.org/core/application-settings#remove)
8. [clear()](https://docs.nativescript.org/core/application-settings#clear)
9. [getAllKeys()](https://docs.nativescript.org/core/application-settings#getallkeys)
4. [API Reference(s)](https://docs.nativescript.org/core/application-settings#api-reference-s)
5. [Native Component](https://docs.nativescript.org/core/application-settings#native-component)

## NativeScript Troubleshooting Guide

## Useful tips [​](https://docs.nativescript.org/troubleshooting\#useful-tips)

### Deleting XCode DerivedData [​](https://docs.nativescript.org/troubleshooting\#deleting-xcode-deriveddata)

XCode caches build data inside a folder called `DerivedData` \- occasionally it can get corrupted due to a bad build, and subsequent builds can fail until the cached artifacts are cleared.

[Learn more in this guide to delete DerivedData](https://programmingwithswift.com/delete-derived-data-xcode/)

### Stopping the ADB server [​](https://docs.nativescript.org/troubleshooting\#stopping-the-adb-server)

adb can sometimes get stuck in an unresponsive state. In these cases, you can force restart the adb server by running:

```bash
adb kill-server
```

## Common issues [​](https://docs.nativescript.org/troubleshooting\#common-issues)

### Cocoapods Environment setup: CocoaPods is not installed or is not configured properly [​](https://docs.nativescript.org/troubleshooting\#cocoapods-environment-setup-cocoapods-is-not-installed-or-is-not-configured-properly)

```bash
WARNING: CocoaPods is not installed or is not configured properly.
 You will not be able to build your projects for iOS if they contain plugin with CocoaPod file.
To be able to build such projects, verify that you have installed CocoaPods (sudo gem install cocoapods).
```

Cocoapods can be installed in system directories or via [homebrew](https://brew.sh/). Depending on which your system may already have them setup can lead to common issues in how Cocoapods are detected.

You can try running the following safely:

```bash
pod cache clean -all
pod deintegrate
rm -rf "${HOME}/Library/Caches/CocoaPods"

brew install cocoapods
```

You can then confirm your Cocoapods installed properly and have the version you expect by running:

```bash
pod --version
```

You could then try running `ns doctor` again.

### XCode 14: xcodebuild failed with exit code 65 [​](https://docs.nativescript.org/troubleshooting\#xcode-14-xcodebuild-failed-with-exit-code-65)

```bash
error: Signing for "XXX-YYY" requires a development team.
Select a development team in the Signing & Capabilities editor. (in target 'XXX-YYY' from project 'Pods')

<...>
note: Run script build phase 'NativeScript PreBuild' will be run during every build because the option to
run the script phase "Based on dependency analysis" is unchecked. (in target 'XXX' from project 'XXX')
<...>

** BUILD FAILED **

Unable to apply changes on device: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX.
Error is: Command xcodebuild failed with exit code 65.
```

🟠 Possible Solution

The most likely issue is a missing `DEVELOPMENT_TEAM` for some Pods. The workaround is to put the following in `App_Resources/iOS/Podfile` (create one if your project doesn't have it already):

ruby

```
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      # either set the DEVELOPMENT_TEAM explicitly
      config.build_settings['DEVELOPMENT_TEAM'] = '<TEAM_ID>'
      # or disable code signing
      config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
    end
  end
end
```

Replacing `<TEAM_ID>` with your actual team id.

### CocoaPods could not find compatible versions for pod [​](https://docs.nativescript.org/troubleshooting\#cocoapods-could-not-find-compatible-versions-for-pod)

```
CocoaPods could not find compatible versions for pod "SDWebImage":
  In Podfile:
    SDWebImage (~> 5.13.2)
```

🟢 Common Solution

CocoaPods are like npm packages but for iOS libraries (it’s their own npm registry if you will). Your local Cocoapods cache (usually located in `~/.cocoapods`) keeps a Spec list reference that can become outdated and needs to be manually updated with the following command:

```bash
pod repo update
```

In case this doesn't resolve the issue, you can often [delete the XCode DerivedData](https://docs.nativescript.org/troubleshooting#delete-xcode-deriveddata).

### CocoaPods could not find compatible versions for pod - higher minimum deployment target [​](https://docs.nativescript.org/troubleshooting\#cocoapods-could-not-find-compatible-versions-for-pod-higher-minimum-deployment-target)

```
[!] CocoaPods could not find compatible versions for pod "FBSDKCoreKit":
  In Podfile:
    FBSDKCoreKit (~> 13.1.0)

Specs satisfying the `FBSDKCoreKit (~> 13.1.0)` dependency were found, but they required a higher minimum deployment target.
```

🟢 Common Solution

Increase the `IPHONEOS_DEPLOYMENT_TARGET` in your `App_Resources/iOS/build.xcconfig`:

```bash
IPHONEOS_DEPLOYMENT_TARGET = 13.0;
```

The above will increase the deployment target of the app, however you might also need to increase the deployment target of CocoaPods too. Put the following in your `App_Resources/iOS/Podfile` (create it if you don't have one):

ruby

```
platform :ios, '13.0'

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
    end
  end
end
```

In this example we are setting it to `13.0` \- change it to a version that makes sense for your project. Some libraries will require higher targets, so in most cases find the highest required target, and use that as your deployment target. Make sure to match both `build.xcconfig` and `Podfile` versions.

In case this doesn't resolve the issue, you can often [delete the XCode DerivedData](https://docs.nativescript.org/troubleshooting#deleting-xcode-deriveddata).

### dyld: Symbol not found [​](https://docs.nativescript.org/troubleshooting\#dyld-symbol-not-found)

```
dyld: Symbol not found: __ZNSt3__115basic_stringbufIcNS_11char_traitsIcEENS_9allocatorIcEEE3strERKNS_12basic_stringIcS2_S4_EE
  Referenced from: /path/to/app/platforms/ios/internal/metadata-generator-x86_64/bin/./objc-metadata-generator (which was built for Mac OS X 12.0)
  Expected in: /usr/lib/libc++.1.dylib
```

🟠 Possible Solution

This can happen when a library uses a symbol not avaialble in the current deployment target.

Increase the `IPHONEOS_DEPLOYMENT_TARGET` in your `App_Resources/iOS/build.xcconfig`:

```bash
IPHONEOS_DEPLOYMENT_TARGET = 13.0;
```

The above will increase the deployment target of the app, however you might also need to increase the deployment target of CocoaPods too. Put the following in your `App_Resources/iOS/Podfile` (create it if you don't have one):

ruby

```
platform :ios, '13.0'

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
    end
  end
end
```

In this example we are setting it to `13.0` \- change it to a version that makes sense for your project. Some libraries will require higher targets, so in most cases find the highest required target, and use that as your deployment target. Make sure to match both `build.xcconfig` and `Podfile` versions.

In case this doesn't resolve the issue, you can often [delete the XCode DerivedData](https://docs.nativescript.org/troubleshooting#deleting-xcode-deriveddata).

### Unable to apply changes on device [​](https://docs.nativescript.org/troubleshooting\#unable-to-apply-changes-on-device)

```
Installing on device XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX...
Unable to apply changes on device: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX.
Error is: Failed to install /path/to/appname/platforms/ios/build/Debug-iphoneos/appname.ipa
on device with identifier XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXX. Error is: Could not install application.
```

🟠 Possible Solution

Open the project in XCode ( `platforms/ios/<appname>.xcworkspace`) and then select the project name in the left file tree. You should see **General**, **Signing & Capabilities** and other tabs in the middle. Select your device as the run target in the top bar, then select **Signing & Capabilities** and select an appropriate team, and if necessary press the **Register Device** button in the Profiles list.

Once the device is registered, you can exit XCode, and running the app from the NativeScript CLI should work as expected.

### EMFILE: too many open files 'FILE\_PATH' [​](https://docs.nativescript.org/troubleshooting\#emfile-too-many-open-files-file-path)

```
Webpack compilation complete. Watching for file changes.
Watchpack Error (watcher): Error: EMFILE: too many open files 'FILE_PATH'
Watchpack Error (watcher): Error: EMFILE: too many open files 'FILE_PATH'
Watchpack Error (watcher): Error: EMFILE: too many open files 'FILE_PATH' <-- This repeats many times
```

🟠 Possible Solution

Add the following lines to your shell profile, usually `~/.zshrc`, or if you are using `bash` then `~/.bash_profile` or `~/.bashrc` config file:

```bash
export NODE_OPTIONS="--max-old-space-size=4096"
```

Reload your shell (eg, `source ~/.zshrc`) or open a new terminal window and try running again.

**Note**: you can increase this number further, but keep in mind the maximum value depends on the available system memory.

### error TS2611: 'xxx' is defined as a property in class 'Y', but is overridden here in 'Z' as an accessor [​](https://docs.nativescript.org/troubleshooting\#error-ts2611-xxx-is-defined-as-a-property-in-class-y-but-is-overridden-here-in-z-as-an-accessor)

```
ERROR: node_modules/@nativescript/core/ui/proxy-view-container/index.d.ts:10:9
error TS2611: 'ios' is defined as a property in class 'LayoutBase',
but is overridden here in 'ProxyViewContainer' as an accessor.

10 get ios(): any;
~~~

node_modules/@nativescript/core/ui/proxy-view-container/index.d.ts:11:9
error TS2611: 'android' is defined as a property in class 'LayoutBase',
but is overridden here in 'ProxyViewContainer' as an accessor.

11 get android(): any;
```

🟢 Common Solution

The above can be ignored by adding the following to your `tsconfig.json`:

json

```
"skipDefaultLibCheck": true,
"skipLibCheck": true,
```

2. [Useful tips](https://docs.nativescript.org/troubleshooting#useful-tips)
1. [Deleting XCode DerivedData](https://docs.nativescript.org/troubleshooting#deleting-xcode-deriveddata)
2. [Stopping the ADB server](https://docs.nativescript.org/troubleshooting#stopping-the-adb-server)
3. [Common issues](https://docs.nativescript.org/troubleshooting#common-issues)
1. [Cocoapods Environment setup: CocoaPods is not installed or is not configured properly](https://docs.nativescript.org/troubleshooting#cocoapods-environment-setup-cocoapods-is-not-installed-or-is-not-configured-properly)
2. [XCode 14: xcodebuild failed with exit code 65](https://docs.nativescript.org/troubleshooting#xcode-14-xcodebuild-failed-with-exit-code-65)
3. [CocoaPods could not find compatible versions for pod](https://docs.nativescript.org/troubleshooting#cocoapods-could-not-find-compatible-versions-for-pod)
4. [CocoaPods could not find compatible versions for pod - higher minimum deployment target](https://docs.nativescript.org/troubleshooting#cocoapods-could-not-find-compatible-versions-for-pod-higher-minimum-deployment-target)
5. [dyld: Symbol not found](https://docs.nativescript.org/troubleshooting#dyld-symbol-not-found)
6. [Unable to apply changes on device](https://docs.nativescript.org/troubleshooting#unable-to-apply-changes-on-device)
7. [EMFILE: too many open files 'FILE\_PATH'](https://docs.nativescript.org/troubleshooting#emfile-too-many-open-files-file-path)
8. [error TS2611: 'xxx' is defined as a property in class 'Y', but is overridden here in 'Z' as an accessor](https://docs.nativescript.org/troubleshooting#error-ts2611-xxx-is-defined-as-a-property-in-class-y-but-is-overridden-here-in-z-as-an-accessor)

## GridLayout Usage Guide

The grid consists of rows, columns, and cells. A cell can span one or more rows and one or more columns. It can contain multiple child elements which can span over multiple rows and columns, and even overlap each other.

By default, `<GridLayout>` has one column and one row. You can add columns and rows by configuring the `columns` and the `rows` properties. In these properties, you need to set the number of columns and rows and their width and height. You set the number of columns by listing their widths, separated by a comma. You set the number of rows by listing their heights, separated by a comma.

You can set a fixed size for column width and row height or you can create them in a responsive manner:

- **An absolute number:** Indicates a fixed size.
- **auto:** Makes the column as wide as its widest child or makes the row as tall as its tallest child.
- **\*:** Takes as much space as available after filling all auto and fixed size columns or rows.

## Examples [​](https://docs.nativescript.org/ui/grid-layout\#examples)

### GridLayout with fixed sizing [​](https://docs.nativescript.org/ui/grid-layout\#gridlayout-with-fixed-sizing)

The following example creates a simple 2-by-2 grid with fixed column widths and row heights.

```xml
<GridLayout columns="115, 115" rows="115, 115">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
</GridLayout>
```

![](https://art.nativescript.org/layouts/grid_layout.svg)

### GridLayout with star sizing [​](https://docs.nativescript.org/ui/grid-layout\#gridlayout-with-star-sizing)

The following example creates a grid with responsive design, where space is allotted proportionally to child elements.

```xml
<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
</GridLayout>
```

![](https://art.nativescript.org/layouts/grid_layout_star_sizing.svg)

### GridLayout with fixed and auto sizing [​](https://docs.nativescript.org/ui/grid-layout\#gridlayout-with-fixed-and-auto-sizing)

The following example create a grid with one auto-sized column and one column with fixed size. Rows have a fixed height.

```xml
<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
</GridLayout>
```

![](https://art.nativescript.org/layouts/grid_layout_fixed_auto.svg)

### GridLayout with mixed sizing and merged cells [​](https://docs.nativescript.org/ui/grid-layout\#gridlayout-with-mixed-sizing-and-merged-cells)

The following example creates a complex grid with responsive design, mixed width and height settings, and some merged cells.

```xml
<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43B3F4" />
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#075B88" />
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#1089CA" />
  <Label text="1,1" row="1" col="1" backgroundColor="#43B3F4" />
  <Label text="1,2" row="1" col="2" backgroundColor="#1089CA" />
  <Label text="2,1" row="2" col="1" backgroundColor="#075B88" />
  <Label text="2,2" row="2" col="2" backgroundColor="#43B3F4" />
</GridLayout>
```

![](https://art.nativescript.org/layouts/grid_layout_complex.svg)

## Props [​](https://docs.nativescript.org/ui/grid-layout\#props)

### columns [​](https://docs.nativescript.org/ui/grid-layout\#grid-columns)

```ts
columns: string // eg. *, 50, auto
```

A string value representing column widths delimited with commas.

Valid values: an absolute number, `auto`, or `*`:

- A number indicates an absolute column width.
- `auto` makes the column as wide as its widest child.
- `*` makes the column occupy all available horizontal space. The space is proportionally divided over all star-sized columns. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes.

### rows [​](https://docs.nativescript.org/ui/grid-layout\#grid-rows)

```ts
rows: string // eg. *, 50, auto
```

A string value representing row heights delimited with commas.

Valid values: an absolute number, `auto`, or `*`:

- A number indicates an absolute row height.
- `auto` makes the row as tall as its tallest child.
- `*` makes the row occupy all available vertical space. The space is proportionally divided over all star-sized rows. You can set values such as `3*` and `5*` to indicate a ratio of 3:5 in sizes.

### ...Inherited [​](https://docs.nativescript.org/ui/grid-layout\#inherited)

Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api/class/GridLayout).

## Children props [​](https://docs.nativescript.org/ui/grid-layout\#children-props)

When an element is a direct child of `<GridLayout>`, these properties are accounted for:

### row [​](https://docs.nativescript.org/ui/grid-layout\#row)

```ts
row: number
```

The row for the element.

The rows are 0-indexed, so the first row is indicated by `0`.

### col [​](https://docs.nativescript.org/ui/grid-layout\#col)

```ts
col: number
```

The column for the element.

The columns are 0-indexed, so the first column is indicated by `0`.

### rowSpan [​](https://docs.nativescript.org/ui/grid-layout\#rowspan)

```ts
rowSpan: number
```

The number of rows for the element to span across.

### colSpan [​](https://docs.nativescript.org/ui/grid-layout\#colspan)

```ts
colSpan: number
```

The number of columns for the element to span across.

2. [Examples](https://docs.nativescript.org/ui/grid-layout#examples)
1. [GridLayout with fixed sizing](https://docs.nativescript.org/ui/grid-layout#gridlayout-with-fixed-sizing)
2. [GridLayout with star sizing](https://docs.nativescript.org/ui/grid-layout#gridlayout-with-star-sizing)
3. [GridLayout with fixed and auto sizing](https://docs.nativescript.org/ui/grid-layout#gridlayout-with-fixed-and-auto-sizing)
4. [GridLayout with mixed sizing and merged cells](https://docs.nativescript.org/ui/grid-layout#gridlayout-with-mixed-sizing-and-merged-cells)
3. [Props](https://docs.nativescript.org/ui/grid-layout#props)
1. [columns](https://docs.nativescript.org/ui/grid-layout#grid-columns)
2. [rows](https://docs.nativescript.org/ui/grid-layout#grid-rows)
3. [...Inherited](https://docs.nativescript.org/ui/grid-layout#inherited)
4. [Children props](https://docs.nativescript.org/ui/grid-layout#children-props)
1. [row](https://docs.nativescript.org/ui/grid-layout#row)
2. [col](https://docs.nativescript.org/ui/grid-layout#col)
3. [rowSpan](https://docs.nativescript.org/ui/grid-layout#rowspan)
4. [colSpan](https://docs.nativescript.org/ui/grid-layout#colspan)

## StackLayout Usage Guide

When you add child views to a StackLayout, they will be arranged one after the other in the specified direction, either horizontally or vertically. By default, the orientation of a StackLayout is vertical, but you can change it to `horizontal` by setting the `orientation` property.

Important

StackLayout is a basic layout container often used excessively in complex layouts. Overusing it with many nested containers or numerous child views can result in poor performance and slow rendering. If you're extensively nesting `<StackLayout>`, consider switching to [`<GridLayout>`](https://docs.nativescript.org/ui/grid-layout) or [`<FlexboxLayout>`](https://docs.nativescript.org/ui/flexbox-layout) for better performance.

## Examples [​](https://docs.nativescript.org/ui/stack-layout\#examples)

### Vertical StackLayout [​](https://docs.nativescript.org/ui/stack-layout\#vertical-stacklayout)

By default, `<StackLayout>` stacks its child items vertically. The following example creates a vertical StackLayout of 3 equally-sized elements. Items are stretched to cover the entire width of the screen. Items are placed in the order they were declared in.

```xml
<StackLayout backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43B3F4" />
  <Label text="second" height="70" backgroundColor="#1089CA" />
  <Label text="third" height="70" backgroundColor="#075B88" />
</StackLayout>
```

![](https://art.nativescript.org/layouts/stack_layout_vertical.svg)

### Aligning children horizontally in a veritcal StackLayout [​](https://docs.nativescript.org/ui/stack-layout\#aligning-children-horizontally-in-a-veritcal-stacklayout)

Child elements of a vertical StackLayout can align themselves horizontally at `left`, `center` or `right` positions with the `horizontalAlignment` property.

For example, we can align child elements diagonally in a vertical StackLayout.

```xml
<StackLayout backgroundColor="#3c495e">
  <Label
    text="left"
    horizontalAlignment="left"
    width="33%"
    height="70"
    backgroundColor="#43B3F4"
  />
  <Label
    text="center"
    horizontalAlignment="center"
    width="33%"
    height="70"
    backgroundColor="#1089CA"
  />
  <Label
    text="right"
    horizontalAlignment="right"
    width="33%"
    height="70"
    backgroundColor="#075B88"
  />
  <Label
    text="stretch"
    horizontalAlignment="stretch"
    height="70"
    backgroundColor="#43B3F4"
  />
</StackLayout>
```

![](https://art.nativescript.org/layouts/stack_layout_vertical_align_children.svg)

### Horizontal StackLayout [​](https://docs.nativescript.org/ui/stack-layout\#horizontal-stacklayout)

Setting `orientation="horizontal"` on the `StackLayout` will stack items horizontally. The following example creates a horizontal StackLayout of 3 equally-sized elements. Items are stretched to cover the entire height of the screen.

```xml
<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43B3F4" />
  <Label text="second" width="70" backgroundColor="#1089CA" />
  <Label text="third" width="70" backgroundColor="#075B88" />
</StackLayout>
```

![](https://art.nativescript.org/layouts/stack_layout_horizontal.svg)

### Aligning children vertically in a horizontal StackLayout [​](https://docs.nativescript.org/ui/stack-layout\#aligning-children-vertically-in-a-horizontal-stacklayout)

Child elements of a horizontal StackLayout can align themselves veritcally at `top`, `center` or `bottom` positions with the `verticalAlignment` property. The following example creates a diagonal stack of items with responsive sizes.

```xml
<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label
    text="top"
    verticalAlignment="top"
    width="70"
    height="33%"
    backgroundColor="#43B3F4"
  />
  <Label
    text="center"
    verticalAlignment="center"
    width="70"
    height="33%"
    backgroundColor="#1089CA"
  />
  <Label
    text="bottom"
    verticalAlignment="bottom"
    width="70"
    height="33%"
    backgroundColor="#075B88"
  />
  <Label
    text="stretch"
    verticalAlignment="stretch"
    width="70"
    backgroundColor="#43B3F4"
  />
</StackLayout>
```

![](https://art.nativescript.org/layouts/stack_layout_horizontal_align_children.svg)

## Props [​](https://docs.nativescript.org/ui/stack-layout\#props)

### orientation [​](https://docs.nativescript.org/ui/stack-layout\#orientation)

```ts
orientation: string = 'vertical' | 'horizontal'
```

Specifies the direction of child elements in the StackLayout.

Valid values: `vertical` and `horizontal`.

Default value: `vertical`.

### ...Inherited [​](https://docs.nativescript.org/ui/stack-layout\#inherited)

Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api/class/StackLayout)

2. [Examples](https://docs.nativescript.org/ui/stack-layout#examples)
1. [Vertical StackLayout](https://docs.nativescript.org/ui/stack-layout#vertical-stacklayout)
2. [Aligning children horizontally in a veritcal StackLayout](https://docs.nativescript.org/ui/stack-layout#aligning-children-horizontally-in-a-veritcal-stacklayout)
3. [Horizontal StackLayout](https://docs.nativescript.org/ui/stack-layout#horizontal-stacklayout)
4. [Aligning children vertically in a horizontal StackLayout](https://docs.nativescript.org/ui/stack-layout#aligning-children-vertically-in-a-horizontal-stacklayout)
3. [Props](https://docs.nativescript.org/ui/stack-layout#props)
1. [orientation](https://docs.nativescript.org/ui/stack-layout#orientation)
2. [...Inherited](https://docs.nativescript.org/ui/stack-layout#inherited)

## SearchBar Component Guide


`<SearchBar>` is a UI component that provides a user interface for entering search queries.

![](https://docs.nativescript.org/assets/SearchBar.fff5dedb.png)

![](https://docs.nativescript.org/assets/SearchBar.9f5bab3c.png)

```xml
<SearchBar hint="Search..." />
```

```html
<SearchBar hint="Search..." />
```

```tsx
<searchBar hint="Search..."></searchBar>
```

```tsx
<searchbar hint="Search..."></searchbar>
```

```svelte
<searchBar hint="Search..."></searchBar>
```

```vue
<SearchBar hint="Search..." />
```

## Props [​](https://docs.nativescript.org/ui/search-bar\#props)

### hint [​](https://docs.nativescript.org/ui/search-bar\#hint)

```ts
hint: string
```

Gets or sets the placeholder text for the input area.

### text [​](https://docs.nativescript.org/ui/search-bar\#text)

```ts
text: string
```

Gets or sets the value of the search query.

### textFieldBackgroundColor [​](https://docs.nativescript.org/ui/search-bar\#textfieldbackgroundcolor)

```ts
textFieldBackgroundColor: Color
```

Gets or sets the background color of the input area.

See [Color](https://docs.nativescript.org/api/class/Color).

### textFieldHintColor [​](https://docs.nativescript.org/ui/search-bar\#textfieldhintcolor)

```ts
textFieldHintColor: Color
```

Gets or sets the color of the placeholder text.

See [Color](https://docs.nativescript.org/api/class/Color).

### ...Inherited [​](https://docs.nativescript.org/ui/search-bar\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/SearchBar)

## Events [​](https://docs.nativescript.org/ui/search-bar\#events)

### textChange [​](https://docs.nativescript.org/ui/search-bar\#textchange)

```ts
on('textChange', (args: PropertyChangeData) => {
  const searchBar = args.object as SearchBar
  console.log('Search query:', args.value)
})
```

Emitted when the search text is changed.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

### submit [​](https://docs.nativescript.org/ui/search-bar\#submit)

```ts
on('submit', (args: EventData) => {
  const searchBar = args.object as SearchBar
  console.log('Search for:', searchBar.text)
})
```

Emitted when the search text is submitted.

### clear [​](https://docs.nativescript.org/ui/search-bar\#clear)

```ts
on('submit', (args: EventData) => {
  const searchBar = args.object as SearchBar
  console.log('SearchBar cleared')
})
```

Emitted when the search input is cleared through the **✗** button in the input area.

## Native component [​](https://docs.nativescript.org/ui/search-bar\#native-component)

- Android: [`android.widget.SearchView`](https://developer.android.com/reference/android/widget/SearchView.html)
- iOS: [`UISearchBar`](https://developer.apple.com/documentation/uikit/uisearchbar)

2. [Props](https://docs.nativescript.org/ui/search-bar#props)
1. [hint](https://docs.nativescript.org/ui/search-bar#hint)
2. [text](https://docs.nativescript.org/ui/search-bar#text)
3. [textFieldBackgroundColor](https://docs.nativescript.org/ui/search-bar#textfieldbackgroundcolor)
4. [textFieldHintColor](https://docs.nativescript.org/ui/search-bar#textfieldhintcolor)
5. [...Inherited](https://docs.nativescript.org/ui/search-bar#inherited)
3. [Events](https://docs.nativescript.org/ui/search-bar#events)
1. [textChange](https://docs.nativescript.org/ui/search-bar#textchange)
2. [submit](https://docs.nativescript.org/ui/search-bar#submit)
3. [clear](https://docs.nativescript.org/ui/search-bar#clear)
4. [Native component](https://docs.nativescript.org/ui/search-bar#native-component)

## visionOS App Preview

Just like you can Preview iOS and Android apps using StackBlitz with [NativeScript Preview](https://preview.nativescript.org/), you can do the same with visionOS apps.

![Previewing visionOS from StackBlitz](https://docs.nativescript.org/assets/nativescript-visionpro-stackblitz.b58e1fcb.jpg)

## Using NativeScript Preview with Vision Pro [​](https://docs.nativescript.org/guide/visionos-preview\#using-nativescript-preview-with-vision-pro)

_This is useful if you have a physical Vision Pro device._

1. On your Vision Pro
   - Search for and install "NativeScript Preview" on the App Store.
2. On your desktop
1. Start a StackBlitz session containing a Vision Pro app like this one: [https://stackblitz.com/edit/nativescript-vision-pro-explore?file=src%2Fapp%2Fitem%2Fitems.component.ts](https://stackblitz.com/edit/nativescript-vision-pro-explore?file=src%2Fapp%2Fitem%2Fitems.component.ts)
      - _Tip: You can also share your desktop to your Vision Pro to copy/paste links directly._
2. Once QR Code appears on the right side, you can CMD+Tap on the QR to open a new browser tab.
3. Copy/Paste the URL from the new browser tab
4. Share this URL with your Vision Pro
3. Back on your Vision Pro
1. Tapping on the shared link will open NativeScript Preview and begin building in the StackBlitz terminal.
2. Once the build is complete, Vision Pro Safari will launch with a prompt to open 'Preview' on the Vision Pro to begin a live development session with your Vision Pro app.

2. [Using NativeScript Preview with Vision Pro](https://docs.nativescript.org/guide/visionos-preview#using-nativescript-preview-with-vision-pro)

## NativeScript API Reference

## Summary [​](https://docs.nativescript.org/api/\#summary)

#### References

[sanitizeModuleName](https://docs.nativescript.org/api/namespace/Utils#sanitizemodulename)

#### Namespaces

[AccessibilityEvents](https://docs.nativescript.org/api/namespace/AccessibilityEvents)[ApplicationSettings](https://docs.nativescript.org/api/namespace/ApplicationSettings)[capitalizationType](https://docs.nativescript.org/api/namespace/capitalizationType)[Connectivity](https://docs.nativescript.org/api/namespace/Connectivity)[CoreTypes](https://docs.nativescript.org/api/namespace/CoreTypes)[CSSUtils](https://docs.nativescript.org/api/namespace/CSSUtils)[DialogStrings](https://docs.nativescript.org/api/namespace/DialogStrings)[encoding](https://docs.nativescript.org/api/namespace/encoding)[FontStyle](https://docs.nativescript.org/api/namespace/FontStyle)[FontVariationSettings](https://docs.nativescript.org/api/namespace/FontVariationSettings)[FontWeight](https://docs.nativescript.org/api/namespace/FontWeight)[GridUnitType](https://docs.nativescript.org/api/namespace/GridUnitType)[Http](https://docs.nativescript.org/api/namespace/Http)[inputType](https://docs.nativescript.org/api/namespace/inputType)[IOSHelper](https://docs.nativescript.org/api/namespace/IOSHelper)[knownFolders](https://docs.nativescript.org/api/namespace/knownFolders)[Length](https://docs.nativescript.org/api/namespace/Length)[path](https://docs.nativescript.org/api/namespace/path)[PercentLength](https://docs.nativescript.org/api/namespace/PercentLength)[TouchAction](https://docs.nativescript.org/api/namespace/TouchAction)[Trace](https://docs.nativescript.org/api/namespace/Trace)[Utils](https://docs.nativescript.org/api/namespace/Utils)

#### Enumerations

[AccessibilityLiveRegion](https://docs.nativescript.org/api/enum/AccessibilityLiveRegion)[AccessibilityRole](https://docs.nativescript.org/api/enum/AccessibilityRole)[AccessibilityState](https://docs.nativescript.org/api/enum/AccessibilityState)[AccessibilityTrait](https://docs.nativescript.org/api/enum/AccessibilityTrait)[AndroidDirectory](https://docs.nativescript.org/api/enum/AndroidDirectory)[CacheMode](https://docs.nativescript.org/api/enum/CacheMode)[FontScaleCategory](https://docs.nativescript.org/api/enum/FontScaleCategory)[GestureEvents](https://docs.nativescript.org/api/enum/GestureEvents)[GestureStateTypes](https://docs.nativescript.org/api/enum/GestureStateTypes)[GestureTypes](https://docs.nativescript.org/api/enum/GestureTypes)[HttpResponseEncoding](https://docs.nativescript.org/api/enum/HttpResponseEncoding)[SharedTransitionAnimationType](https://docs.nativescript.org/api/enum/SharedTransitionAnimationType)[SwipeDirection](https://docs.nativescript.org/api/enum/SwipeDirection)

#### Classes

[AbsoluteLayout](https://docs.nativescript.org/api/class/AbsoluteLayout)[ActionBar](https://docs.nativescript.org/api/class/ActionBar)[ActionItem](https://docs.nativescript.org/api/class/ActionItem)[ActionItems](https://docs.nativescript.org/api/class/ActionItems)[ActivityIndicator](https://docs.nativescript.org/api/class/ActivityIndicator)[AndroidApplication](https://docs.nativescript.org/api/class/AndroidApplication)[Animation](https://docs.nativescript.org/api/class/Animation)[ApplicationCommon](https://docs.nativescript.org/api/class/ApplicationCommon)[Background](https://docs.nativescript.org/api/class/Background)[Binding](https://docs.nativescript.org/api/class/Binding)[Builder](https://docs.nativescript.org/api/class/Builder)[Button](https://docs.nativescript.org/api/class/Button)[ChangeType](https://docs.nativescript.org/api/class/ChangeType)[CoercibleProperty](https://docs.nativescript.org/api/class/CoercibleProperty)[Color](https://docs.nativescript.org/api/class/Color)[ContainerView](https://docs.nativescript.org/api/class/ContainerView)[ContentView](https://docs.nativescript.org/api/class/ContentView)[ControlStateChangeListener](https://docs.nativescript.org/api/class/ControlStateChangeListener)[CssAnimationParser](https://docs.nativescript.org/api/class/CssAnimationParser)[CssAnimationProperty](https://docs.nativescript.org/api/class/CssAnimationProperty)[CssProperty](https://docs.nativescript.org/api/class/CssProperty)[CustomLayoutView](https://docs.nativescript.org/api/class/CustomLayoutView)[DatePicker](https://docs.nativescript.org/api/class/DatePicker)[DockLayout](https://docs.nativescript.org/api/class/DockLayout)[EditableTextBase](https://docs.nativescript.org/api/class/EditableTextBase)[FadeTransition](https://docs.nativescript.org/api/class/FadeTransition)[File](https://docs.nativescript.org/api/class/File)[FileSystemEntity](https://docs.nativescript.org/api/class/FileSystemEntity)[FlexboxLayout](https://docs.nativescript.org/api/class/FlexboxLayout)[Folder](https://docs.nativescript.org/api/class/Folder)[Font](https://docs.nativescript.org/api/class/Font)[FormattedString](https://docs.nativescript.org/api/class/FormattedString)[Frame](https://docs.nativescript.org/api/class/Frame)[GesturesObserver](https://docs.nativescript.org/api/class/GesturesObserver)[GridLayout](https://docs.nativescript.org/api/class/GridLayout)[HtmlView](https://docs.nativescript.org/api/class/HtmlView)[Image](https://docs.nativescript.org/api/class/Image)[ImageAsset](https://docs.nativescript.org/api/class/ImageAsset)[ImageCache](https://docs.nativescript.org/api/class/ImageCache)[ImageSource](https://docs.nativescript.org/api/class/ImageSource)[InheritedCssProperty](https://docs.nativescript.org/api/class/InheritedCssProperty)[InheritedProperty](https://docs.nativescript.org/api/class/InheritedProperty)[iOSApplication](https://docs.nativescript.org/api/class/iOSApplication)[ItemSpec](https://docs.nativescript.org/api/class/ItemSpec)[KeyframeAnimation](https://docs.nativescript.org/api/class/KeyframeAnimation)[KeyframeAnimationInfo](https://docs.nativescript.org/api/class/KeyframeAnimationInfo)[Label](https://docs.nativescript.org/api/class/Label)[LayoutBase](https://docs.nativescript.org/api/class/LayoutBase)[ListPicker](https://docs.nativescript.org/api/class/ListPicker)[ListView](https://docs.nativescript.org/api/class/ListView)[ModalTransition](https://docs.nativescript.org/api/class/ModalTransition)[ModuleNameResolver](https://docs.nativescript.org/api/class/ModuleNameResolver)[NavigationButton](https://docs.nativescript.org/api/class/NavigationButton)[Observable](https://docs.nativescript.org/api/class/Observable)[ObservableArray](https://docs.nativescript.org/api/class/ObservableArray)[Page](https://docs.nativescript.org/api/class/Page)[PageBase](https://docs.nativescript.org/api/class/PageBase)[PageTransition](https://docs.nativescript.org/api/class/PageTransition)[ParserEventType](https://docs.nativescript.org/api/class/ParserEventType)[Placeholder](https://docs.nativescript.org/api/class/Placeholder)[Progress](https://docs.nativescript.org/api/class/Progress)[Property](https://docs.nativescript.org/api/class/Property)[ProxyViewContainer](https://docs.nativescript.org/api/class/ProxyViewContainer)[Repeater](https://docs.nativescript.org/api/class/Repeater)[RootLayout](https://docs.nativescript.org/api/class/RootLayout)[Screen](https://docs.nativescript.org/api/class/Screen)[ScrollView](https://docs.nativescript.org/api/class/ScrollView)[SearchBar](https://docs.nativescript.org/api/class/SearchBar)[SegmentedBar](https://docs.nativescript.org/api/class/SegmentedBar)[SegmentedBarItem](https://docs.nativescript.org/api/class/SegmentedBarItem)[SharedTransition](https://docs.nativescript.org/api/class/SharedTransition)[SharedTransitionHelper](https://docs.nativescript.org/api/class/SharedTransitionHelper)[ShorthandProperty](https://docs.nativescript.org/api/class/ShorthandProperty)[Slider](https://docs.nativescript.org/api/class/Slider)[SlideTransition](https://docs.nativescript.org/api/class/SlideTransition)[Span](https://docs.nativescript.org/api/class/Span)[StackLayout](https://docs.nativescript.org/api/class/StackLayout)[Style](https://docs.nativescript.org/api/class/Style)[Switch](https://docs.nativescript.org/api/class/Switch)[TabView](https://docs.nativescript.org/api/class/TabView)[TabViewItem](https://docs.nativescript.org/api/class/TabViewItem)[TextBase](https://docs.nativescript.org/api/class/TextBase)[TextField](https://docs.nativescript.org/api/class/TextField)[TextView](https://docs.nativescript.org/api/class/TextView)[TimePicker](https://docs.nativescript.org/api/class/TimePicker)[TouchManager](https://docs.nativescript.org/api/class/TouchManager)[Transition](https://docs.nativescript.org/api/class/Transition)[View](https://docs.nativescript.org/api/class/View)[ViewBase](https://docs.nativescript.org/api/class/ViewBase)[ViewCommon](https://docs.nativescript.org/api/class/ViewCommon)[ViewHelper](https://docs.nativescript.org/api/class/ViewHelper)[VirtualArray](https://docs.nativescript.org/api/class/VirtualArray)[WebView](https://docs.nativescript.org/api/class/WebView)[WrapLayout](https://docs.nativescript.org/api/class/WrapLayout)[WrappedValue](https://docs.nativescript.org/api/class/WrappedValue)[XmlParser](https://docs.nativescript.org/api/class/XmlParser)

#### Interfaces

[ActionOptions](https://docs.nativescript.org/api/interface/ActionOptions)[AddArrayFromBuilder](https://docs.nativescript.org/api/interface/AddArrayFromBuilder)[AddChildFromBuilder](https://docs.nativescript.org/api/interface/AddChildFromBuilder)[AlertOptions](https://docs.nativescript.org/api/interface/AlertOptions)[AndroidActivityBackPressedEventData](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData)[AndroidActivityBundleEventData](https://docs.nativescript.org/api/interface/AndroidActivityBundleEventData)[AndroidActivityCallbacks](https://docs.nativescript.org/api/interface/AndroidActivityCallbacks)[AndroidActivityEventData](https://docs.nativescript.org/api/interface/AndroidActivityEventData)[AndroidActivityNewIntentEventData](https://docs.nativescript.org/api/interface/AndroidActivityNewIntentEventData)[AndroidActivityRequestPermissionsEventData](https://docs.nativescript.org/api/interface/AndroidActivityRequestPermissionsEventData)[AndroidActivityResultEventData](https://docs.nativescript.org/api/interface/AndroidActivityResultEventData)[AnimationDefinition](https://docs.nativescript.org/api/interface/AnimationDefinition)[ApplicationEventData](https://docs.nativescript.org/api/interface/ApplicationEventData)[BackstackEntry](https://docs.nativescript.org/api/interface/BackstackEntry)[BindingOptions](https://docs.nativescript.org/api/interface/BindingOptions)[CancelableOptions](https://docs.nativescript.org/api/interface/CancelableOptions)[ChangedData](https://docs.nativescript.org/api/interface/ChangedData)[CommonLayoutParams](https://docs.nativescript.org/api/interface/CommonLayoutParams)[ComponentModule](https://docs.nativescript.org/api/interface/ComponentModule)[ConfirmOptions](https://docs.nativescript.org/api/interface/ConfirmOptions)[CreateViewEventData](https://docs.nativescript.org/api/interface/CreateViewEventData)[CssChangedEventData](https://docs.nativescript.org/api/interface/CssChangedEventData)[DialogOptions](https://docs.nativescript.org/api/interface/DialogOptions)[DiscardedErrorEventData](https://docs.nativescript.org/api/interface/DiscardedErrorEventData)[DownloadedData](https://docs.nativescript.org/api/interface/DownloadedData)[DownloadError](https://docs.nativescript.org/api/interface/DownloadError)[DownloadRequest](https://docs.nativescript.org/api/interface/DownloadRequest)[EventData](https://docs.nativescript.org/api/interface/EventData)[FontScaleChangedEventData](https://docs.nativescript.org/api/interface/FontScaleChangedEventData)[GestureEventData](https://docs.nativescript.org/api/interface/GestureEventData)[GestureEventDataWithState](https://docs.nativescript.org/api/interface/GestureEventDataWithState)[HttpContent](https://docs.nativescript.org/api/interface/HttpContent)[HttpRequestOptions](https://docs.nativescript.org/api/interface/HttpRequestOptions)[HttpResponse](https://docs.nativescript.org/api/interface/HttpResponse)[IDevice](https://docs.nativescript.org/api/interface/IDevice)[ImageAssetOptions](https://docs.nativescript.org/api/interface/ImageAssetOptions)[ItemEventData](https://docs.nativescript.org/api/interface/ItemEventData)[ItemsLoading](https://docs.nativescript.org/api/interface/ItemsLoading)[ItemsSource](https://docs.nativescript.org/api/interface/ItemsSource)[KeyedTemplate](https://docs.nativescript.org/api/interface/KeyedTemplate)[KeyframeDeclaration](https://docs.nativescript.org/api/interface/KeyframeDeclaration)[KeyframeInfo](https://docs.nativescript.org/api/interface/KeyframeInfo)[LaunchEventData](https://docs.nativescript.org/api/interface/LaunchEventData)[LoadAppCSSEventData](https://docs.nativescript.org/api/interface/LoadAppCSSEventData)[LoadEventData](https://docs.nativescript.org/api/interface/LoadEventData)[LoadOptions](https://docs.nativescript.org/api/interface/LoadOptions)[LoginOptions](https://docs.nativescript.org/api/interface/LoginOptions)[LoginResult](https://docs.nativescript.org/api/interface/LoginResult)[NativeScriptConfig](https://docs.nativescript.org/api/interface/NativeScriptConfig)[NativeScriptError](https://docs.nativescript.org/api/interface/NativeScriptError)[NavigatedData](https://docs.nativescript.org/api/interface/NavigatedData)[NavigationContext](https://docs.nativescript.org/api/interface/NavigationContext)[NavigationEntry](https://docs.nativescript.org/api/interface/NavigationEntry)[NavigationTransition](https://docs.nativescript.org/api/interface/NavigationTransition)[OrientationChangedEventData](https://docs.nativescript.org/api/interface/OrientationChangedEventData)[PanGestureEventData](https://docs.nativescript.org/api/interface/PanGestureEventData)[ParserEvent](https://docs.nativescript.org/api/interface/ParserEvent)[PinchGestureEventData](https://docs.nativescript.org/api/interface/PinchGestureEventData)[PlatformContext](https://docs.nativescript.org/api/interface/PlatformContext)[PromptOptions](https://docs.nativescript.org/api/interface/PromptOptions)[PromptResult](https://docs.nativescript.org/api/interface/PromptResult)[PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData)[RootLayoutOptions](https://docs.nativescript.org/api/interface/RootLayoutOptions)[RotationGestureEventData](https://docs.nativescript.org/api/interface/RotationGestureEventData)[ScrollEventData](https://docs.nativescript.org/api/interface/ScrollEventData)[ShadeCoverOptions](https://docs.nativescript.org/api/interface/ShadeCoverOptions)[SharedTransitionConfig](https://docs.nativescript.org/api/interface/SharedTransitionConfig)[ShowModalOptions](https://docs.nativescript.org/api/interface/ShowModalOptions)[ShownModallyData](https://docs.nativescript.org/api/interface/ShownModallyData)[Size](https://docs.nativescript.org/api/interface/Size)[SwipeGestureEventData](https://docs.nativescript.org/api/interface/SwipeGestureEventData)[SystemAppearanceChangedEventData](https://docs.nativescript.org/api/interface/SystemAppearanceChangedEventData)[TapGestureEventData](https://docs.nativescript.org/api/interface/TapGestureEventData)[Template](https://docs.nativescript.org/api/interface/Template)[TemplatedItemsView](https://docs.nativescript.org/api/interface/TemplatedItemsView)[TimerInfo](https://docs.nativescript.org/api/interface/TimerInfo)[TouchGestureEventData](https://docs.nativescript.org/api/interface/TouchGestureEventData)[TraceErrorHandler](https://docs.nativescript.org/api/interface/TraceErrorHandler)[TraceEventListener](https://docs.nativescript.org/api/interface/TraceEventListener)[TraceWriter](https://docs.nativescript.org/api/interface/TraceWriter)[UnhandledErrorEventData](https://docs.nativescript.org/api/interface/UnhandledErrorEventData)[ViewEntry](https://docs.nativescript.org/api/interface/ViewEntry)

#### Type Aliases

[dip](https://docs.nativescript.org/api/index#dip)[GridUnitType](https://docs.nativescript.org/api/index#gridunittype-1)[Headers](https://docs.nativescript.org/api/index#headers)[HorizontalAlignment](https://docs.nativescript.org/api/index#horizontalalignment)[InstrumentationMode](https://docs.nativescript.org/api/index#instrumentationmode)[LengthDipUnit](https://docs.nativescript.org/api/index#lengthdipunit)[LengthPercentUnit](https://docs.nativescript.org/api/index#lengthpercentunit)[LengthPxUnit](https://docs.nativescript.org/api/index#lengthpxunit)[LengthType](https://docs.nativescript.org/api/index#lengthtype)[ModuleListProvider](https://docs.nativescript.org/api/index#modulelistprovider)[percent](https://docs.nativescript.org/api/index#percent)[PercentLengthType](https://docs.nativescript.org/api/index#percentlengthtype)[px](https://docs.nativescript.org/api/index#px)[SharedTransitionTagProperties](https://docs.nativescript.org/api/index#sharedtransitiontagproperties)[TouchAnimationOptions](https://docs.nativescript.org/api/index#touchanimationoptions)[VerticalAlignment](https://docs.nativescript.org/api/index#verticalalignment)[WebViewNavigationType](https://docs.nativescript.org/api/index#webviewnavigationtype)

#### Variables

[\_resetRootView](https://docs.nativescript.org/api/index#resetrootview)[addCss](https://docs.nativescript.org/api/index#addcss)[android](https://docs.nativescript.org/api/index#android)[androidDynamicElevationOffsetProperty](https://docs.nativescript.org/api/index#androiddynamicelevationoffsetproperty)[androidElevationProperty](https://docs.nativescript.org/api/index#androidelevationproperty)[AnimationCurve](https://docs.nativescript.org/api/index#animationcurve)[Application](https://docs.nativescript.org/api/index#application)[autocapitalizationTypeProperty](https://docs.nativescript.org/api/index#autocapitalizationtypeproperty)[autocorrectProperty](https://docs.nativescript.org/api/index#autocorrectproperty)[backgroundColorProperty](https://docs.nativescript.org/api/index#backgroundcolorproperty)[backgroundEvent](https://docs.nativescript.org/api/index#backgroundevent)[backgroundImageProperty](https://docs.nativescript.org/api/index#backgroundimageproperty)[backgroundInternalProperty](https://docs.nativescript.org/api/index#backgroundinternalproperty)[backgroundPositionProperty](https://docs.nativescript.org/api/index#backgroundpositionproperty)[backgroundProperty](https://docs.nativescript.org/api/index#backgroundproperty)[backgroundRepeatProperty](https://docs.nativescript.org/api/index#backgroundrepeatproperty)[backgroundSizeProperty](https://docs.nativescript.org/api/index#backgroundsizeproperty)[borderBottomColorProperty](https://docs.nativescript.org/api/index#borderbottomcolorproperty)[borderBottomLeftRadiusProperty](https://docs.nativescript.org/api/index#borderbottomleftradiusproperty)[borderBottomRightRadiusProperty](https://docs.nativescript.org/api/index#borderbottomrightradiusproperty)[borderBottomWidthProperty](https://docs.nativescript.org/api/index#borderbottomwidthproperty)[borderColorProperty](https://docs.nativescript.org/api/index#bordercolorproperty)[borderLeftColorProperty](https://docs.nativescript.org/api/index#borderleftcolorproperty)[borderLeftWidthProperty](https://docs.nativescript.org/api/index#borderleftwidthproperty)[borderRadiusProperty](https://docs.nativescript.org/api/index#borderradiusproperty)[borderRightColorProperty](https://docs.nativescript.org/api/index#borderrightcolorproperty)[borderRightWidthProperty](https://docs.nativescript.org/api/index#borderrightwidthproperty)[borderTopColorProperty](https://docs.nativescript.org/api/index#bordertopcolorproperty)[borderTopLeftRadiusProperty](https://docs.nativescript.org/api/index#bordertopleftradiusproperty)[borderTopRightRadiusProperty](https://docs.nativescript.org/api/index#bordertoprightradiusproperty)[borderTopWidthProperty](https://docs.nativescript.org/api/index#bordertopwidthproperty)[borderWidthProperty](https://docs.nativescript.org/api/index#borderwidthproperty)[clipPathProperty](https://docs.nativescript.org/api/index#clippathproperty)[colorProperty](https://docs.nativescript.org/api/index#colorproperty)[CSSHelper](https://docs.nativescript.org/api/index#csshelper)[Device](https://docs.nativescript.org/api/index#device)[Dialogs](https://docs.nativescript.org/api/index#dialogs)[discardedErrorEvent](https://docs.nativescript.org/api/index#discardederrorevent)[displayedEvent](https://docs.nativescript.org/api/index#displayedevent)[editableProperty](https://docs.nativescript.org/api/index#editableproperty)[Enums](https://docs.nativescript.org/api/index#enums)[exitEvent](https://docs.nativescript.org/api/index#exitevent)[fontFamilyProperty](https://docs.nativescript.org/api/index#fontfamilyproperty)[fontInternalProperty](https://docs.nativescript.org/api/index#fontinternalproperty)[fontScaleChangedEvent](https://docs.nativescript.org/api/index#fontscalechangedevent)[fontScaleInternalProperty](https://docs.nativescript.org/api/index#fontscaleinternalproperty)[fontSizeProperty](https://docs.nativescript.org/api/index#fontsizeproperty)[fontStyleProperty](https://docs.nativescript.org/api/index#fontstyleproperty)[fontWeightProperty](https://docs.nativescript.org/api/index#fontweightproperty)[foregroundEvent](https://docs.nativescript.org/api/index#foregroundevent)[getCssFileName](https://docs.nativescript.org/api/index#getcssfilename)[getMainEntry](https://docs.nativescript.org/api/index#getmainentry)[getNativeApplication](https://docs.nativescript.org/api/index#getnativeapplication)[getResources](https://docs.nativescript.org/api/index#getresources)[getRootView](https://docs.nativescript.org/api/index#getrootview)[hasLaunched](https://docs.nativescript.org/api/index#haslaunched)[hasListeners](https://docs.nativescript.org/api/index#haslisteners)[heightProperty](https://docs.nativescript.org/api/index#heightproperty)[hintProperty](https://docs.nativescript.org/api/index#hintproperty)[horizontalAlignmentProperty](https://docs.nativescript.org/api/index#horizontalalignmentproperty)[inBackground](https://docs.nativescript.org/api/index#inbackground)[ios](https://docs.nativescript.org/api/index#ios)[isAndroid](https://docs.nativescript.org/api/index#isandroid)[isIOS](https://docs.nativescript.org/api/index#isios)[isUserInteractionEnabledProperty](https://docs.nativescript.org/api/index#isuserinteractionenabledproperty)[keyboardTypeProperty](https://docs.nativescript.org/api/index#keyboardtypeproperty)[launchEvent](https://docs.nativescript.org/api/index#launchevent)[letterSpacingProperty](https://docs.nativescript.org/api/index#letterspacingproperty)[lineHeightProperty](https://docs.nativescript.org/api/index#lineheightproperty)[loadAppCss](https://docs.nativescript.org/api/index#loadappcss)[lowMemoryEvent](https://docs.nativescript.org/api/index#lowmemoryevent)[marginBottomProperty](https://docs.nativescript.org/api/index#marginbottomproperty)[marginLeftProperty](https://docs.nativescript.org/api/index#marginleftproperty)[marginProperty](https://docs.nativescript.org/api/index#marginproperty)[marginRightProperty](https://docs.nativescript.org/api/index#marginrightproperty)[marginTopProperty](https://docs.nativescript.org/api/index#margintopproperty)[maxLengthProperty](https://docs.nativescript.org/api/index#maxlengthproperty)[minHeightProperty](https://docs.nativescript.org/api/index#minheightproperty)[minWidthProperty](https://docs.nativescript.org/api/index#minwidthproperty)[notify](https://docs.nativescript.org/api/index#notify)[off](https://docs.nativescript.org/api/index#off)[on](https://docs.nativescript.org/api/index#on)[opacityProperty](https://docs.nativescript.org/api/index#opacityproperty)[orientation](https://docs.nativescript.org/api/index#orientation-1)[orientationChangedEvent](https://docs.nativescript.org/api/index#orientationchangedevent)[paddingBottomProperty](https://docs.nativescript.org/api/index#paddingbottomproperty)[paddingLeftProperty](https://docs.nativescript.org/api/index#paddingleftproperty)[paddingProperty](https://docs.nativescript.org/api/index#paddingproperty)[paddingRightProperty](https://docs.nativescript.org/api/index#paddingrightproperty)[paddingTopProperty](https://docs.nativescript.org/api/index#paddingtopproperty)[placeholderColorProperty](https://docs.nativescript.org/api/index#placeholdercolorproperty)[platformNames](https://docs.nativescript.org/api/index#platformnames)[resetRootView](https://docs.nativescript.org/api/index#resetrootview)[resumeEvent](https://docs.nativescript.org/api/index#resumeevent)[returnKeyTypeProperty](https://docs.nativescript.org/api/index#returnkeytypeproperty)[rotateProperty](https://docs.nativescript.org/api/index#rotateproperty)[run](https://docs.nativescript.org/api/index#run)[scaleXProperty](https://docs.nativescript.org/api/index#scalexproperty)[scaleYProperty](https://docs.nativescript.org/api/index#scaleyproperty)[setAutoSystemAppearanceChanged](https://docs.nativescript.org/api/index#setautosystemappearancechanged)[setCssFileName](https://docs.nativescript.org/api/index#setcssfilename)[setMaxRefreshRate](https://docs.nativescript.org/api/index#setmaxrefreshrate)[setResources](https://docs.nativescript.org/api/index#setresources)[suspended](https://docs.nativescript.org/api/index#suspended)[suspendEvent](https://docs.nativescript.org/api/index#suspendevent)[systemAppearance](https://docs.nativescript.org/api/index#systemappearance-1)[systemAppearanceChanged](https://docs.nativescript.org/api/index#systemappearancechanged)[systemAppearanceChangedEvent](https://docs.nativescript.org/api/index#systemappearancechangedevent)[textAlignmentProperty](https://docs.nativescript.org/api/index#textalignmentproperty)[textDecorationProperty](https://docs.nativescript.org/api/index#textdecorationproperty)[textShadowProperty](https://docs.nativescript.org/api/index#textshadowproperty)[textTransformProperty](https://docs.nativescript.org/api/index#texttransformproperty)[translateXProperty](https://docs.nativescript.org/api/index#translatexproperty)[translateYProperty](https://docs.nativescript.org/api/index#translateyproperty)[uncaughtErrorEvent](https://docs.nativescript.org/api/index#uncaughterrorevent)[unsetValue](https://docs.nativescript.org/api/index#unsetvalue)[updateTextTriggerProperty](https://docs.nativescript.org/api/index#updatetexttriggerproperty)[verticalAlignmentProperty](https://docs.nativescript.org/api/index#verticalalignmentproperty)[visibilityProperty](https://docs.nativescript.org/api/index#visibilityproperty)[whiteSpaceProperty](https://docs.nativescript.org/api/index#whitespaceproperty)[widthProperty](https://docs.nativescript.org/api/index#widthproperty)[zeroLength](https://docs.nativescript.org/api/index#zerolength)[zIndexProperty](https://docs.nativescript.org/api/index#zindexproperty)

#### Functions

[\_setResolver](https://docs.nativescript.org/api/index#setresolver)[action](https://docs.nativescript.org/api/index#action-1)[addTaggedAdditionalCSS](https://docs.nativescript.org/api/index#addtaggedadditionalcss)[addWeakEventListener](https://docs.nativescript.org/api/index#addweakeventlistener)[alert](https://docs.nativescript.org/api/index#alert-1)[animationTimingFunctionConverter](https://docs.nativescript.org/api/index#animationtimingfunctionconverter)[booleanConverter](https://docs.nativescript.org/api/index#booleanconverter)[confirm](https://docs.nativescript.org/api/index#confirm-1)[CSSType](https://docs.nativescript.org/api/index#csstype)[eachDescendant](https://docs.nativescript.org/api/index#eachdescendant)[fromObject](https://docs.nativescript.org/api/index#fromobject)[fromObjectRecursive](https://docs.nativescript.org/api/index#fromobjectrecursive)[getAncestor](https://docs.nativescript.org/api/index#getancestor)[getCurrentPage](https://docs.nativescript.org/api/index#getcurrentpage)[getFileAccess](https://docs.nativescript.org/api/index#getfileaccess)[getRootLayout](https://docs.nativescript.org/api/index#getrootlayout)[getTransformedText](https://docs.nativescript.org/api/index#gettransformedtext)[getViewById](https://docs.nativescript.org/api/index#getviewbyid)[login](https://docs.nativescript.org/api/index#login-1)[makeParser](https://docs.nativescript.org/api/index#makeparser)[makeValidator](https://docs.nativescript.org/api/index#makevalidator)[parseCSSShadow](https://docs.nativescript.org/api/index#parsecssshadow)[parseKeyframeDeclarations](https://docs.nativescript.org/api/index#parsekeyframedeclarations)[profile](https://docs.nativescript.org/api/index#profile)[profilingDisable](https://docs.nativescript.org/api/index#profilingdisable)[profilingDumpProfiles](https://docs.nativescript.org/api/index#profilingdumpprofiles)[profilingEnable](https://docs.nativescript.org/api/index#profilingenable)[profilingIsRunning](https://docs.nativescript.org/api/index#profilingisrunning)[profilingResetProfiles](https://docs.nativescript.org/api/index#profilingresetprofiles)[profilingStart](https://docs.nativescript.org/api/index#profilingstart)[profilingStartCPU](https://docs.nativescript.org/api/index#profilingstartcpu)[profilingStop](https://docs.nativescript.org/api/index#profilingstop)[profilingStopCPU](https://docs.nativescript.org/api/index#profilingstopcpu)[profilingTime](https://docs.nativescript.org/api/index#profilingtime)[profilingUptime](https://docs.nativescript.org/api/index#profilinguptime)[prompt](https://docs.nativescript.org/api/index#prompt-1)[PseudoClassHandler](https://docs.nativescript.org/api/index#pseudoclasshandler)[querySelectorAll](https://docs.nativescript.org/api/index#queryselectorall)[removeTaggedAdditionalCSS](https://docs.nativescript.org/api/index#removetaggedadditionalcss)[removeWeakEventListener](https://docs.nativescript.org/api/index#removeweakeventlistener)[resolveFileNameFromUrl](https://docs.nativescript.org/api/index#resolvefilenamefromurl)[setActivityCallbacks](https://docs.nativescript.org/api/index#setactivitycallbacks)[timeConverter](https://docs.nativescript.org/api/index#timeconverter)[transformConverter](https://docs.nativescript.org/api/index#transformconverter)

## References [​](https://docs.nativescript.org/api/\#references)

## Type Aliases [​](https://docs.nativescript.org/api/\#type-aliases)

### GridUnitType [​](https://docs.nativescript.org/api/\#gridunittype)

```
GridUnitType: "pixel" | "star" | "auto"
```

defined in [@nativescript/core/ui/layouts/grid-layout/index.d.ts:175:12](https://unpkg.com/browse/@nativescript/core//ui/layouts/grid-layout/index.d.ts#L175)

defined in [@nativescript/core/ui/layouts/grid-layout/index.d.ts:176:17](https://unpkg.com/browse/@nativescript/core//ui/layouts/grid-layout/index.d.ts#L176)

### Headers [​](https://docs.nativescript.org/api/\#headers)

```
Headers: {}
```

defined in [@nativescript/core/http/index.d.ts:127:12](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L127)

### HorizontalAlignment [​](https://docs.nativescript.org/api/\#horizontalalignment)

```
HorizontalAlignment: HorizontalAlignmentType
```

defined in [@nativescript/core/core-types/index.d.ts:285:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L285)

### InstrumentationMode [​](https://docs.nativescript.org/api/\#instrumentationmode)

```
InstrumentationMode: "counters" | "timeline" | "lifecycle"
```

defined in [@nativescript/core/profiling/index.d.ts:17:5](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L17)

Profiling mode to use.
\- `` `counters` `` Accumulates method call counts and times until dumpProfiles is called and then prints aggregated statistic in the console. This is the default.
\- `` `timeline` `` Outputs method names along start/end timestamps in the console on the go.
\- `` `lifecycle` `` Outputs basic non-verbose times for startup, navigation, etc.

### LengthDipUnit [​](https://docs.nativescript.org/api/\#lengthdipunit)

```
LengthDipUnit: LengthDipUnit
```

defined in [@nativescript/core/core-types/index.d.ts:261:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L261)

### LengthPercentUnit [​](https://docs.nativescript.org/api/\#lengthpercentunit)

```
LengthPercentUnit: LengthPercentUnit
```

defined in [@nativescript/core/core-types/index.d.ts:269:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L269)

### LengthPxUnit [​](https://docs.nativescript.org/api/\#lengthpxunit)

```
LengthPxUnit: LengthPxUnit
```

defined in [@nativescript/core/core-types/index.d.ts:265:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L265)

### LengthType [​](https://docs.nativescript.org/api/\#lengthtype)

```
LengthType: LengthType
```

defined in [@nativescript/core/core-types/index.d.ts:273:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L273)

### ModuleListProvider [​](https://docs.nativescript.org/api/\#modulelistprovider)

```
ModuleListProvider: () => string[]
```

defined in [@nativescript/core/module-name-resolver/index.d.ts:9:12](https://unpkg.com/browse/@nativescript/core//module-name-resolver/index.d.ts#L9)

### PercentLengthType [​](https://docs.nativescript.org/api/\#percentlengthtype)

```
PercentLengthType: PercentLengthType
```

defined in [@nativescript/core/core-types/index.d.ts:277:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L277)

### SharedTransitionTagProperties [​](https://docs.nativescript.org/api/\#sharedtransitiontagproperties)

```
SharedTransitionTagProperties: SharedProperties & {
callback?: (view: View, action: SharedTransitionEventAction) => Promise<void>;
propertiesToMatch?: SharedTransitionTagPropertiesToMatch;
}
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:37:12](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L37)

Properties which can be set on individual Shared Elements

### TouchAnimationOptions [​](https://docs.nativescript.org/api/\#touchanimationoptions)

```
TouchAnimationOptions: {
  down?: TouchAnimationFn | AnimationDefinition
}
```

defined in [@nativescript/core/ui/gestures/touch-manager.d.ts:5:12](https://unpkg.com/browse/@nativescript/core//ui/gestures/touch-manager.d.ts#L5)

### VerticalAlignment [​](https://docs.nativescript.org/api/\#verticalalignment)

```
VerticalAlignment: VerticalAlignmentType
```

defined in [@nativescript/core/core-types/index.d.ts:289:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L289)

### WebViewNavigationType [​](https://docs.nativescript.org/api/\#webviewnavigationtype)

```
WebViewNavigationType: "linkClicked" | "formSubmitted" | "backForward" | "reload" | "formResubmitted" | "other" | undefined
```

defined in [@nativescript/core/ui/web-view/index.d.ts:17:12](https://unpkg.com/browse/@nativescript/core//ui/web-view/index.d.ts#L17)

Represents navigation type

### dip [​](https://docs.nativescript.org/api/\#dip)

```
dip: number
```

defined in [@nativescript/core/core-types/index.d.ts:249:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L249)

### percent [​](https://docs.nativescript.org/api/\#percent)

```
percent: number
```

defined in [@nativescript/core/core-types/index.d.ts:257:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L257)

### px [​](https://docs.nativescript.org/api/\#px)

```
px: number
```

defined in [@nativescript/core/core-types/index.d.ts:253:12](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L253)

## Variables [​](https://docs.nativescript.org/api/\#variables)

### AnimationCurve [​](https://docs.nativescript.org/api/\#animationcurve)

```
AnimationCurve: typeof AnimationCurve
```

defined in [@nativescript/core/core-types/index.d.ts:281:21](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L281)

### Application [​](https://docs.nativescript.org/api/\#application)

```
Application: ApplicationCommon
```

defined in [@nativescript/core/application/application.d.ts:6:13](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L6)

### CSSHelper [​](https://docs.nativescript.org/api/\#csshelper)

```
CSSHelper: {
  AttributeSelector: typeof AttributeSelector
  ClassSelector: typeof ClassSelector
  InvalidSelector: typeof InvalidSelector
  PseudoClassSelector: typeof PseudoClassSelector
  RuleSet: typeof RuleSet
  Selector: typeof Selector
  SelectorCore: typeof SelectorCore
  SelectorsMap: typeof SelectorsMap
  SelectorsMatch: typeof SelectorsMatch
  SimpleSelector: typeof SimpleSelector
  SimpleSelectorSequence: typeof SimpleSelectorSequence
  TypeSelector: typeof TypeSelector
  UniversalSelector: typeof UniversalSelector
  createSelector: typeof createSelector
}
```

defined in [@nativescript/core/ui/styling/css-selector.d.ts:197:21](https://unpkg.com/browse/@nativescript/core//ui/styling/css-selector.d.ts#L197)

### Device [​](https://docs.nativescript.org/api/\#device)

```
Device: IDevice
```

defined in [@nativescript/core/platform/index.d.ts:134:13](https://unpkg.com/browse/@nativescript/core//platform/index.d.ts#L134)

Gets the current device information.

### Dialogs [​](https://docs.nativescript.org/api/\#dialogs)

```
Dialogs: {
action: typeof action;
alert: typeof alert;
confirm: typeof confirm;
login: typeof login;
}
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:305:21](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L305)

Singular rollup for convenience of all dialog methods

### Enums [​](https://docs.nativescript.org/api/\#enums)

```
Enums: {
Accuracy: typeof Accuracy;
AndroidActionBarIconVisibility: typeof AndroidActionBarIconVisibility;
AndroidActionItemPosition: typeof AndroidActionItemPosition;
AnimationCurve: typeof AnimationCurve;
AutocapitalizationType: typeof AutocapitalizationType;
BackgroundRepeat: typeof BackgroundRepeat;
DeviceOrientation: typeof DeviceOrientation;
DeviceType: typeof DeviceType;
Dock: typeof Dock;
FontAttributes: typeof FontAttributes;
FontStyle: typeof FontStyle;
FontWeight: typeof FontWeight;
HorizontalAlignment: typeof HorizontalAlignment;
IOSActionItemPosition: typeof IOSActionItemPosition;
ImageFormat: typeof ImageFormat;
KeyboardType: typeof KeyboardType;
NavigationBarVisibility: typeof NavigationBarVisibility;
Orientation: typeof Orientation;
ReturnKeyType: typeof ReturnKeyType;
StatusBarStyle: typeof StatusBarStyle;
Stretch: typeof ImageStretch;
SystemAppearance: typeof SystemAppearance;
TextAlignment: typeof TextAlignment;
TextDecoration: typeof TextDecoration;
TextTransform: typeof TextTransform;
UpdateTextTrigger: typeof UpdateTextTrigger;
VerticalAlignment: typeof VerticalAlignment;
Visibility: typeof Visibility;
}
```

defined in [@nativescript/core/core-types/index.d.ts:293:21](https://unpkg.com/browse/@nativescript/core//core-types/index.d.ts#L293)

### \_resetRootView [​](https://docs.nativescript.org/api/\#resetrootview)

```
_resetRootView: any
```

defined in [@nativescript/core/application/application-shims.d.ts:135:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L135)

### addCss [​](https://docs.nativescript.org/api/\#addcss)

```
addCss: any
```

defined in [@nativescript/core/application/application-shims.d.ts:9:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L9)

### android [​](https://docs.nativescript.org/api/\#android)

```
android: AndroidApplication
```

defined in [@nativescript/core/application/application-shims.d.ts:342:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L342)

### androidDynamicElevationOffsetProperty [​](https://docs.nativescript.org/api/\#androiddynamicelevationoffsetproperty)

```
androidDynamicElevationOffsetProperty: CssProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:106:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L106)

### androidElevationProperty [​](https://docs.nativescript.org/api/\#androidelevationproperty)

```
androidElevationProperty: CssProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:105:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L105)

### autocapitalizationTypeProperty [​](https://docs.nativescript.org/api/\#autocapitalizationtypeproperty)

```
autocapitalizationTypeProperty: Property<EditableTextBase, AutocapitalizationInputType>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:89:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L89)

### autocorrectProperty [​](https://docs.nativescript.org/api/\#autocorrectproperty)

```
autocorrectProperty: Property<EditableTextBase, boolean>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:90:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L90)

### backgroundColorProperty [​](https://docs.nativescript.org/api/\#backgroundcolorproperty)

```
backgroundColorProperty: CssAnimationProperty<Style, Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:48:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L48)

### backgroundEvent [​](https://docs.nativescript.org/api/\#backgroundevent)

```
backgroundEvent: "background" = "background"
```

defined in [@nativescript/core/application/application-shims.d.ts:306:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L306)

### backgroundImageProperty [​](https://docs.nativescript.org/api/\#backgroundimageproperty)

```
backgroundImageProperty: CssProperty<Style, string>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:49:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L49)

### backgroundInternalProperty [​](https://docs.nativescript.org/api/\#backgroundinternalproperty)

```
backgroundInternalProperty: CssProperty<Style, Background>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:101:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L101)

### backgroundPositionProperty [​](https://docs.nativescript.org/api/\#backgroundpositionproperty)

```
backgroundPositionProperty: CssProperty<Style, string>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:52:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L52)

### backgroundProperty [​](https://docs.nativescript.org/api/\#backgroundproperty)

```
backgroundProperty: ShorthandProperty<Style, string>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:47:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L47)

### backgroundRepeatProperty [​](https://docs.nativescript.org/api/\#backgroundrepeatproperty)

```
backgroundRepeatProperty: CssProperty<Style, BackgroundRepeatType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:50:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L50)

### backgroundSizeProperty [​](https://docs.nativescript.org/api/\#backgroundsizeproperty)

```
backgroundSizeProperty: CssProperty<Style, string>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:51:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L51)

### borderBottomColorProperty [​](https://docs.nativescript.org/api/\#borderbottomcolorproperty)

```
borderBottomColorProperty: CssProperty<Style, Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:57:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L57)

### borderBottomLeftRadiusProperty [​](https://docs.nativescript.org/api/\#borderbottomleftradiusproperty)

```
borderBottomLeftRadiusProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:70:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L70)

### borderBottomRightRadiusProperty [​](https://docs.nativescript.org/api/\#borderbottomrightradiusproperty)

```
borderBottomRightRadiusProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:69:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L69)

### borderBottomWidthProperty [​](https://docs.nativescript.org/api/\#borderbottomwidthproperty)

```
borderBottomWidthProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:63:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L63)

### borderColorProperty [​](https://docs.nativescript.org/api/\#bordercolorproperty)

```
borderColorProperty: ShorthandProperty<Style, string | Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:54:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L54)

### borderLeftColorProperty [​](https://docs.nativescript.org/api/\#borderleftcolorproperty)

```
borderLeftColorProperty: CssProperty<Style, Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:58:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L58)

### borderLeftWidthProperty [​](https://docs.nativescript.org/api/\#borderleftwidthproperty)

```
borderLeftWidthProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:64:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L64)

### borderRadiusProperty [​](https://docs.nativescript.org/api/\#borderradiusproperty)

```
borderRadiusProperty: ShorthandProperty<Style, string | LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:66:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L66)

### borderRightColorProperty [​](https://docs.nativescript.org/api/\#borderrightcolorproperty)

```
borderRightColorProperty: CssProperty<Style, Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:56:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L56)

### borderRightWidthProperty [​](https://docs.nativescript.org/api/\#borderrightwidthproperty)

```
borderRightWidthProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:62:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L62)

### borderTopColorProperty [​](https://docs.nativescript.org/api/\#bordertopcolorproperty)

```
borderTopColorProperty: CssProperty<Style, Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:55:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L55)

### borderTopLeftRadiusProperty [​](https://docs.nativescript.org/api/\#bordertopleftradiusproperty)

```
borderTopLeftRadiusProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:67:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L67)

### borderTopRightRadiusProperty [​](https://docs.nativescript.org/api/\#bordertoprightradiusproperty)

```
borderTopRightRadiusProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:68:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L68)

### borderTopWidthProperty [​](https://docs.nativescript.org/api/\#bordertopwidthproperty)

```
borderTopWidthProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:61:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L61)

### borderWidthProperty [​](https://docs.nativescript.org/api/\#borderwidthproperty)

```
borderWidthProperty: ShorthandProperty<Style, string | LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:60:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L60)

### clipPathProperty [​](https://docs.nativescript.org/api/\#clippathproperty)

```
clipPathProperty: CssProperty<Style, string>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:44:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L44)

### colorProperty [​](https://docs.nativescript.org/api/\#colorproperty)

```
colorProperty: InheritedCssProperty<Style, Color>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:45:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L45)

### discardedErrorEvent [​](https://docs.nativescript.org/api/\#discardederrorevent)

```
discardedErrorEvent: "discardedError" = "discardedError"
```

defined in [@nativescript/core/application/application-shims.d.ts:207:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L207)

### displayedEvent [​](https://docs.nativescript.org/api/\#displayedevent)

```
displayedEvent: "displayed" = "displayed"
```

defined in [@nativescript/core/application/application-shims.d.ts:225:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L225)

### editableProperty [​](https://docs.nativescript.org/api/\#editableproperty)

```
editableProperty: Property<EditableTextBase, boolean>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:87:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L87)

### exitEvent [​](https://docs.nativescript.org/api/\#exitevent)

```
exitEvent: "exit" = "exit"
```

defined in [@nativescript/core/application/application-shims.d.ts:234:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L234)

### fontFamilyProperty [​](https://docs.nativescript.org/api/\#fontfamilyproperty)

```
fontFamilyProperty: InheritedCssProperty<Style, string>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:97:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L97)

### fontInternalProperty [​](https://docs.nativescript.org/api/\#fontinternalproperty)

```
fontInternalProperty: InheritedCssProperty<Style, Font>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:102:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L102)

### fontScaleChangedEvent [​](https://docs.nativescript.org/api/\#fontscalechangedevent)

```
fontScaleChangedEvent: "fontScaleChanged" = "fontScaleChanged"
```

defined in [@nativescript/core/application/application-shims.d.ts:243:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L243)

### fontScaleInternalProperty [​](https://docs.nativescript.org/api/\#fontscaleinternalproperty)

```
fontScaleInternalProperty: InheritedCssProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:103:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L103)

### fontSizeProperty [​](https://docs.nativescript.org/api/\#fontsizeproperty)

```
fontSizeProperty: InheritedCssProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:96:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L96)

### fontStyleProperty [​](https://docs.nativescript.org/api/\#fontstyleproperty)

```
fontStyleProperty: InheritedCssProperty<Style, FontStyleType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:98:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L98)

### fontWeightProperty [​](https://docs.nativescript.org/api/\#fontweightproperty)

```
fontWeightProperty: InheritedCssProperty<Style, FontWeightType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:99:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L99)

### foregroundEvent [​](https://docs.nativescript.org/api/\#foregroundevent)

```
foregroundEvent: "foreground" = "foreground"
```

defined in [@nativescript/core/application/application-shims.d.ts:315:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L315)

### getCssFileName [​](https://docs.nativescript.org/api/\#getcssfilename)

```
getCssFileName: any
```

defined in [@nativescript/core/application/application-shims.d.ts:18:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L18)

### getMainEntry [​](https://docs.nativescript.org/api/\#getmainentry)

```
getMainEntry: any
```

defined in [@nativescript/core/application/application-shims.d.ts:27:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L27)

### getNativeApplication [​](https://docs.nativescript.org/api/\#getnativeapplication)

```
getNativeApplication: any
```

defined in [@nativescript/core/application/application-shims.d.ts:36:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L36)

### getResources [​](https://docs.nativescript.org/api/\#getresources)

```
getResources: any
```

defined in [@nativescript/core/application/application-shims.d.ts:45:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L45)

### getRootView [​](https://docs.nativescript.org/api/\#getrootview)

```
getRootView: any
```

defined in [@nativescript/core/application/application-shims.d.ts:54:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L54)

### hasLaunched [​](https://docs.nativescript.org/api/\#haslaunched)

```
hasLaunched: any
```

defined in [@nativescript/core/application/application-shims.d.ts:63:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L63)

### hasListeners [​](https://docs.nativescript.org/api/\#haslisteners)

```
hasListeners: any
```

defined in [@nativescript/core/application/application-shims.d.ts:72:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L72)

### heightProperty [​](https://docs.nativescript.org/api/\#heightproperty)

```
heightProperty: CssAnimationProperty<Style, PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:79:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L79)

### hintProperty [​](https://docs.nativescript.org/api/\#hintproperty)

```
hintProperty: Property<EditableTextBase, string>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:91:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L91)

### horizontalAlignmentProperty [​](https://docs.nativescript.org/api/\#horizontalalignmentproperty)

```
horizontalAlignmentProperty: CssProperty<Style, HorizontalAlignmentType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:93:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L93)

### inBackground [​](https://docs.nativescript.org/api/\#inbackground)

```
inBackground: boolean
```

defined in [@nativescript/core/application/application-shims.d.ts:324:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L324)

### ios [​](https://docs.nativescript.org/api/\#ios)

```
ios: iOSApplication
```

defined in [@nativescript/core/application/application-shims.d.ts:351:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L351)

### isAndroid [​](https://docs.nativescript.org/api/\#isandroid)

```
isAndroid: boolean
```

defined in [@nativescript/core/platform/index.d.ts:10:13](https://unpkg.com/browse/@nativescript/core//platform/index.d.ts#L10)

Gets a value indicating if the app is running on the Android platform.

### isIOS [​](https://docs.nativescript.org/api/\#isios)

```
isIOS: boolean
```

defined in [@nativescript/core/platform/index.d.ts:15:13](https://unpkg.com/browse/@nativescript/core//platform/index.d.ts#L15)

Gets a value indicating if the app is running on the iOS platform.

### isUserInteractionEnabledProperty [​](https://docs.nativescript.org/api/\#isuserinteractionenabledproperty)

```
isUserInteractionEnabledProperty: Property<View, boolean>
```

defined in [@nativescript/core/ui/core/view/index.d.ts:988:13](https://unpkg.com/browse/@nativescript/core//ui/core/view/index.d.ts#L988)

### keyboardTypeProperty [​](https://docs.nativescript.org/api/\#keyboardtypeproperty)

```
keyboardTypeProperty: Property<EditableTextBase, KeyboardInputType>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:85:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L85)

### launchEvent [​](https://docs.nativescript.org/api/\#launchevent)

```
launchEvent: "launch" = "launch"
```

defined in [@nativescript/core/application/application-shims.d.ts:252:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L252)

### letterSpacingProperty [​](https://docs.nativescript.org/api/\#letterspacingproperty)

```
letterSpacingProperty: CssProperty<Style, number>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:137:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L137)

### lineHeightProperty [​](https://docs.nativescript.org/api/\#lineheightproperty)

```
lineHeightProperty: CssProperty<Style, number>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:138:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L138)

### loadAppCss [​](https://docs.nativescript.org/api/\#loadappcss)

```
loadAppCss: any
```

defined in [@nativescript/core/application/application-shims.d.ts:81:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L81)

### lowMemoryEvent [​](https://docs.nativescript.org/api/\#lowmemoryevent)

```
lowMemoryEvent: "lowMemory" = "lowMemory"
```

defined in [@nativescript/core/application/application-shims.d.ts:261:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L261)

### marginBottomProperty [​](https://docs.nativescript.org/api/\#marginbottomproperty)

```
marginBottomProperty: CssProperty<Style, PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:85:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L85)

### marginLeftProperty [​](https://docs.nativescript.org/api/\#marginleftproperty)

```
marginLeftProperty: CssProperty<Style, PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:82:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L82)

### marginProperty [​](https://docs.nativescript.org/api/\#marginproperty)

```
marginProperty: ShorthandProperty<Style, string | PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:81:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L81)

### marginRightProperty [​](https://docs.nativescript.org/api/\#marginrightproperty)

```
marginRightProperty: CssProperty<Style, PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:83:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L83)

### marginTopProperty [​](https://docs.nativescript.org/api/\#margintopproperty)

```
marginTopProperty: CssProperty<Style, PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:84:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L84)

### maxLengthProperty [​](https://docs.nativescript.org/api/\#maxlengthproperty)

```
maxLengthProperty: Property<EditableTextBase, number>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:93:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L93)

### minHeightProperty [​](https://docs.nativescript.org/api/\#minheightproperty)

```
minHeightProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:77:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L77)

### minWidthProperty [​](https://docs.nativescript.org/api/\#minwidthproperty)

```
minWidthProperty: CssProperty<Style, dip | LengthDipUnit | LengthPxUnit>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:76:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L76)

### notify [​](https://docs.nativescript.org/api/\#notify)

```
notify: any
```

defined in [@nativescript/core/application/application-shims.d.ts:90:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L90)

### off [​](https://docs.nativescript.org/api/\#off)

```
off: any
```

defined in [@nativescript/core/application/application-shims.d.ts:99:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L99)

### on [​](https://docs.nativescript.org/api/\#on)

```
on: any
```

defined in [@nativescript/core/application/application-shims.d.ts:108:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L108)

### opacityProperty [​](https://docs.nativescript.org/api/\#opacityproperty)

```
opacityProperty: CssAnimationProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:74:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L74)

### orientation [​](https://docs.nativescript.org/api/\#orientation)

```
orientation: any
```

defined in [@nativescript/core/application/application-shims.d.ts:117:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L117)

### orientationChangedEvent [​](https://docs.nativescript.org/api/\#orientationchangedevent)

```
orientationChangedEvent: "orientationChanged" = "orientationChanged"
```

defined in [@nativescript/core/application/application-shims.d.ts:279:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L279)

### paddingBottomProperty [​](https://docs.nativescript.org/api/\#paddingbottomproperty)

```
paddingBottomProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:91:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L91)

### paddingLeftProperty [​](https://docs.nativescript.org/api/\#paddingleftproperty)

```
paddingLeftProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:88:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L88)

### paddingProperty [​](https://docs.nativescript.org/api/\#paddingproperty)

```
paddingProperty: ShorthandProperty<Style, string | LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:87:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L87)

### paddingRightProperty [​](https://docs.nativescript.org/api/\#paddingrightproperty)

```
paddingRightProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:89:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L89)

### paddingTopProperty [​](https://docs.nativescript.org/api/\#paddingtopproperty)

```
paddingTopProperty: CssProperty<Style, LengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:90:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L90)

### placeholderColorProperty [​](https://docs.nativescript.org/api/\#placeholdercolorproperty)

```
placeholderColorProperty: CssProperty<Style, Color>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:92:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L92)

### platformNames [​](https://docs.nativescript.org/api/\#platformnames)

```
platformNames: {
  android: string
}
```

defined in [@nativescript/core/platform/index.d.ts:20:13](https://unpkg.com/browse/@nativescript/core//platform/index.d.ts#L20)

### resetRootView [​](https://docs.nativescript.org/api/\#resetrootview-1)

```
resetRootView: any
```

defined in [@nativescript/core/application/application-shims.d.ts:126:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L126)

### resumeEvent [​](https://docs.nativescript.org/api/\#resumeevent)

```
resumeEvent: "resume" = "resume"
```

defined in [@nativescript/core/application/application-shims.d.ts:270:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L270)

### returnKeyTypeProperty [​](https://docs.nativescript.org/api/\#returnkeytypeproperty)

```
returnKeyTypeProperty: Property<EditableTextBase, ReturnKeyButtonType>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:86:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L86)

### rotateProperty [​](https://docs.nativescript.org/api/\#rotateproperty)

```
rotateProperty: CssAnimationProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:36:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L36)

### run [​](https://docs.nativescript.org/api/\#run)

```
run: any
```

defined in [@nativescript/core/application/application-shims.d.ts:144:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L144)

### scaleXProperty [​](https://docs.nativescript.org/api/\#scalexproperty)

```
scaleXProperty: CssAnimationProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:37:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L37)

### scaleYProperty [​](https://docs.nativescript.org/api/\#scaleyproperty)

```
scaleYProperty: CssAnimationProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:38:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L38)

### setAutoSystemAppearanceChanged [​](https://docs.nativescript.org/api/\#setautosystemappearancechanged)

```
setAutoSystemAppearanceChanged: any
```

defined in [@nativescript/core/application/application-shims.d.ts:153:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L153)

### setCssFileName [​](https://docs.nativescript.org/api/\#setcssfilename)

```
setCssFileName: any
```

defined in [@nativescript/core/application/application-shims.d.ts:162:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L162)

### setMaxRefreshRate [​](https://docs.nativescript.org/api/\#setmaxrefreshrate)

```
setMaxRefreshRate: any
```

defined in [@nativescript/core/application/application-shims.d.ts:171:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L171)

### setResources [​](https://docs.nativescript.org/api/\#setresources)

```
setResources: any
```

defined in [@nativescript/core/application/application-shims.d.ts:180:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L180)

### suspendEvent [​](https://docs.nativescript.org/api/\#suspendevent)

```
suspendEvent: "suspend" = "suspend"
```

defined in [@nativescript/core/application/application-shims.d.ts:288:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L288)

### suspended [​](https://docs.nativescript.org/api/\#suspended)

```
suspended: boolean
```

defined in [@nativescript/core/application/application-shims.d.ts:333:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L333)

### systemAppearance [​](https://docs.nativescript.org/api/\#systemappearance)

```
systemAppearance: any
```

defined in [@nativescript/core/application/application-shims.d.ts:189:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L189)

### systemAppearanceChanged [​](https://docs.nativescript.org/api/\#systemappearancechanged)

```
systemAppearanceChanged: any
```

defined in [@nativescript/core/application/application-shims.d.ts:198:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L198)

### systemAppearanceChangedEvent [​](https://docs.nativescript.org/api/\#systemappearancechangedevent)

```
systemAppearanceChangedEvent: "systemAppearanceChanged" = "systemAppearanceChanged"
```

defined in [@nativescript/core/application/application-shims.d.ts:297:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L297)

### textAlignmentProperty [​](https://docs.nativescript.org/api/\#textalignmentproperty)

```
textAlignmentProperty: InheritedCssProperty<Style, TextAlignmentType>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:132:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L132)

### textDecorationProperty [​](https://docs.nativescript.org/api/\#textdecorationproperty)

```
textDecorationProperty: CssProperty<Style, TextDecorationType>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:133:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L133)

### textShadowProperty [​](https://docs.nativescript.org/api/\#textshadowproperty)

```
textShadowProperty: CssProperty<Style, CSSShadow>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:135:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L135)

### textTransformProperty [​](https://docs.nativescript.org/api/\#texttransformproperty)

```
textTransformProperty: CssProperty<Style, TextTransformType>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:134:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L134)

### translateXProperty [​](https://docs.nativescript.org/api/\#translatexproperty)

```
translateXProperty: CssAnimationProperty<Style, dip>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:39:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L39)

### translateYProperty [​](https://docs.nativescript.org/api/\#translateyproperty)

```
translateYProperty: CssAnimationProperty<Style, dip>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:40:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L40)

### uncaughtErrorEvent [​](https://docs.nativescript.org/api/\#uncaughterrorevent)

```
uncaughtErrorEvent: "uncaughtError" = "uncaughtError"
```

defined in [@nativescript/core/application/application-shims.d.ts:216:21](https://unpkg.com/browse/@nativescript/core//application/application-shims.d.ts#L216)

### unsetValue [​](https://docs.nativescript.org/api/\#unsetvalue)

```
unsetValue: any
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:6:21](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L6)

Value specifying that Property should be set to its initial value.

### updateTextTriggerProperty [​](https://docs.nativescript.org/api/\#updatetexttriggerproperty)

```
updateTextTriggerProperty: Property<EditableTextBase, UpdateTextTriggerType>
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:88:13](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L88)

### verticalAlignmentProperty [​](https://docs.nativescript.org/api/\#verticalalignmentproperty)

```
verticalAlignmentProperty: CssProperty<Style, VerticalAlignmentType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:94:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L94)

### visibilityProperty [​](https://docs.nativescript.org/api/\#visibilityproperty)

```
visibilityProperty: CssProperty<Style, VisibilityType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:73:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L73)

### whiteSpaceProperty [​](https://docs.nativescript.org/api/\#whitespaceproperty)

```
whiteSpaceProperty: CssProperty<Style, WhiteSpaceType>
```

defined in [@nativescript/core/ui/text-base/index.d.ts:136:13](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L136)

### widthProperty [​](https://docs.nativescript.org/api/\#widthproperty)

```
widthProperty: CssAnimationProperty<Style, PercentLengthType>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:78:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L78)

### zIndexProperty [​](https://docs.nativescript.org/api/\#zindexproperty)

```
zIndexProperty: CssProperty<Style, number>
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:72:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L72)

### zeroLength [​](https://docs.nativescript.org/api/\#zerolength)

```
zeroLength: LengthType
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:34:13](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L34)

## Functions [​](https://docs.nativescript.org/api/\#functions)

### CSSType [​](https://docs.nativescript.org/api/\#csstype)

```
CSSType(type: string): ClassDecorator
```

defined in [@nativescript/core/ui/core/view/index.d.ts:36](https://unpkg.com/browse/@nativescript/core//ui/core/view/index.d.ts#L36)

Specifies the type name for the instances of this View class,
that is used when matching CSS type selectors.

Usage:
```` ```
@CSSType("Button")
class Button extends View {
}
``` ````

Internally the decorator set `` `Button.prototype.cssType = "Button"` ``.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `type` | `` | `string`<br>The type name, e. g. "Button", "Label", etc. |

Returns _ClassDecorator_

### PseudoClassHandler [​](https://docs.nativescript.org/api/\#pseudoclasshandler)

```
PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator
```

defined in [@nativescript/core/ui/core/view/index.d.ts:20](https://unpkg.com/browse/@nativescript/core//ui/core/view/index.d.ts#L20)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `pseudoClasses` | `` | `string[]` |

Returns _MethodDecorator_

### \_setResolver [​](https://docs.nativescript.org/api/\#setresolver)

```
_setResolver(resolver: ModuleNameResolver): any
```

defined in [@nativescript/core/module-name-resolver/index.d.ts:24](https://unpkg.com/browse/@nativescript/core//module-name-resolver/index.d.ts#L24)

Used to set a global singular instance of ModuleNameResolver

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `resolver` | `` | `ModuleNameResolver`<br>instance |

Returns _any_

### action [​](https://docs.nativescript.org/api/\#action)

```
action(message: string, cancelButtonText: string, actions: string[]): Promise&lt;string&gt;
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:129](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L129)

The action() method displays a action box that prompts the visitor to choose some action.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `message` | `` | `string`<br>The text to display in the dialog box. |
| `cancelButtonText` | `` | `string`<br>The text to display in the cancel button. |
| `actions` | `` | `string[]`<br>List of available actions. |

Returns _Promise<string>_

```
action(options: ActionOptions): Promise<string>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:135](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L135)

The action() method displays a action box that prompts the visitor to choose some action.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `ActionOptions`<br>The options for the dialog box. |

Returns _Promise<string>_

### addTaggedAdditionalCSS [​](https://docs.nativescript.org/api/\#addtaggedadditionalcss)

```
addTaggedAdditionalCSS(cssText: string, tag?: string | Number): boolean
```

defined in [@nativescript/core/ui/styling/style-scope.d.ts:49](https://unpkg.com/browse/@nativescript/core//ui/styling/style-scope.d.ts#L49)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `cssText` | `` | `string` |
| `tag` | `` | `string | Number` |

Returns _boolean_

### addWeakEventListener [​](https://docs.nativescript.org/api/\#addweakeventlistener)

```
addWeakEventListener(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any): void
```

defined in [@nativescript/core/ui/core/weak-event-listener/index.d.ts:10](https://unpkg.com/browse/@nativescript/core//ui/core/weak-event-listener/index.d.ts#L10)

Attaches a WeakEventListener.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `source` | `` | `Observable`<br>Observable class which emits the event. |
| `eventName` | `` | `string`<br>The event name. |
| `handler` | `` | `(eventData: EventData) => void`<br>The function which should be called when event occurs. |
| `target` | `` | `any`<br>Subscriber (target) of the event listener. It will be used as a thisArg in the handler function. |

Returns _void_

### alert [​](https://docs.nativescript.org/api/\#alert)

```
alert(message: string | number | boolean): Promise&lt;void&gt;
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:66](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L66)

The alert() method displays an alert box with a specified message.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `message` | `` | `string | number | boolean`<br>Specifies the text to display in the alert box. |

Returns _Promise<void>_

```
alert(options: AlertOptions): Promise<void>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:72](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L72)

The alert() method displays an alert box with a specified message.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `AlertOptions`<br>Specifies the options for the alert box. |

Returns _Promise<void>_

### animationTimingFunctionConverter [​](https://docs.nativescript.org/api/\#animationtimingfunctionconverter)

```
animationTimingFunctionConverter(value: string): any
```

defined in [@nativescript/core/ui/styling/converters.d.ts:2](https://unpkg.com/browse/@nativescript/core//ui/styling/converters.d.ts#L2)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `value` | `` | `string` |

Returns _any_

### booleanConverter [​](https://docs.nativescript.org/api/\#booleanconverter)

```
booleanConverter(v: string | boolean): boolean
```

defined in [@nativescript/core/ui/core/view-base/index.d.ts:478](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L478)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `v` | `` | `string | boolean` |

Returns _boolean_

### confirm [​](https://docs.nativescript.org/api/\#confirm)

```
confirm(message: string): Promise&lt;boolean&gt;
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:78](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L78)

The confirm() method displays a dialog box with a specified message.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `message` | `` | `string`<br>Specifies the text to display in the confirm box. |

Returns _Promise<boolean>_

```
confirm(options: ConfirmOptions): Promise<boolean>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:84](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L84)

The confirm() method displays a dialog box with a specified message.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `ConfirmOptions`<br>Specifies the options for the confirm box. |

Returns _Promise<boolean>_

### eachDescendant [​](https://docs.nativescript.org/api/\#eachdescendant)

```
eachDescendant(view: ViewBase, callback: (child: ViewBase) => boolean): void
```

defined in [@nativescript/core/ui/core/view-base/index.d.ts:112](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L112)

Iterates through all child views (via visual tree) and executes a function.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `view` | `` | `ViewBase`<br>Starting view (parent container). |
| `callback` | `` | `(child: ViewBase) => boolean`<br>A function to execute on every child. If function returns false it breaks the iteration. |

Returns _void_

### fromObject [​](https://docs.nativescript.org/api/\#fromobject)

```
fromObject(source: any): Observable
```

defined in [@nativescript/core/data/observable/index.d.ts:163](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L163)

Creates an Observable instance and sets its properties according to the supplied JavaScript object.
param obj - A JavaScript object used to initialize nativescript Observable instance.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `source` | `` | `any` |

Returns _[Observable](https://docs.nativescript.org/api/class/Observable)_

### fromObjectRecursive [​](https://docs.nativescript.org/api/\#fromobjectrecursive)

```
fromObjectRecursive(source: any): Observable
```

defined in [@nativescript/core/data/observable/index.d.ts:169](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L169)

Creates an Observable instance and sets its properties according to the supplied JavaScript object.
This function will create new Observable for each nested object (expect arrays and functions) from supplied JavaScript object.
param obj - A JavaScript object used to initialize nativescript Observable instance.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `source` | `` | `any` |

Returns _[Observable](https://docs.nativescript.org/api/class/Observable)_

### getAncestor [​](https://docs.nativescript.org/api/\#getancestor)

```
getAncestor(view: ViewBase, criterion: string | () => any): ViewBase
```

defined in [@nativescript/core/ui/core/view-base/index.d.ts:83](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L83)

Gets an ancestor from a given type.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `view` | `` | `ViewBase`<br>Starting view (child view). |
| `criterion` | `` | `string | () => any`<br>The type of ancestor view we are looking for. Could be a string containing a class name or an actual type.<br>Returns an instance of a view (if found), otherwise undefined. |

Returns _[ViewBase](https://docs.nativescript.org/api/class/ViewBase)_

### getCurrentPage [​](https://docs.nativescript.org/api/\#getcurrentpage)

```
getCurrentPage(): Page
```

defined in [@nativescript/core/ui/dialogs/dialogs-common.d.ts:203](https://unpkg.com/browse/@nativescript/core//ui/dialogs/dialogs-common.d.ts#L203)

Returns _[Page](https://docs.nativescript.org/api/class/Page)_

### getFileAccess [​](https://docs.nativescript.org/api/\#getfileaccess)

```
getFileAccess(): FileSystemAccess
```

defined in [@nativescript/core/file-system/index.d.ts:22](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L22)

Returns FileSystemAccess, a shared singleton utility class to provide methods to access and work with the file system. This is used under the hood of all the file system apis in @nativescript/core and provided as a lower level convenience if needed.

Returns _FileSystemAccess_

### getRootLayout [​](https://docs.nativescript.org/api/\#getrootlayout)

```
getRootLayout(): RootLayout
```

defined in [@nativescript/core/ui/layouts/root-layout/index.d.ts:15](https://unpkg.com/browse/@nativescript/core//ui/layouts/root-layout/index.d.ts#L15)

Returns _[RootLayout](https://docs.nativescript.org/api/class/RootLayout)_

### getTransformedText [​](https://docs.nativescript.org/api/\#gettransformedtext)

```
getTransformedText(text: string, textTransform: TextTransformType): string
```

defined in [@nativescript/core/ui/text-base/index.d.ts:141](https://unpkg.com/browse/@nativescript/core//ui/text-base/index.d.ts#L141)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `text` | `` | `string` |
| `textTransform` | `` | `TextTransformType` |

Returns _string_

### getViewById [​](https://docs.nativescript.org/api/\#getviewbyid)

```
getViewById(view: ViewBase, id: string): ViewBase
```

defined in [@nativescript/core/ui/core/view-base/index.d.ts:92](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L92)

Gets a child view by id.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `view` | `` | `ViewBase`<br>The parent (container) view of the view to look for. |
| `id` | `` | `string`<br>The id of the view to look for.<br>Returns an instance of a view (if found), otherwise undefined. |

Returns _[ViewBase](https://docs.nativescript.org/api/class/ViewBase)_

### login [​](https://docs.nativescript.org/api/\#login)

```
login(message: string, userNameHint?: string, passwordHint?: string, userName?: string, password?: string): Promise<LoginResult>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:107](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L107)

The login() method displays a login dialog box that prompts the visitor for user name and password.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `message` | `` | `string`<br>The text to display in the dialog box. |
| `userNameHint` | `` | `string`<br>The default text to display as a hint in the username input. Optional. |
| `passwordHint` | `` | `string`<br>The default text to display as a hint in the password input. Optional. |
| `userName` | `` | `string`<br>The default text to display in the user name input box. Optional. |
| `password` | `` | `string`<br>The default text to display in the password input box. Optional. |

Returns _Promise< [LoginResult](https://docs.nativescript.org/api/interface/LoginResult) >_

```
login(message: string, userNameHint?: string, passwordHint?: string): Promise<LoginResult>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:115](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L115)

The login() method displays a login dialog box that prompts the visitor for user name and password.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `message` | `` | `string`<br>The text to display in the dialog box. |
| `userNameHint` | `` | `string`<br>The default text to display as a hint in the username input. Optional. |
| `passwordHint` | `` | `string`<br>The default text to display as a hint in the password input. Optional. |

Returns _Promise< [LoginResult](https://docs.nativescript.org/api/interface/LoginResult) >_

```
login(options: LoginOptions): Promise<LoginResult>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:121](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L121)

The login() method displays a login dialog box that prompts the visitor for user name and password.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `LoginOptions`<br>The options for the dialog box. |

Returns _Promise< [LoginResult](https://docs.nativescript.org/api/interface/LoginResult) >_

### makeParser [​](https://docs.nativescript.org/api/\#makeparser)

```
makeParser&lt;T&gt;(isValid: (value: any) => boolean, allowNumbers?: boolean): (value: any) => T
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:143](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L143)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `isValid` | `` | `(value: any) => boolean` |
| `allowNumbers` | `` | `boolean` |

Returns _(value: any) => T_

### makeValidator [​](https://docs.nativescript.org/api/\#makevalidator)

```
makeValidator&lt;T&gt;(...values: T[]): (value: any) => value is T
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:142](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L142)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `values` | `` | `T[]` |

Returns _(value: any) => value is T_

### parseCSSShadow [​](https://docs.nativescript.org/api/\#parsecssshadow)

```
parseCSSShadow(value: string): CSSShadow
```

defined in [@nativescript/core/ui/styling/css-shadow.d.ts:19](https://unpkg.com/browse/@nativescript/core//ui/styling/css-shadow.d.ts#L19)

Parse a string into a CSSShadow
Supports any valid css box/text shadow combination.

inspired by https://github.com/jxnblk/css-box-shadow/blob/master/index.js (MIT License)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `value` | `` | `string` |

Returns _CSSShadow_

### parseKeyframeDeclarations [​](https://docs.nativescript.org/api/\#parsekeyframedeclarations)

```
parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[]
```

defined in [@nativescript/core/ui/styling/css-animation-parser.d.ts:14](https://unpkg.com/browse/@nativescript/core//ui/styling/css-animation-parser.d.ts#L14)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `unparsedKeyframeDeclarations` | `` | `KeyframeDeclaration[]` |

Returns _[KeyframeDeclaration](https://docs.nativescript.org/api/interface/KeyframeDeclaration)\[\]_

### profile [​](https://docs.nativescript.org/api/\#profile)

```
profile(name?: string): MethodDecorator
```

defined in [@nativescript/core/profiling/index.d.ts:98](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L98)

Method decorator factory. It will intercept the method call and start and pause a timer before and after the method call.
Works only if profiling is enabled.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the timer which will be used for method calls. If not provided - the name of the method will be used. |

Returns _MethodDecorator_

```
profile&lt;F&gt;(fn: F): F
```

defined in [@nativescript/core/profiling/index.d.ts:105](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L105)

Function factory. It will intercept the function call and start and pause a timer before and after the function call. Works only if profiling is enabled.
Works only if profiling is enabled.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `fn` | `` | `F`<br>The function to wrap. Uses the function name to track the times. |

Returns _F_

```
profile&lt;F&gt;(name: string, fn: F): F
```

defined in [@nativescript/core/profiling/index.d.ts:112](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L112)

Function factory. It will intercept the function call and start and pause a timer before and after the function call. Works only if profiling is enabled.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>The name used to track calls and times. |
| `fn` | `` | `F`<br>The function to wrap. |

Returns _F_

```
profile&lt;T&gt;(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor&lt;T&gt;): TypedPropertyDescriptor&lt;T&gt; | void
```

defined in [@nativescript/core/profiling/index.d.ts:117](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L117)

Method decorator. It will intercept the method calls and start and pause a timer before and after the method call. Works only if profiling is enabled.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `target` | `` | `Object` |
| `propertyKey` | `` | `string | symbol` |
| `descriptor` | `` | `TypedPropertyDescriptor<T>` |

Returns _TypedPropertyDescriptor<T> \| void_

```
profile(): any
```

defined in [@nativescript/core/profiling/index.d.ts:118](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L118)

Returns _any_

### profilingDisable [​](https://docs.nativescript.org/api/\#profilingdisable)

```
profilingDisable(): void
```

defined in [@nativescript/core/profiling/index.d.ts:58](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L58)

Disables profiling.

Returns _void_

### profilingDumpProfiles [​](https://docs.nativescript.org/api/\#profilingdumpprofiles)

```
profilingDumpProfiles(): void
```

defined in [@nativescript/core/profiling/index.d.ts:123](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L123)

Prints the timer for all methods instrumented with profile decorator.

Returns _void_

### profilingEnable [​](https://docs.nativescript.org/api/\#profilingenable)

```
profilingEnable(type?: InstrumentationMode): void
```

defined in [@nativescript/core/profiling/index.d.ts:53](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L53)

Enables profiling.

Upon loading of the module it will cache the package.json of the app and check if there is a "profiling" key set,
its value can be one of the options available for InstrumentationMode, and if set,
enable() will be called in pre app start with the value in the package.json.

An example for an `` `app/package.json` `` enabling the manual instrumentation profiling is:
```` ```
{
    "main": "main.js",
    "profiling": "timeline"
}
``` ````

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `type` | `` | `InstrumentationMode`<br>Profiling mode to use.<br>\- "counters" - Accumulates method call counts and times until dumpProfiles is called and then prints aggregated statistic in the console. This is the default.<br>\- "timeline" - Outputs method names along start/end timestamps in the console on the go.<br>\- "lifecycle" - Outputs basic non-verbose times for startup, navigation, etc. |

Returns _void_

### profilingIsRunning [​](https://docs.nativescript.org/api/\#profilingisrunning)

```
profilingIsRunning(name: string): boolean
```

defined in [@nativescript/core/profiling/index.d.ts:91](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L91)

Returns true if a timer is currently running.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the timer. |

Returns _boolean_

### profilingResetProfiles [​](https://docs.nativescript.org/api/\#profilingresetprofiles)

```
profilingResetProfiles(): void
```

defined in [@nativescript/core/profiling/index.d.ts:128](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L128)

Resets the timers for all methods instrumented with profile decorator.

Returns _void_

### profilingStart [​](https://docs.nativescript.org/api/\#profilingstart)

```
profilingStart(name: string): void
```

defined in [@nativescript/core/profiling/index.d.ts:70](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L70)

Starts a timer with a specific name.
Works only if profiling is enabled.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the timer. |

Returns _void_

### profilingStartCPU [​](https://docs.nativescript.org/api/\#profilingstartcpu)

```
profilingStartCPU(name: string): void
```

defined in [@nativescript/core/profiling/index.d.ts:134](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L134)

Starts android cpu profiling.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the cpu profiling session. |

Returns _void_

### profilingStop [​](https://docs.nativescript.org/api/\#profilingstop)

```
profilingStop(name: string): TimerInfo
```

defined in [@nativescript/core/profiling/index.d.ts:78](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L78)

Pauses a timer with a specific name. This will increase call count and accumulate time.
Works only if profiling is enabled.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the timer. |

Returns _[TimerInfo](https://docs.nativescript.org/api/interface/TimerInfo)_

### profilingStopCPU [​](https://docs.nativescript.org/api/\#profilingstopcpu)

```
profilingStopCPU(name: string): void
```

defined in [@nativescript/core/profiling/index.d.ts:140](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L140)

Stops android cpu profiling.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the cpu profiling session. |

Returns _void_

### profilingTime [​](https://docs.nativescript.org/api/\#profilingtime)

```
profilingTime(): number
```

defined in [@nativescript/core/profiling/index.d.ts:63](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L63)

Gets accurate system timestamp in ms.

Returns _number_

### profilingUptime [​](https://docs.nativescript.org/api/\#profilinguptime)

```
profilingUptime(): number
```

defined in [@nativescript/core/profiling/index.d.ts:145](https://unpkg.com/browse/@nativescript/core//profiling/index.d.ts#L145)

Gets the uptime of the current process in milliseconds.

Returns _number_

### prompt [​](https://docs.nativescript.org/api/\#prompt)

```
prompt(message: string, defaultText?: string): Promise<PromptResult>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:91](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L91)

The prompt() method displays a dialog box that prompts the visitor for input.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `message` | `` | `string`<br>The text to display in the dialog box. |
| `defaultText` | `` | `string`<br>The default text to display in the input box. Optional. |

Returns _Promise< [PromptResult](https://docs.nativescript.org/api/interface/PromptResult) >_

```
prompt(options: PromptOptions): Promise<PromptResult>
```

defined in [@nativescript/core/ui/dialogs/index.d.ts:97](https://unpkg.com/browse/@nativescript/core//ui/dialogs/index.d.ts#L97)

The prompt() method displays a dialog box that prompts the visitor for input.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `PromptOptions`<br>The options for the dialog box. |

Returns _Promise< [PromptResult](https://docs.nativescript.org/api/interface/PromptResult) >_

### querySelectorAll [​](https://docs.nativescript.org/api/\#queryselectorall)

```
querySelectorAll(view: ViewBase, selector: string): ViewBase[]
```

defined in [@nativescript/core/ui/core/view-base/index.d.ts:106](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L106)

Gets a child view by selector.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `view` | `` | `ViewBase`<br>The parent (container) view of the view to look for. |
| `selector` | `` | `string`<br>The selector of the view to look for.<br>Returns an instance of a view (if found), otherwise undefined. |

Returns _[ViewBase](https://docs.nativescript.org/api/class/ViewBase)\[\]_

### removeTaggedAdditionalCSS [​](https://docs.nativescript.org/api/\#removetaggedadditionalcss)

```
removeTaggedAdditionalCSS(tag: String | Number): boolean
```

defined in [@nativescript/core/ui/styling/style-scope.d.ts:50](https://unpkg.com/browse/@nativescript/core//ui/styling/style-scope.d.ts#L50)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `tag` | `` | `String | Number` |

Returns _boolean_

### removeWeakEventListener [​](https://docs.nativescript.org/api/\#removeweakeventlistener)

```
removeWeakEventListener(source: Observable, eventName: string, handler: (eventData: EventData) => void, target: any): void
```

defined in [@nativescript/core/ui/core/weak-event-listener/index.d.ts:19](https://unpkg.com/browse/@nativescript/core//ui/core/weak-event-listener/index.d.ts#L19)

Removes a WeakEventListener.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `source` | `` | `Observable`<br>Observable class which emits the event. |
| `eventName` | `` | `string`<br>The event name. |
| `handler` | `` | `(eventData: EventData) => void`<br>The function which should be called when event occurs. |
| `target` | `` | `any`<br>Subscriber (target) of the event listener. It will be used as a thisArg in the handler function. |

Returns _void_

### resolveFileNameFromUrl [​](https://docs.nativescript.org/api/\#resolvefilenamefromurl)

```
resolveFileNameFromUrl(
  url: string,
  appDirectory: string,
  fileExists: (filepath: string) => boolean,
  importSource?: string
): string
```

defined in [@nativescript/core/ui/styling/style-scope.d.ts:47](https://unpkg.com/browse/@nativescript/core//ui/styling/style-scope.d.ts#L47)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `url` | `` | `string` |
| `appDirectory` | `` | `string` |
| `fileExists` | `` | `(filepath: string) => boolean` |
| `importSource` | `` | `string` |

Returns _string_

### setActivityCallbacks [​](https://docs.nativescript.org/api/\#setactivitycallbacks)

```
setActivityCallbacks(activity: any): void
```

defined in [@nativescript/core/ui/frame/index.d.ts:510](https://unpkg.com/browse/@nativescript/core//ui/frame/index.d.ts#L510)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `activity` | `` | `any` |

Returns _void_

### timeConverter [​](https://docs.nativescript.org/api/\#timeconverter)

```
timeConverter(value: string): number
```

defined in [@nativescript/core/ui/styling/converters.d.ts:1](https://unpkg.com/browse/@nativescript/core//ui/styling/converters.d.ts#L1)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `value` | `` | `string` |

Returns _number_

### transformConverter [​](https://docs.nativescript.org/api/\#transformconverter)

```
transformConverter(text: string): TransformFunctionsInfo
```

defined in [@nativescript/core/ui/styling/style-properties.d.ts:42](https://unpkg.com/browse/@nativescript/core//ui/styling/style-properties.d.ts#L42)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `text` | `` | `string` |

Returns _TransformFunctionsInfo_

Next [AccessibilityEvents→](https://docs.nativescript.org/api/namespace/AccessibilityEvents)

2. [Summary](https://docs.nativescript.org/api/#summary)
3. [References](https://docs.nativescript.org/api/#references)
4. [Type Aliases](https://docs.nativescript.org/api/#type-aliases)
01. [GridUnitType](https://docs.nativescript.org/api/#gridunittype)
02. [Headers](https://docs.nativescript.org/api/#headers)
03. [HorizontalAlignment](https://docs.nativescript.org/api/#horizontalalignment)
04. [InstrumentationMode](https://docs.nativescript.org/api/#instrumentationmode)
05. [LengthDipUnit](https://docs.nativescript.org/api/#lengthdipunit)
06. [LengthPercentUnit](https://docs.nativescript.org/api/#lengthpercentunit)
07. [LengthPxUnit](https://docs.nativescript.org/api/#lengthpxunit)
08. [LengthType](https://docs.nativescript.org/api/#lengthtype)
09. [ModuleListProvider](https://docs.nativescript.org/api/#modulelistprovider)
10. [PercentLengthType](https://docs.nativescript.org/api/#percentlengthtype)
11. [SharedTransitionTagProperties](https://docs.nativescript.org/api/#sharedtransitiontagproperties)
12. [TouchAnimationOptions](https://docs.nativescript.org/api/#touchanimationoptions)
13. [VerticalAlignment](https://docs.nativescript.org/api/#verticalalignment)
14. [WebViewNavigationType](https://docs.nativescript.org/api/#webviewnavigationtype)
15. [dip](https://docs.nativescript.org/api/#dip)
16. [percent](https://docs.nativescript.org/api/#percent)
17. [px](https://docs.nativescript.org/api/#px)
5. [Variables](https://docs.nativescript.org/api/#variables)
001. [AnimationCurve](https://docs.nativescript.org/api/#animationcurve)
002. [Application](https://docs.nativescript.org/api/#application)
003. [CSSHelper](https://docs.nativescript.org/api/#csshelper)
004. [Device](https://docs.nativescript.org/api/#device)
005. [Dialogs](https://docs.nativescript.org/api/#dialogs)
006. [Enums](https://docs.nativescript.org/api/#enums)
007. [\_resetRootView](https://docs.nativescript.org/api/#resetrootview)
008. [addCss](https://docs.nativescript.org/api/#addcss)
009. [android](https://docs.nativescript.org/api/#android)
010. [androidDynamicElevationOffsetProperty](https://docs.nativescript.org/api/#androiddynamicelevationoffsetproperty)
011. [androidElevationProperty](https://docs.nativescript.org/api/#androidelevationproperty)
012. [autocapitalizationTypeProperty](https://docs.nativescript.org/api/#autocapitalizationtypeproperty)
013. [autocorrectProperty](https://docs.nativescript.org/api/#autocorrectproperty)
014. [backgroundColorProperty](https://docs.nativescript.org/api/#backgroundcolorproperty)
015. [backgroundEvent](https://docs.nativescript.org/api/#backgroundevent)
016. [backgroundImageProperty](https://docs.nativescript.org/api/#backgroundimageproperty)
017. [backgroundInternalProperty](https://docs.nativescript.org/api/#backgroundinternalproperty)
018. [backgroundPositionProperty](https://docs.nativescript.org/api/#backgroundpositionproperty)
019. [backgroundProperty](https://docs.nativescript.org/api/#backgroundproperty)
020. [backgroundRepeatProperty](https://docs.nativescript.org/api/#backgroundrepeatproperty)
021. [backgroundSizeProperty](https://docs.nativescript.org/api/#backgroundsizeproperty)
022. [borderBottomColorProperty](https://docs.nativescript.org/api/#borderbottomcolorproperty)
023. [borderBottomLeftRadiusProperty](https://docs.nativescript.org/api/#borderbottomleftradiusproperty)
024. [borderBottomRightRadiusProperty](https://docs.nativescript.org/api/#borderbottomrightradiusproperty)
025. [borderBottomWidthProperty](https://docs.nativescript.org/api/#borderbottomwidthproperty)
026. [borderColorProperty](https://docs.nativescript.org/api/#bordercolorproperty)
027. [borderLeftColorProperty](https://docs.nativescript.org/api/#borderleftcolorproperty)
028. [borderLeftWidthProperty](https://docs.nativescript.org/api/#borderleftwidthproperty)
029. [borderRadiusProperty](https://docs.nativescript.org/api/#borderradiusproperty)
030. [borderRightColorProperty](https://docs.nativescript.org/api/#borderrightcolorproperty)
031. [borderRightWidthProperty](https://docs.nativescript.org/api/#borderrightwidthproperty)
032. [borderTopColorProperty](https://docs.nativescript.org/api/#bordertopcolorproperty)
033. [borderTopLeftRadiusProperty](https://docs.nativescript.org/api/#bordertopleftradiusproperty)
034. [borderTopRightRadiusProperty](https://docs.nativescript.org/api/#bordertoprightradiusproperty)
035. [borderTopWidthProperty](https://docs.nativescript.org/api/#bordertopwidthproperty)
036. [borderWidthProperty](https://docs.nativescript.org/api/#borderwidthproperty)
037. [clipPathProperty](https://docs.nativescript.org/api/#clippathproperty)
038. [colorProperty](https://docs.nativescript.org/api/#colorproperty)
039. [discardedErrorEvent](https://docs.nativescript.org/api/#discardederrorevent)
040. [displayedEvent](https://docs.nativescript.org/api/#displayedevent)
041. [editableProperty](https://docs.nativescript.org/api/#editableproperty)
042. [exitEvent](https://docs.nativescript.org/api/#exitevent)
043. [fontFamilyProperty](https://docs.nativescript.org/api/#fontfamilyproperty)
044. [fontInternalProperty](https://docs.nativescript.org/api/#fontinternalproperty)
045. [fontScaleChangedEvent](https://docs.nativescript.org/api/#fontscalechangedevent)
046. [fontScaleInternalProperty](https://docs.nativescript.org/api/#fontscaleinternalproperty)
047. [fontSizeProperty](https://docs.nativescript.org/api/#fontsizeproperty)
048. [fontStyleProperty](https://docs.nativescript.org/api/#fontstyleproperty)
049. [fontWeightProperty](https://docs.nativescript.org/api/#fontweightproperty)
050. [foregroundEvent](https://docs.nativescript.org/api/#foregroundevent)
051. [getCssFileName](https://docs.nativescript.org/api/#getcssfilename)
052. [getMainEntry](https://docs.nativescript.org/api/#getmainentry)
053. [getNativeApplication](https://docs.nativescript.org/api/#getnativeapplication)
054. [getResources](https://docs.nativescript.org/api/#getresources)
055. [getRootView](https://docs.nativescript.org/api/#getrootview)
056. [hasLaunched](https://docs.nativescript.org/api/#haslaunched)
057. [hasListeners](https://docs.nativescript.org/api/#haslisteners)
058. [heightProperty](https://docs.nativescript.org/api/#heightproperty)
059. [hintProperty](https://docs.nativescript.org/api/#hintproperty)
060. [horizontalAlignmentProperty](https://docs.nativescript.org/api/#horizontalalignmentproperty)
061. [inBackground](https://docs.nativescript.org/api/#inbackground)
062. [ios](https://docs.nativescript.org/api/#ios)
063. [isAndroid](https://docs.nativescript.org/api/#isandroid)
064. [isIOS](https://docs.nativescript.org/api/#isios)
065. [isUserInteractionEnabledProperty](https://docs.nativescript.org/api/#isuserinteractionenabledproperty)
066. [keyboardTypeProperty](https://docs.nativescript.org/api/#keyboardtypeproperty)
067. [launchEvent](https://docs.nativescript.org/api/#launchevent)
068. [letterSpacingProperty](https://docs.nativescript.org/api/#letterspacingproperty)
069. [lineHeightProperty](https://docs.nativescript.org/api/#lineheightproperty)
070. [loadAppCss](https://docs.nativescript.org/api/#loadappcss)
071. [lowMemoryEvent](https://docs.nativescript.org/api/#lowmemoryevent)
072. [marginBottomProperty](https://docs.nativescript.org/api/#marginbottomproperty)
073. [marginLeftProperty](https://docs.nativescript.org/api/#marginleftproperty)
074. [marginProperty](https://docs.nativescript.org/api/#marginproperty)
075. [marginRightProperty](https://docs.nativescript.org/api/#marginrightproperty)
076. [marginTopProperty](https://docs.nativescript.org/api/#margintopproperty)
077. [maxLengthProperty](https://docs.nativescript.org/api/#maxlengthproperty)
078. [minHeightProperty](https://docs.nativescript.org/api/#minheightproperty)
079. [minWidthProperty](https://docs.nativescript.org/api/#minwidthproperty)
080. [notify](https://docs.nativescript.org/api/#notify)
081. [off](https://docs.nativescript.org/api/#off)
082. [on](https://docs.nativescript.org/api/#on)
083. [opacityProperty](https://docs.nativescript.org/api/#opacityproperty)
084. [orientation](https://docs.nativescript.org/api/#orientation)
085. [orientationChangedEvent](https://docs.nativescript.org/api/#orientationchangedevent)
086. [paddingBottomProperty](https://docs.nativescript.org/api/#paddingbottomproperty)
087. [paddingLeftProperty](https://docs.nativescript.org/api/#paddingleftproperty)
088. [paddingProperty](https://docs.nativescript.org/api/#paddingproperty)
089. [paddingRightProperty](https://docs.nativescript.org/api/#paddingrightproperty)
090. [paddingTopProperty](https://docs.nativescript.org/api/#paddingtopproperty)
091. [placeholderColorProperty](https://docs.nativescript.org/api/#placeholdercolorproperty)
092. [platformNames](https://docs.nativescript.org/api/#platformnames)
093. [resetRootView](https://docs.nativescript.org/api/#resetrootview-1)
094. [resumeEvent](https://docs.nativescript.org/api/#resumeevent)
095. [returnKeyTypeProperty](https://docs.nativescript.org/api/#returnkeytypeproperty)
096. [rotateProperty](https://docs.nativescript.org/api/#rotateproperty)
097. [run](https://docs.nativescript.org/api/#run)
098. [scaleXProperty](https://docs.nativescript.org/api/#scalexproperty)
099. [scaleYProperty](https://docs.nativescript.org/api/#scaleyproperty)
100. [setAutoSystemAppearanceChanged](https://docs.nativescript.org/api/#setautosystemappearancechanged)
101. [setCssFileName](https://docs.nativescript.org/api/#setcssfilename)
102. [setMaxRefreshRate](https://docs.nativescript.org/api/#setmaxrefreshrate)
103. [setResources](https://docs.nativescript.org/api/#setresources)
104. [suspendEvent](https://docs.nativescript.org/api/#suspendevent)
105. [suspended](https://docs.nativescript.org/api/#suspended)
106. [systemAppearance](https://docs.nativescript.org/api/#systemappearance)
107. [systemAppearanceChanged](https://docs.nativescript.org/api/#systemappearancechanged)
108. [systemAppearanceChangedEvent](https://docs.nativescript.org/api/#systemappearancechangedevent)
109. [textAlignmentProperty](https://docs.nativescript.org/api/#textalignmentproperty)
110. [textDecorationProperty](https://docs.nativescript.org/api/#textdecorationproperty)
111. [textShadowProperty](https://docs.nativescript.org/api/#textshadowproperty)
112. [textTransformProperty](https://docs.nativescript.org/api/#texttransformproperty)
113. [translateXProperty](https://docs.nativescript.org/api/#translatexproperty)
114. [translateYProperty](https://docs.nativescript.org/api/#translateyproperty)
115. [uncaughtErrorEvent](https://docs.nativescript.org/api/#uncaughterrorevent)
116. [unsetValue](https://docs.nativescript.org/api/#unsetvalue)
117. [updateTextTriggerProperty](https://docs.nativescript.org/api/#updatetexttriggerproperty)
118. [verticalAlignmentProperty](https://docs.nativescript.org/api/#verticalalignmentproperty)
119. [visibilityProperty](https://docs.nativescript.org/api/#visibilityproperty)
120. [whiteSpaceProperty](https://docs.nativescript.org/api/#whitespaceproperty)
121. [widthProperty](https://docs.nativescript.org/api/#widthproperty)
122. [zIndexProperty](https://docs.nativescript.org/api/#zindexproperty)
123. [zeroLength](https://docs.nativescript.org/api/#zerolength)
6. [Functions](https://docs.nativescript.org/api/#functions)
01. [CSSType](https://docs.nativescript.org/api/#csstype)
02. [PseudoClassHandler](https://docs.nativescript.org/api/#pseudoclasshandler)
03. [\_setResolver](https://docs.nativescript.org/api/#setresolver)
04. [action](https://docs.nativescript.org/api/#action)
05. [addTaggedAdditionalCSS](https://docs.nativescript.org/api/#addtaggedadditionalcss)
06. [addWeakEventListener](https://docs.nativescript.org/api/#addweakeventlistener)
07. [alert](https://docs.nativescript.org/api/#alert)
08. [animationTimingFunctionConverter](https://docs.nativescript.org/api/#animationtimingfunctionconverter)
09. [booleanConverter](https://docs.nativescript.org/api/#booleanconverter)
10. [confirm](https://docs.nativescript.org/api/#confirm)
11. [eachDescendant](https://docs.nativescript.org/api/#eachdescendant)
12. [fromObject](https://docs.nativescript.org/api/#fromobject)
13. [fromObjectRecursive](https://docs.nativescript.org/api/#fromobjectrecursive)
14. [getAncestor](https://docs.nativescript.org/api/#getancestor)
15. [getCurrentPage](https://docs.nativescript.org/api/#getcurrentpage)
16. [getFileAccess](https://docs.nativescript.org/api/#getfileaccess)
17. [getRootLayout](https://docs.nativescript.org/api/#getrootlayout)
18. [getTransformedText](https://docs.nativescript.org/api/#gettransformedtext)
19. [getViewById](https://docs.nativescript.org/api/#getviewbyid)
20. [login](https://docs.nativescript.org/api/#login)
21. [makeParser](https://docs.nativescript.org/api/#makeparser)
22. [makeValidator](https://docs.nativescript.org/api/#makevalidator)
23. [parseCSSShadow](https://docs.nativescript.org/api/#parsecssshadow)
24. [parseKeyframeDeclarations](https://docs.nativescript.org/api/#parsekeyframedeclarations)
25. [profile](https://docs.nativescript.org/api/#profile)
26. [profilingDisable](https://docs.nativescript.org/api/#profilingdisable)
27. [profilingDumpProfiles](https://docs.nativescript.org/api/#profilingdumpprofiles)
28. [profilingEnable](https://docs.nativescript.org/api/#profilingenable)
29. [profilingIsRunning](https://docs.nativescript.org/api/#profilingisrunning)
30. [profilingResetProfiles](https://docs.nativescript.org/api/#profilingresetprofiles)
31. [profilingStart](https://docs.nativescript.org/api/#profilingstart)
32. [profilingStartCPU](https://docs.nativescript.org/api/#profilingstartcpu)
33. [profilingStop](https://docs.nativescript.org/api/#profilingstop)
34. [profilingStopCPU](https://docs.nativescript.org/api/#profilingstopcpu)
35. [profilingTime](https://docs.nativescript.org/api/#profilingtime)
36. [profilingUptime](https://docs.nativescript.org/api/#profilinguptime)
37. [prompt](https://docs.nativescript.org/api/#prompt)
38. [querySelectorAll](https://docs.nativescript.org/api/#queryselectorall)
39. [removeTaggedAdditionalCSS](https://docs.nativescript.org/api/#removetaggedadditionalcss)
40. [removeWeakEventListener](https://docs.nativescript.org/api/#removeweakeventlistener)
41. [resolveFileNameFromUrl](https://docs.nativescript.org/api/#resolvefilenamefromurl)
42. [setActivityCallbacks](https://docs.nativescript.org/api/#setactivitycallbacks)
43. [timeConverter](https://docs.nativescript.org/api/#timeconverter)
44. [transformConverter](https://docs.nativescript.org/api/#transformconverter)


## TabView UI Component


`<TabView>` is a UI component that shows content grouped into tabs and lets users switch between them.

![](https://docs.nativescript.org/assets/TabView.d0fd0920.png)

![](https://docs.nativescript.org/assets/TabView.2ddf2d92.png)

```xml
<TabView>
  <TabViewItem title="First">
    <Label text="First Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
  <TabViewItem title="Second">
    <Label text="Second Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
  <TabViewItem title="Third">
    <Label text="Third Tab Content" textAlignment="center" verticalAlignment="center" />
  </TabViewItem>
</TabView>
```

```html
<TabView>
  <StackLayout *tabItem="{title: 'First'}">
    <GridLayout>
      <ContentView verticalAlignment="center" horizontalAlignment="center">
        <label text="First Tab Content"></label>
      </ContentView>
    </GridLayout>
  </StackLayout>
  <StackLayout *tabItem="{title: 'Second'}">
    <GridLayout>
      <ContentView verticalAlignment="center" horizontalAlignment="center">
        <label text="Second Tab Content"></label>
      </ContentView>
    </GridLayout>
  </StackLayout>
  <StackLayout *tabItem="{title: 'Third'}">
    <GridLayout>
      <ContentView verticalAlignment="center" horizontalAlignment="center">
        <label text="Third Tab Content"></label>
      </ContentView>
    </GridLayout>
  </StackLayout>
</TabView>
```

```tsx
<tabView>
  <tabViewItem nodeRole="items" title="First">
    <label
      text="First Tab Content"
      textAlignment="center"
      verticalAlignment="middle"
    ></label>
  </tabViewItem>
  <tabViewItem nodeRole="items" title="Second">
    <label
      text="Second Tab Content"
      textAlignment="center"
      verticalAlignment="middle"
    ></label>
  </tabViewItem>
  <tabViewItem nodeRole="items" title="Third">
    <label
      text="Third Tab Content"
      textAlignment="center"
      verticalAlignment="middle"
    ></label>
  </tabViewItem>
</tabView>
```

```tsx
<tabview>
  <tabviewitem title="First">
    <label
      text="First Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabviewitem>
  <tabviewitem title="Second">
    <label
      text="Second Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabviewitem>
  <tabviewitem title="Third">
    <label
      text="Third Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabviewitem>
</tabview>
```

```svelte
<tabView>
  <tabViewItem title="First">
    <label
      text="First Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabViewItem>
  <tabViewItem title="Second">
    <label
      text="Second Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabViewItem>
  <tabViewItem title="Third">
    <label
      text="Third Tab Content"
      textAlignment="center"
      verticalAlignment="center"
    ></label>
  </tabViewItem>
</tabView>
```

```vue
<TabView>
  <TabViewItem title="First">
    <Label text="First Tab Content" textAlignment="center" verticalAlignment="center"></Label>
  </TabViewItem>
  <TabViewItem title="Second">
    <Label text="Second Tab Content" textAlignment="center" verticalAlignment="center"></Label>
  </TabViewItem>
  <TabViewItem title="Third">
    <Label text="Third Tab Content" textAlignment="center" verticalAlignment="center"></Label>
  </TabViewItem>
</TabView>
```

## Props [​](https://docs.nativescript.org/ui/tab-view\#props)

### selectedIndex [​](https://docs.nativescript.org/ui/tab-view\#selectedindex)

```ts
selectedIndex: number
```

Gets or sets the currently selected tab.

Defaults to `0`.

### tabTextColor [​](https://docs.nativescript.org/ui/tab-view\#tabtextcolor)

```xml
tabTextColor: Color
```

Gets or sets the text color of the tab titles.

Corresponding CSS property:

```css
.tab-view {
  tab-text-color: #fff;
}
```

See [Color](https://docs.nativescript.org/api/class/Color).

### tabTextFontSize [​](https://docs.nativescript.org/ui/tab-view\#tabtextfontsize)

```ts
tabTextFontSize: number
```

Gets or sets the font size of the tab titles.

Corresponding CSS property:

```css
.tab-view {
  tab-text-font-size: 24;
}
```

### tabBackgroundColor [​](https://docs.nativescript.org/ui/tab-view\#tabbackgroundcolor)

```ts
tabBackgroundColor: Color
```

Sets the background color of the tabs.

Corresponding CSS property:

```css
.tab-view {
  tab-background-color: #3d5a80;
}
```

See [Color](https://docs.nativescript.org/api/class/Color).

### androidSelectedTabHighlightColor [​](https://docs.nativescript.org/ui/tab-view\#androidselectedtabhighlightcolor)

```ts
androidSelectedTabHighlightColor: Color
```

Sets the underline color of the tabs. **Android only.**

Corresponding CSS property:

```css
.tab-view {
   android-selected-tab-highlight-color:: #3d5a80;
}
```

See [Color](https://docs.nativescript.org/api/class/Color).

### androidTabsPosition [​](https://docs.nativescript.org/ui/tab-view\#androidtabsposition)

```ts
androidTabsPosition: 'top' | 'bottom'
```

Sets the position of the tabs. **Android only.**

Defaults to `top`.

### iosIconRenderingMode [​](https://docs.nativescript.org/ui/tab-view\#iosiconrenderingmode)

```ts
iosIconRenderingMode: 'automatic' | 'alwaysOriginal' | 'alwaysTemplate'
```

Gets or sets the icon rendering mode on iOS. **iOS only.**

Defaults to `automatic`.

See [UIImage.RenderingMode](https://developer.apple.com/documentation/uikit/uiimage/renderingmode).

### ...Inherited [​](https://docs.nativescript.org/ui/tab-view\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/TabView).

## TabViewItem Props [​](https://docs.nativescript.org/ui/tab-view\#tabviewitem-props)

### title [​](https://docs.nativescript.org/ui/tab-view\#title)

```ts
title: string
```

Gets or sets the title of the tab strip entry.

### textTransform [​](https://docs.nativescript.org/ui/tab-view\#texttransform)

```ts
textTransform: TextTransformType // "initial" | "none" | "capitalize" | "uppercase" | "lowercase"
```

Gets or sets the text transform.

See [TextTransformType](https://docs.nativescript.org/api/namespace/CoreTypes#texttransformtype).

Defaults to `initial`.

### iconSource [​](https://docs.nativescript.org/ui/tab-view\#iconsource)

```ts
iconSource: string
```

Gets or sets the icon source of the tab strip entry.

Supported paths are `res://` or an absolute path (eg. `~/assets/image.png`).

See [`Image`](https://docs.nativescript.org/ui/image) for details on the different paths.

## Events [​](https://docs.nativescript.org/ui/tab-view\#events)

### selectedIndexChange [​](https://docs.nativescript.org/ui/tab-view\#selectedindexchange)

```ts
on('selectedIndexChanged', (args: EventData) => {
  const tabView = args.object as TabView
  console.log('TabView selectedIndex:', tabView.selectedIndex)
})
```

Emitted when the selected tab changes.

## Native component [​](https://docs.nativescript.org/ui/tab-view\#native-component)

- Android: [`androidx.viewpager.widget.ViewPager`](https://developer.android.com/reference/androidx/viewpager/widget/ViewPager)
- iOS: [`UITabBarController`](https://developer.apple.com/documentation/uikit/uitabbarcontroller)

2. [Props](https://docs.nativescript.org/ui/tab-view#props)
1. [selectedIndex](https://docs.nativescript.org/ui/tab-view#selectedindex)
2. [tabTextColor](https://docs.nativescript.org/ui/tab-view#tabtextcolor)
3. [tabTextFontSize](https://docs.nativescript.org/ui/tab-view#tabtextfontsize)
4. [tabBackgroundColor](https://docs.nativescript.org/ui/tab-view#tabbackgroundcolor)
5. [androidSelectedTabHighlightColor](https://docs.nativescript.org/ui/tab-view#androidselectedtabhighlightcolor)
6. [androidTabsPosition](https://docs.nativescript.org/ui/tab-view#androidtabsposition)
7. [iosIconRenderingMode](https://docs.nativescript.org/ui/tab-view#iosiconrenderingmode)
8. [...Inherited](https://docs.nativescript.org/ui/tab-view#inherited)
3. [TabViewItem Props](https://docs.nativescript.org/ui/tab-view#tabviewitem-props)
1. [title](https://docs.nativescript.org/ui/tab-view#title)
2. [textTransform](https://docs.nativescript.org/ui/tab-view#texttransform)
3. [iconSource](https://docs.nativescript.org/ui/tab-view#iconsource)
4. [Events](https://docs.nativescript.org/ui/tab-view#events)
1. [selectedIndexChange](https://docs.nativescript.org/ui/tab-view#selectedindexchange)
5. [Native component](https://docs.nativescript.org/ui/tab-view#native-component)

## AbsoluteLayout Guide

The `<AbsoluteLayout>` container is the simplest layout container in NativeScript.

`<AbsoluteLayout>` has the following behavior:

- Uses a pair of absolute top/left coordinates to position its children.
- Doesn't enforce any layout constraints on its children.
- Doesn't resize its children at runtime when its size changes.

### Creating a simple grid-like layout [​](https://docs.nativescript.org/ui/absolute-layout\#creating-a-simple-grid-like-layout)

The following example creates a simple grid.

```xml
<AbsoluteLayout backgroundColor="#eef7ff">
  <Label
    text="10, 10"
    left="10"
    top="10"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="120, 10"
    left="120"
    top="10"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="10, 120"
    left="10"
    top="120"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
  <Label
    text="120, 120"
    left="120"
    top="120"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
</AbsoluteLayout>
```

![](https://art.nativescript.org/layouts/absolute_layout_grid.svg)

Note

This example shows building a grid-like layout, this mainly serves as an example to illustrate how `<AbsoluteLayout>` works. In most cases building this UI will be better served by using a [GridLayout](https://docs.nativescript.org/ui/grid-layout).

### Overlapping elements [​](https://docs.nativescript.org/ui/absolute-layout\#overlapping-elements)

The following example creates a group of overlapping items.

```xml
<AbsoluteLayout backgroundColor="#eef7ff">
  <Label
    text="10, 10"
    left="10"
    top="10"
    width="100"
    height="100"
    backgroundColor="#0089ca"
  />
  <Label
    text="30, 40"
    left="30"
    top="40"
    width="100"
    height="100"
    backgroundColor="#43b2f4"
  />
</AbsoluteLayout>
```

![](https://art.nativescript.org/layouts/absolute_layout_overlap.svg)

Note

If you need to build more complex UIs with overlapping elements, consider using a [GridLayout](https://docs.nativescript.org/ui/grid-layout) for greater flexibility.

## AbsoluteLayout Reference [​](https://docs.nativescript.org/ui/absolute-layout\#absolutelayout-reference)

### Props [​](https://docs.nativescript.org/ui/absolute-layout\#props)

| Name | Type | Description |
| --- | --- | --- |
| `N/A` | `N/A` | None. |
| `...Inherited` | `Inherited` | Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api/class/AbsoluteLayout) |

### Children props [​](https://docs.nativescript.org/ui/absolute-layout\#children-props)

When an element is a direct child of `<AbsoluteLayout>`, you can set the following additional properties.

| Name | Type | Description |
| --- | --- | --- |
| `top` | `Number` | Gets or sets the distance, in pixels, between the top edge of the child and the top edge of its parent. |
| `left` | `Number` | Gets or sets the distance, in pixels, between the left edge of the child and the left edge of its parent. |

2. [Creating a simple grid-like layout](https://docs.nativescript.org/ui/absolute-layout#creating-a-simple-grid-like-layout)
3. [Overlapping elements](https://docs.nativescript.org/ui/absolute-layout#overlapping-elements)
4. [AbsoluteLayout Reference](https://docs.nativescript.org/ui/absolute-layout#absolutelayout-reference)
1. [Props](https://docs.nativescript.org/ui/absolute-layout#props)
2. [Children props](https://docs.nativescript.org/ui/absolute-layout#children-props)

## TextField UI Component


`<TextField>` is a UI component for single-line text entry.

For multi-line text input, see [TextView](https://docs.nativescript.org/ui/text-view).

![](https://docs.nativescript.org/assets/TextField.a6e62c8a.png)

![](https://docs.nativescript.org/assets/TextField.7013f9a0.png)

```xml
<TextField hint="Placeholder..." />
```

```html
<TextField hint="Placeholder..." />
```

```tsx
<textField hint="Type here" />
```

```tsx
<textfield hint="Placeholder..." />
```

```svelte
<textField hint="Placeholder..." />
```

```vue
<TextField hint="Placeholder..." />
```

## Examples [​](https://docs.nativescript.org/ui/text-field\#examples)

### Formatting text inside a TextField [​](https://docs.nativescript.org/ui/text-field\#formatting-text-inside-a-textfield)

If you need to style parts of the text, you can use a combination of a `FormattedString` and `Span` elements.

```xml
<TextField>
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</TextField>
```

## Props [​](https://docs.nativescript.org/ui/text-field\#props)

### text [​](https://docs.nativescript.org/ui/text-field\#text)

```ts
text: string
```

Gets or sets the `text` of the TextField.

### hint [​](https://docs.nativescript.org/ui/text-field\#hint)

```ts
hint: string
```

Gets or sets the placeholder text for the TextField.

### editable [​](https://docs.nativescript.org/ui/text-field\#editable)

```ts
editable: boolean
```

When set to `false` the TextField is read-only.

Defaults to `true`.

### keyboardType [​](https://docs.nativescript.org/ui/text-field\#keyboardtype)

```ts
keyboardType: CoreTypes.KeyboardType | number // "datetime" | "email" | "integer" | "number" | "phone" | "url"
```

Gets or sets the keyboard type shown when editing this TextField.

On iOS, any valid `UIKeyboardType` number works, for example:

```ts
keyboardType = 8 // UIKeyboardType.DecimalPad
```

See [CoreTypes.KeyboardType](https://docs.nativescript.org/api/namespace/CoreTypes-KeyboardType), [UIKeyboardType](https://developer.apple.com/documentation/uikit/uikeyboardtype?language=objc).

### returnKeyType [​](https://docs.nativescript.org/ui/text-field\#returnkeytype)

```ts
returnKeyType: CoreTypes.ReturnKeyType // "done" | "go" | "next" | "search" | "send"
```

Gets or sets the label of the return key.

See [CoreTypes.ReturnKeyType](https://docs.nativescript.org/api/namespace/CoreTypes-ReturnKeyType).

### isEnabled [​](https://docs.nativescript.org/ui/text-field\#isenabled)

Allows disabling the TextField. A disabled TextField does not react to user gestures or input.

Default value is `true`.

### maxLength [​](https://docs.nativescript.org/ui/text-field\#maxlength)

```ts
maxLength: number
```

Limits input to the specified number of characters.

### secure [​](https://docs.nativescript.org/ui/text-field\#secure)

```ts
secure: boolean
```

Hides the entered text when `true`. Useful for password input fields.

Defaults to `false`.

### secureWithoutAutofill [​](https://docs.nativescript.org/ui/text-field\#securewithoutautofill)

```ts
secureWithoutAutofill: boolean
```

Prevents iOS 12+ auto suggested strong password handling. **iOS only**

Defaults to `false`.

### autocapitalizationType [​](https://docs.nativescript.org/ui/text-field\#autocapitalizationtype)

```ts
autocapitalizationType: CoreTypes.AutocapitalizationType // "allCharacters" | "none" | "sentences" | "words"
```

Gets or sets the autocapitalization type.

See [CoreTypes.AutocapitalizationType](https://docs.nativescript.org/api/namespace/CoreTypes-AutocapitalizationType)

### ...Inherited [​](https://docs.nativescript.org/ui/text-field\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/TextField).

## Methods [​](https://docs.nativescript.org/ui/text-field\#methods)

### focus() [​](https://docs.nativescript.org/ui/text-field\#focus)

```ts
focus(): boolean
```

Focuses the TextField and returns `true` if the focus was succeessful.

### dismissSoftInput() [​](https://docs.nativescript.org/ui/text-field\#dismisssoftinput)

```ts
dismissSoftInput(): void
```

Hides the on-screen keyboard.

## Events [​](https://docs.nativescript.org/ui/text-field\#events)

### textChange [​](https://docs.nativescript.org/ui/text-field\#textchange)

```ts
on('textChange', (args: PropertyChangeData) => {
  const textField = args.object as TextField
  console.log('TextField text changed:', args.value)
})
```

Emitted when the input text changes.

Event data type: [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData)

### returnPress [​](https://docs.nativescript.org/ui/text-field\#returnpress)

```ts
on('returnPress', (args: EventData) => {
  const textField = args.object as TextField
  console.log('TextField return key pressed.')
})
```

Emitted when the return key is pressed.

### focus [​](https://docs.nativescript.org/ui/text-field\#focus-1)

```ts
on('focus', (args: EventData) => {
  const textField = args.object as TextField
  console.log('TextField has been focused')
})
```

Emitted when the TextField gains focus.

### blur [​](https://docs.nativescript.org/ui/text-field\#blur)

```ts
on('blur', (args: EventData) => {
  const textField = args.object as TextField
  console.log('TextField has been blured')
})
```

Emitted when the TextField loses focus.

## Native component [​](https://docs.nativescript.org/ui/text-field\#native-component)

- Android: [`android.widget.EditText`](https://developer.android.com/reference/android/widget/EditText.html)
- iOS: [`UITextField`](https://developer.apple.com/documentation/uikit/uitextfield)

2. [Examples](https://docs.nativescript.org/ui/text-field#examples)
1. [Formatting text inside a TextField](https://docs.nativescript.org/ui/text-field#formatting-text-inside-a-textfield)
3. [Props](https://docs.nativescript.org/ui/text-field#props)
01. [text](https://docs.nativescript.org/ui/text-field#text)
02. [hint](https://docs.nativescript.org/ui/text-field#hint)
03. [editable](https://docs.nativescript.org/ui/text-field#editable)
04. [keyboardType](https://docs.nativescript.org/ui/text-field#keyboardtype)
05. [returnKeyType](https://docs.nativescript.org/ui/text-field#returnkeytype)
06. [isEnabled](https://docs.nativescript.org/ui/text-field#isenabled)
07. [maxLength](https://docs.nativescript.org/ui/text-field#maxlength)
08. [secure](https://docs.nativescript.org/ui/text-field#secure)
09. [secureWithoutAutofill](https://docs.nativescript.org/ui/text-field#securewithoutautofill)
10. [autocapitalizationType](https://docs.nativescript.org/ui/text-field#autocapitalizationtype)
11. [...Inherited](https://docs.nativescript.org/ui/text-field#inherited)
4. [Methods](https://docs.nativescript.org/ui/text-field#methods)
1. [focus()](https://docs.nativescript.org/ui/text-field#focus)
2. [dismissSoftInput()](https://docs.nativescript.org/ui/text-field#dismisssoftinput)
5. [Events](https://docs.nativescript.org/ui/text-field#events)
1. [textChange](https://docs.nativescript.org/ui/text-field#textchange)
2. [returnPress](https://docs.nativescript.org/ui/text-field#returnpress)
3. [focus](https://docs.nativescript.org/ui/text-field#focus-1)
4. [blur](https://docs.nativescript.org/ui/text-field#blur)
6. [Native component](https://docs.nativescript.org/ui/text-field#native-component)

## List Picker Component


`<ListPicker>` is a UI component that lets the user select a value from a pre-configured list.

![](https://docs.nativescript.org/assets/ListPicker.77e993a9.png)

![](https://docs.nativescript.org/assets/ListPicker.efcd6faa.png)


```xml
<ListPicker items="{{ items }}" />
```

```ts
const items = [`First`, `Second`, `Third`]
```

HTMLTypeScript

```html
<ListPicker [items]="items" />
```

```ts
items = [`First`, `Second`, `Third`];
```

```tsx
<listPicker items={items} />
```

```tsx
<listpicker items={choices}></listpicker>
```

```svelte
<listPicker {items}></listPicker>
```

```vue
<ListPicker :items="items" />
```

## Props [​](https://docs.nativescript.org/ui/list-picker\#props)

### items [​](https://docs.nativescript.org/ui/list-picker\#items)

```ts
items: Array<string | number>
```

Gets or sets the items of the ListPicker.

### selectedIndex [​](https://docs.nativescript.org/ui/list-picker\#selectedindex)

```ts
selectedIndex: number
```

Gets or sets the index of the currently selected item.

### ...Inherited [​](https://docs.nativescript.org/ui/list-picker\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/ListPicker).

## Events [​](https://docs.nativescript.org/ui/list-picker\#events)

### selectedIndexChange [​](https://docs.nativescript.org/ui/list-picker\#selectedindexchange)

```ts
on('selectedIndexChange', (args: PropertyChangeData) => {
  const picker = args.object as ListPicker
  console.log('selectedIndex changed to', args.value)
  // or picker.selectedIndex
})
```

Emitted when the currently selected item (index) changes.

## Native component [​](https://docs.nativescript.org/ui/list-picker\#native-component)

- Android: [`android.widget.NumberPicker`](https://developer.android.com/reference/android/widget/NumberPicker.html)
- iOS: [`UIPickerView`](https://developer.apple.com/documentation/uikit/uipickerview)

2. [Props](https://docs.nativescript.org/ui/list-picker#props)
1. [items](https://docs.nativescript.org/ui/list-picker#items)
2. [selectedIndex](https://docs.nativescript.org/ui/list-picker#selectedindex)
3. [...Inherited](https://docs.nativescript.org/ui/list-picker#inherited)
3. [Events](https://docs.nativescript.org/ui/list-picker#events)
1. [selectedIndexChange](https://docs.nativescript.org/ui/list-picker#selectedindexchange)
4. [Native component](https://docs.nativescript.org/ui/list-picker#native-component)

## Image Source Guide

ImageSource provides a common interface over ( [android.graphics.Bitmap](http://developer.android.com/reference/android/graphics/Bitmap.html) for Android and [UIImage](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class) for iOS, allowing you to create an images from URLs, local files, base64 strings, etc.

## How to use the ImageSource class [​](https://docs.nativescript.org/core/image-source\#how-to-use-the-imagesource-class)

The following sections demonstrate how to create an ImageSource from different sources.

### Load an image using a resource name [​](https://docs.nativescript.org/core/image-source\#load-an-image-using-a-resource-name)

To load an image from the [App\_Resources](https://docs.nativescript.org/project-structure/app-resources) folder, use the [fromResource](https://docs.nativescript.org/core/image-source#fromresource) or [fromResourceSync](https://docs.nativescript.org/core/image-source#fromresourcesync) method:

```ts
ImageSource.fromResource('logo')
  .then((image: ImageSource) => {
    console.log(image.width)
  })
  .catch((err) => {
    console.error(err.stack)
  })
```

### Load an image from the device file system [​](https://docs.nativescript.org/core/image-source\#load-an-image-from-the-device-file-system)

To load an image from a file, use any of [fromFile](https://docs.nativescript.org/core/image-source#fromfile), [fromFileOrResourceSync](https://docs.nativescript.org/core/image-source#fromfileorresourcesync) or the [fromFileSync](https://docs.nativescript.org/core/image-source#fromfilesync) method:

```ts
async function loadImage(){

  try {
    const imageFromFile: ImageSource = await ImageSource.fromFile(filePath)

  } catch (error) {

  }
```

### Create an image from a base64 string [​](https://docs.nativescript.org/core/image-source\#create-an-image-from-a-base64-string)

To create an image from a base64 string, use the [fromBase64](https://docs.nativescript.org/core/image-source#tobase64string) or [fromBase64Sync](https://docs.nativescript.org/core/image-source#frombase64sync) method:

```ts
const base64Str = 'some base64Str'
const image: ImageSource = ImageSource.fromBase64Sync(base64Str)
```

### Create an ImageSource from a font icon code [​](https://docs.nativescript.org/core/image-source\#create-an-imagesource-from-a-font-icon-code)

```ts
const font = new Font('sans serif')
const color = new Color('black')
const imageSource: ImageSource = ImageSource.fromFontIconCodeSync(
  '\uf004',
  font,
  color,
)
```

### Save an image to a file on the File System [​](https://docs.nativescript.org/core/image-source\#save-an-image-to-a-file-on-the-file-system)

To save an ImageSource instance to a file, call the [saveToFile](https://docs.nativescript.org/core/image-source#savetofile) or [saveToFileAsync](https://docs.nativescript.org/core/image-source#savetofileasync) method on the instance.

```ts
async function saveImage() {
  try {
    const folderDest: Folder = knownFolders.documents()

    folderDest.getFile('/images/test.png') //1. Create the file

    const pathDest = path.join(folderDest.path, '/images/test.png')
    const saved: boolean = await image.saveToFileAsync(pathDest, 'png') // Save to the file
    if (saved) {
      Dialogs.alert('Saved successfully')
    }
  } catch (err) {
    Dialogs.alert(err)
  }
}
```

## ImageSource API [​](https://docs.nativescript.org/core/image-source\#imagesource-api)

### constructor() [​](https://docs.nativescript.org/core/image-source\#constructor)

```ts
const imageSource = new ImageSource(nativeSource)
```

Creates a new ImageSource instance and sets the provided native source object. `nativeSource` object will update either the android or ios properties, depending on the target platform.

* * *

The ImageSource class provides the following image static methods loaders.

### fromAsset() [​](https://docs.nativescript.org/core/image-source\#fromasset)

```ts
ImageSource.fromAsset(asset: ImageAsset)
.then((imageSource: ImageSource) =>{
// handle the created image
})
.catch(error =>{
    // handle errror
})
```

Loads an ImageSource instance from the specified [ImageAsset](https://docs.nativescript.org/core/) instance asynchronously.

* * *

### fromBase64() [​](https://docs.nativescript.org/core/image-source\#frombase64)

```ts
ImageSource.fromBase64(base64String)
  .then((imageSource: ImageSource) => {
    // handle the created image
  })
  .catch((error) => {
    // handle errror
  })
```

Loads an ImageSource instance from the specified base64 encoded string asynchronously

* * *

### fromBase64Sync() [​](https://docs.nativescript.org/core/image-source\#frombase64sync)

```ts
const imageSource: ImageSource = ImageSource.fromBase64Sync(base64String)
```

Loads an ImageSource instance from the specified base64 encoded string synchronously.

* * *

### fromData() [​](https://docs.nativescript.org/core/image-source\#fromdata)

```ts
ImageSource.fromData(data)
  .then((imageSource: ImageSource) => {
    // handle the created image
  })
  .catch((error) => {
    // handle errror
  })
```

Asynchronously loads an ImageSource instance from the specified native image data(byte array) asynchronously. `data` can be a Stream on Android or [NSData](https://developer.apple.com/documentation/foundation/nsdata) on iOS.

* * *

### fromDataSync() [​](https://docs.nativescript.org/core/image-source\#fromdatasync)

```ts
const imageSource: ImageSource = ImageSource.fromDataSync(data)
```

Loads an ImageSource instance from the specified native image data(byte array).

* * *

### fromFile() [​](https://docs.nativescript.org/core/image-source\#fromfile)

```ts
ImageSource.fromFile(path)
  .then((imageSource: ImageSource) => {
    // handle the created image
  })
  .catch((error) => {
    // handle errror
  })
```

Loads an ImageSource instance from the specified file asynchronously.

* * *

### fromFileSync() [​](https://docs.nativescript.org/core/image-source\#fromfilesync)

```ts
const imageSource: ImageSource = ImageSource.fromFileSync(data)
```

Loads an ImageSource instance from the specified file.

### fromFileOrResourceSync() [​](https://docs.nativescript.org/core/image-source\#fromfileorresourcesync)

```ts
const imageSource: ImageSource = ImageSource.fromFileOrResourceSync(path)
```

Create an ImageSource from the specified local file or resource (if specified with the `"res://"` prefix).

* * *

### fromFontIconCodeSync() [​](https://docs.nativescript.org/core/image-source\#fromfonticoncodesync)

```ts
const imageSource: ImageSource = ImageSource.fromFontIconCodeSync(
  source,
  font,
  color,
)
```

Creates a new ImageSource instance from the specified font icon code.

- `source`: The unicode string.
- `font`: Font instance.
- `color`: Color instance.

* * *

### fromResource() [​](https://docs.nativescript.org/core/image-source\#fromresource)

```ts
ImageSource.fromResource(name)
  .then((imageSource: ImageSource) => {
    // handle the created image
  })
  .catch((error) => {
    // handle errror
  })
```

Creates an ImageSource from the specified resource name(without the extension) asynchronously.

* * *

### fromResourceSync() [​](https://docs.nativescript.org/core/image-source\#fromresourcesync)

```ts
const imageSource: ImageSource = ImageSource.fromResourceSync(name)
```

Creates an ImageSource from the specified resource name(without the extension) synchronously.

* * *

### fromUrl() [​](https://docs.nativescript.org/core/image-source\#fromurl)

```ts
ImageSource.fromUrl(url)
  .then((imageSource: ImageSource) => {
    // handle the created image
  })
  .catch((error) => {
    // handle errror
  })
```

Downloads and decodes the image from the provided url and creates a new ImageSource instance from it.

* * *

#### The loaded ImageSource instance has the following properties and methods. [​](https://docs.nativescript.org/core/image-source\#the-loaded-imagesource-instance-has-the-following-properties-and-methods)

### android [​](https://docs.nativescript.org/core/image-source\#android)

```ts
imageAndroid: android.graphics.BitMap = imageSource.android
```

The Android-specific( [Bitmap](http://developer.android.com/reference/android/graphics/Bitmap.html)) instance.

* * *

### ios [​](https://docs.nativescript.org/core/image-source\#ios)

```ts
imageIOS: UIImage = imageSource.ios
```

The iOS-specific( [UIImage](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/)) instance.

* * *

### height [​](https://docs.nativescript.org/core/image-source\#height)

```ts
height: number = imageSource.height
```

Gets the height of the instance.

* * *

### width [​](https://docs.nativescript.org/core/image-source\#width)

```ts
width: number = imageSource.width
```

Gets the width of the instance.

* * *

### rotationAngle [​](https://docs.nativescript.org/core/image-source\#rotationangle)

```ts
rotationAngle: number = imageSource.rotationAngle
```

`Android-only`: Gets or sets the rotation angle that should be applied to the image.

* * *

### resizeAsync() [​](https://docs.nativescript.org/core/image-source\#resizeasync)

```ts
imageSource
  .resize(maxSize, options)
  .then((resizedImage: ImageSource) => {})
  .catch((error) => {})
```

Asynchronously returns a new ImageSource that is a resized version of the imageSource with the same aspect ratio, and the max dimension set to the provided maxSize.

- `maxSize` is the maximum desired pixel dimension of the resulting image.
- _Optional_: ( `Android` only) `options.filter` options.filter is a `boolean` which determines whether or not bilinear filtering should be used when scaling the bitmap. If `true` then bilinear filtering will be used when scaling which has better image quality at the cost of worse performance. If this is false then nearest-neighbor scaling is used instead which will have worse image quality but is faster. Recommended is to set filter to 'true' as the cost of bilinear filtering is typically minimal and the improved image quality is significant.

* * *

### resize() [​](https://docs.nativescript.org/core/image-source\#resize)

```ts
resizedImage: ImageSource = imageSource.resize(maxSize, options)
```

Returns a new ImageSource that is a resized version of the imageSource with the same aspect ratio, and the max dimension set to the provided `maxSize`.

* * *

### saveToFile() [​](https://docs.nativescript.org/core/image-source\#savetofile)

```ts
isSaved: boolean = imageSource.saveToFile(path, format, quality)
```

Saves this instance to the specified file, using the provided image `format` and `quality`.

* * *

### saveToFileAsync() [​](https://docs.nativescript.org/core/image-source\#savetofileasync)

```ts
imageSource
  .saveToFileAsync(path, format, quality)
  .then((isSaved: boolean) => {})
  .catch((error) => {})
```

Asynchronously saves this instance to the specified file, using the provided image `format` and `quality`.

- `path` ( `string`) is the path of the file on the file system to save to.
- `format` ( `'png' | 'jpeg' | 'jpg'`) is the format (encoding) of the image.
- _Optional_: `quality` specifies the quality of the encoding. It defaults to the maximum available quality, and varies on a scale of 0 to 100.

* * *

### setNativeSource() [​](https://docs.nativescript.org/core/image-source\#setnativesource)

```ts
imageSource.setNativeSource(nativeSource)
```

Sets the provided native source object, either a Bitmap for Android or a UIImage for iOS.

* * *

### toBase64String() [​](https://docs.nativescript.org/core/image-source\#tobase64string)

```ts
base64String: string = imageSource.toBase64String(format, quality)
```

Converts the image to base64 encoded string, using the provided image format and quality.

* * *

### toBase64StringAsync() [​](https://docs.nativescript.org/core/image-source\#tobase64stringasync)

```ts
imageSource
  .toBase64StringAsync(format, quality)
  .then((base64String: string) => {})
  .catch((error) => {})
```

Asynchronously converts the image to base64 encoded string, using the provided image format and quality.

## API Reference(s) [​](https://docs.nativescript.org/core/image-source\#api-reference-s)

- [ImageSource](https://docs.nativescript.org/api/class/ImageSource) class

## Native Component [​](https://docs.nativescript.org/core/image-source\#native-component)

- `android`: [android.graphics.Bitmap](http://developer.android.com/reference/android/graphics/Bitmap.html)
- `iOS`: [UIImage](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class)

Next [Introduction→](https://docs.nativescript.org/)

2. [How to use the ImageSource class](https://docs.nativescript.org/core/image-source#how-to-use-the-imagesource-class)
1. [Load an image using a resource name](https://docs.nativescript.org/core/image-source#load-an-image-using-a-resource-name)
2. [Load an image from the device file system](https://docs.nativescript.org/core/image-source#load-an-image-from-the-device-file-system)
3. [Create an image from a base64 string](https://docs.nativescript.org/core/image-source#create-an-image-from-a-base64-string)
4. [Create an ImageSource from a font icon code](https://docs.nativescript.org/core/image-source#create-an-imagesource-from-a-font-icon-code)
5. [Save an image to a file on the File System](https://docs.nativescript.org/core/image-source#save-an-image-to-a-file-on-the-file-system)
3. [ImageSource API](https://docs.nativescript.org/core/image-source#imagesource-api)
01. [constructor()](https://docs.nativescript.org/core/image-source#constructor)
02. [fromAsset()](https://docs.nativescript.org/core/image-source#fromasset)
03. [fromBase64()](https://docs.nativescript.org/core/image-source#frombase64)
04. [fromBase64Sync()](https://docs.nativescript.org/core/image-source#frombase64sync)
05. [fromData()](https://docs.nativescript.org/core/image-source#fromdata)
06. [fromDataSync()](https://docs.nativescript.org/core/image-source#fromdatasync)
07. [fromFile()](https://docs.nativescript.org/core/image-source#fromfile)
08. [fromFileSync()](https://docs.nativescript.org/core/image-source#fromfilesync)
09. [fromFileOrResourceSync()](https://docs.nativescript.org/core/image-source#fromfileorresourcesync)
10. [fromFontIconCodeSync()](https://docs.nativescript.org/core/image-source#fromfonticoncodesync)
11. [fromResource()](https://docs.nativescript.org/core/image-source#fromresource)
12. [fromResourceSync()](https://docs.nativescript.org/core/image-source#fromresourcesync)
13. [fromUrl()](https://docs.nativescript.org/core/image-source#fromurl)
14. [android](https://docs.nativescript.org/core/image-source#android)
15. [ios](https://docs.nativescript.org/core/image-source#ios)
16. [height](https://docs.nativescript.org/core/image-source#height)
17. [width](https://docs.nativescript.org/core/image-source#width)
18. [rotationAngle](https://docs.nativescript.org/core/image-source#rotationangle)
19. [resizeAsync()](https://docs.nativescript.org/core/image-source#resizeasync)
20. [resize()](https://docs.nativescript.org/core/image-source#resize)
21. [saveToFile()](https://docs.nativescript.org/core/image-source#savetofile)
22. [saveToFileAsync()](https://docs.nativescript.org/core/image-source#savetofileasync)
23. [setNativeSource()](https://docs.nativescript.org/core/image-source#setnativesource)
24. [toBase64String()](https://docs.nativescript.org/core/image-source#tobase64string)
25. [toBase64StringAsync()](https://docs.nativescript.org/core/image-source#tobase64stringasync)
4. [API Reference(s)](https://docs.nativescript.org/core/image-source#api-reference-s)
5. [Native Component](https://docs.nativescript.org/core/image-source#native-component)

## NativeScript DatePicker

`<DatePicker>` is a UI component that lets users select a date from a pre-configured range.

See also: [TimePicker](https://docs.nativescript.org/ui/time-picker).

![](https://docs.nativescript.org/assets/DatePicker.e7b011a6.png)

![](https://docs.nativescript.org/assets/DatePicker.99bb06af.png)

```xml
<DatePicker
  year="2023"
  month="8"
  day="28"
  date="{{ date }}"
  minDate="{{ minDate }}"
  maxDate="{{ maxDate }}"
/>
```

```html
<DatePicker
  year="2023"
  month="8"
  day="28"
  [date]="date"
  [minDate]="minDate"
  [maxDate]="maxDate"
/>
```

```tsx
<datePicker date={date}></datePicker>
```

```tsx
<datepicker date={date}></datepicker>
```

```svelte
<datepicker bind:date={value}></datepicker>
```

```vue
<DatePicker :date="date" />
```

## Props [​](https://docs.nativescript.org/ui/date-picker\#props)

### date [​](https://docs.nativescript.org/ui/date-picker\#date)

```ts
date: Date
```

Gets or sets the complete date.

### minDate [​](https://docs.nativescript.org/ui/date-picker\#mindate)

```ts
minDate: Date
```

Gets or sets the earliest possible date to select.

### maxDate [​](https://docs.nativescript.org/ui/date-picker\#maxdate)

```ts
maxDate: Date
```

Gets or sets the latest possible date to select.

### day [​](https://docs.nativescript.org/ui/date-picker\#day)

```ts
day: number
```

Gets or sets the day of the month.

### month [​](https://docs.nativescript.org/ui/date-picker\#month)

```ts
month: number
```

Gets or sets the month.

### year [​](https://docs.nativescript.org/ui/date-picker\#year)

```ts
year: number
```

Gets or sets the year.

### iosPreferredDatePickerStyle [​](https://docs.nativescript.org/ui/date-picker\#iospreferreddatepickerstyle)

```ts
iosPreferredDatePickerStyle: UIDatePickerStyle
```

Gets or set the UIDatePickerStyle of the DatePicker in iOS `13.4+`.

Default value: `0` (automatic).

Valid values:

- `0 = automatic`: system picks the concrete style based on the current platform and DatePicker mode.
- `1 = wheels`: the DatePicker displays as a wheel picker.
- `2 = compact` : the DatePicker displays as a label that when tapped displays a calendar-style editor.
- `3 = inline` : the DatePickers displays as an inline, editable field

## Events [​](https://docs.nativescript.org/ui/date-picker\#events)

### dateChange [​](https://docs.nativescript.org/ui/date-picker\#datechange)

```ts
on('dateChange', (args: PropertyChangeData) => {
  const picker = args.object as DatePicker
  console.log('New date:', args.value)
})
```

Emitted when the selected date changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

### minDateChange [​](https://docs.nativescript.org/ui/date-picker\#mindatechange)

```ts
on('minDateChange', (args: PropertyChangeData) => {
  const picker = args.object as DatePicker
  console.log('New minDate:', args.value)
})
```

Emitted when the minimum date changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

### maxDateChange [​](https://docs.nativescript.org/ui/date-picker\#maxdatechange)

```ts
on('maxDateChange', (args: PropertyChangeData) => {
  const picker = args.object as DatePicker
  console.log('New maxDate:', args.value)
})
```

Emitted when the maximum date changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

### dayChange [​](https://docs.nativescript.org/ui/date-picker\#daychange)

```ts
on('dayChange', (args: PropertyChangeData) => {
  const picker = args.object as DatePicker
  console.log('New day:', args.value)
})
```

Emitted when the day changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

### monthChange [​](https://docs.nativescript.org/ui/date-picker\#monthchange)

```ts
on('monthChange', (args: PropertyChangeData) => {
  const picker = args.object as DatePicker
  console.log('New month:', args.value)
})
```

Emitted when the month changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

### yearChange [​](https://docs.nativescript.org/ui/date-picker\#yearchange)

```ts
on('yearChange', (args: PropertyChangeData) => {
  const picker = args.object as DatePicker
  console.log('New year:', args.value)
})
```

Emitted when the year changes.

See [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData).

## Native component [​](https://docs.nativescript.org/ui/date-picker\#native-component)

- Android: [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html)
- iOS: [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker)

2. [Props](https://docs.nativescript.org/ui/date-picker#props)
1. [date](https://docs.nativescript.org/ui/date-picker#date)
2. [minDate](https://docs.nativescript.org/ui/date-picker#mindate)
3. [maxDate](https://docs.nativescript.org/ui/date-picker#maxdate)
4. [day](https://docs.nativescript.org/ui/date-picker#day)
5. [month](https://docs.nativescript.org/ui/date-picker#month)
6. [year](https://docs.nativescript.org/ui/date-picker#year)
7. [iosPreferredDatePickerStyle](https://docs.nativescript.org/ui/date-picker#iospreferreddatepickerstyle)
3. [Events](https://docs.nativescript.org/ui/date-picker#events)
1. [dateChange](https://docs.nativescript.org/ui/date-picker#datechange)
2. [minDateChange](https://docs.nativescript.org/ui/date-picker#mindatechange)
3. [maxDateChange](https://docs.nativescript.org/ui/date-picker#maxdatechange)
4. [dayChange](https://docs.nativescript.org/ui/date-picker#daychange)
5. [monthChange](https://docs.nativescript.org/ui/date-picker#monthchange)
6. [yearChange](https://docs.nativescript.org/ui/date-picker#yearchange)
4. [Native component](https://docs.nativescript.org/ui/date-picker#native-component)

## WebView Component Guide


`<WebView>` is a UI component for rendering web content. The content can be from a remote URL, a local file, or an inline string.

See also: [HtmlView](https://docs.nativescript.org/ui/html-view).

![](https://docs.nativescript.org/assets/WebView.ee7d2fc5.png)

![](https://docs.nativescript.org/assets/WebView.a6723cb4.png)

```xml
<WebView src="https://nativescript.org/" />
```

```html
<WebView src="https://nativescript.org/" />
```

```tsx
<webView src="https://nativescript.org/" />
```

```tsx
<webview src="https://nativescript.org/" />
```

```svelte
<webView src="https://nativescript.org/" />
```

```vue
<WebView src="https://nativescript.org/" />
```

Tip

To be able to use gestures inside a WebView on Android, [disable zoom controls](https://docs.nativescript.org/ui/web-view#disableZoom).

## Props [​](https://docs.nativescript.org/ui/web-view\#props)

### src [​](https://docs.nativescript.org/ui/web-view\#src)

```ts
src: string
```

The source to load in the WebView. The value can be a valid HTTP URL, a path to a local HTML file, or a HTML string.

**Example:**

```ts
webView.src = 'https://nativescript.org/'
webView.src = '~/assets/html/index.html'
webView.src = '<div><h1>Some static HTML</h1></div>'
```

Insecure URLs

Depending on the software version of the device, insecure URLs may be blocked ( `http://`), it's recommended to always use secure URLs ( `https://`).

### canGoBack [​](https://docs.nativescript.org/ui/web-view\#cangoback)

```ts
canGoBack: boolean
```

Gets a value indicating whether the WebView can navigate back.

### canGoForward [​](https://docs.nativescript.org/ui/web-view\#cangoforward)

```ts
canGoForward: boolean
```

Gets a value indicating whether the WebView can navigate forward.

### disableZoom [​](https://docs.nativescript.org/ui/web-view\#disableZoom)

```ts
disableZoom: boolean
```

Disable zooming in the WebView.

### iosAllowInlineMediaPlayback [​](https://docs.nativescript.org/ui/web-view\#iosallowinlinemediaplayback)

```ts
iosAllowInlineMediaPlayback: boolean
```

Enables inline media playback on iOS. By default, WebView forces iPhone into fullscreen media playback. **iOS only.**

### ...Inherited [​](https://docs.nativescript.org/ui/web-view\#inherited)

For additional inherited properties not shown, refer to the [API Reference](https://docs.nativescript.org/api/class/WebView)

## Methods [​](https://docs.nativescript.org/ui/web-view\#methods)

### stopLoading() [​](https://docs.nativescript.org/ui/web-view\#stoploading)

```ts
stopLoading(): void
```

Stops loading the current content (if any).

### goBack() [​](https://docs.nativescript.org/ui/web-view\#goback)

```ts
goBack(): void
```

Navigates the WebView back.

### goForward() [​](https://docs.nativescript.org/ui/web-view\#goforward)

```ts
goForward(): void
```

Navigates the WebView forward.

### reload() [​](https://docs.nativescript.org/ui/web-view\#reload)

```ts
reload(): void
```

Reloads the current url.

## Events [​](https://docs.nativescript.org/ui/web-view\#events)

### loadStarted [​](https://docs.nativescript.org/ui/web-view\#loadstarted)

```ts
on('loadStarted', (args: EventData) => {
  const webView = arg.object as WebView

  console.log('WebView started loading', args.url)
})
```

Emitted when the page has started loading in the `<WebView>`.

See [LoadEventData](https://docs.nativescript.org/api/interface/LoadEventData).

### loadFinished [​](https://docs.nativescript.org/ui/web-view\#loadfinished)

```ts
on('loadFinished', (args: EventData) => {
  const webView = arg.object as WebView

  console.log('WebView finished loading', args.url)
})
```

Emitted when the page has started loading in the `<WebView>`.

See [LoadEventData](https://docs.nativescript.org/api/interface/LoadEventData).

## Native component [​](https://docs.nativescript.org/ui/web-view\#native-component)

- Android: [`android.webkit.WebView`](https://developer.android.com/reference/android/webkit/WebView)
- iOS: [`WKWebView`](https://developer.apple.com/documentation/webkit/wkwebview)

2. [Props](https://docs.nativescript.org/ui/web-view#props)
1. [src](https://docs.nativescript.org/ui/web-view#src)
2. [canGoBack](https://docs.nativescript.org/ui/web-view#cangoback)
3. [canGoForward](https://docs.nativescript.org/ui/web-view#cangoforward)
4. [disableZoom](https://docs.nativescript.org/ui/web-view#disableZoom)
5. [iosAllowInlineMediaPlayback](https://docs.nativescript.org/ui/web-view#iosallowinlinemediaplayback)
6. [...Inherited](https://docs.nativescript.org/ui/web-view#inherited)
3. [Methods](https://docs.nativescript.org/ui/web-view#methods)
1. [stopLoading()](https://docs.nativescript.org/ui/web-view#stoploading)
2. [goBack()](https://docs.nativescript.org/ui/web-view#goback)
3. [goForward()](https://docs.nativescript.org/ui/web-view#goforward)
4. [reload()](https://docs.nativescript.org/ui/web-view#reload)
4. [Events](https://docs.nativescript.org/ui/web-view#events)
1. [loadStarted](https://docs.nativescript.org/ui/web-view#loadstarted)
2. [loadFinished](https://docs.nativescript.org/ui/web-view#loadfinished)
5. [Native component](https://docs.nativescript.org/ui/web-view#native-component)

## ActivityIndicator Component Guide

`<ActivityIndicator>` is a UI component that shows a progress indicator signaling to the user of an operation running in the background.

![](https://docs.nativescript.org/assets/ActivityIndicator.2ff82fef.png)

![](https://docs.nativescript.org/assets/ActivityIndicator.bb1d04f9.png)

## Examples [​](https://docs.nativescript.org/ui/activity-indicator\#examples)

### Always busy ActivityIndicator [​](https://docs.nativescript.org/ui/activity-indicator\#always-busy-activityindicator)

```vue
<ActivityIndicator busy="true" />
```

```xml
<ActivityIndicator busy="true" />
```

```html
<ActivityIndicator busy="true" />
```

```svelte
<activityIndicator busy="true" />
```

```tsx
<activityIndicator busy="true" />
```

```tsx
<activityindicator busy="true" />
```

## Props [​](https://docs.nativescript.org/ui/activity-indicator\#props)

### busy [​](https://docs.nativescript.org/ui/activity-indicator\#busy)

```ts
busy: boolean
```

Gets or sets whether the indicator is busy.

### iosIndicatorViewStyle 8.9+ [​](https://docs.nativescript.org/ui/activity-indicator\#iosindicatorviewstyle-8-9)

```ts
iosIndicatorViewStyle: IOSIndicatorViewStyle = 'medium' | 'large'
```

Specifies the style of the indicator. This property is iOS specific.

Valid values: `medium` and `large`.

Default value: `medium`.

* * *

### ...Inherited [​](https://docs.nativescript.org/ui/activity-indicator\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/ActivityIndicator).

## Events [​](https://docs.nativescript.org/ui/activity-indicator\#events)

### busyChange [​](https://docs.nativescript.org/ui/activity-indicator\#busychange)

```ts
on('busyChange', (args: EventData) => {
  const indicator = args.object as ActivityIndicator
  console.log(`indicator.busy changed to: ${indicator.busy}`)
})
```

Emitted when the busy property changes.

See [EventData](https://docs.nativescript.org/api/interface/EventData).

## Native component [​](https://docs.nativescript.org/ui/activity-indicator\#native-component)

- Android: [`android.widget.ProgressBar` (indeterminate = true)](https://developer.android.com/reference/android/widget/ProgressBar.html)
- iOS: [`UIActivityIndicatorView`](https://developer.apple.com/documentation/uikit/uiactivityindicatorview)

2. [Examples](https://docs.nativescript.org/ui/activity-indicator#examples)
1. [Always busy ActivityIndicator](https://docs.nativescript.org/ui/activity-indicator#always-busy-activityindicator)
3. [Props](https://docs.nativescript.org/ui/activity-indicator#props)
1. [busy](https://docs.nativescript.org/ui/activity-indicator#busy)
2. [iosIndicatorViewStyle 8.9+](https://docs.nativescript.org/ui/activity-indicator#iosindicatorviewstyle-8-9)
3. [...Inherited](https://docs.nativescript.org/ui/activity-indicator#inherited)
4. [Events](https://docs.nativescript.org/ui/activity-indicator#events)
1. [busyChange](https://docs.nativescript.org/ui/activity-indicator#busychange)
5. [Native component](https://docs.nativescript.org/ui/activity-indicator#native-component)

## WrapLayout Overview


`<WrapLayout>` is a layout container that lets you position items in rows or columns, based on the `orientation` property. When the space is filled, the container automatically wraps items onto a new row or column.

## Examples [​](https://docs.nativescript.org/ui/wrap-layout\#examples)

### Horizontal WrapLayout [​](https://docs.nativescript.org/ui/wrap-layout\#horizontal-wraplayout)

By default, a `WrapLayout` wraps its child items along a row. The following example creates a row of equally-sized items. When the row runs out of space, the container wraps the last item to a new row.

```xml
<WrapLayout backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43B3F4" />
  <Label text="second" width="30%" height="30%" backgroundColor="#075B88" />
  <Label text="third" width="30%" height="30%" backgroundColor="#1089CA" />
  <Label text="fourth" width="30%" height="30%" backgroundColor="#1089CA" />
</WrapLayout>
```

![](https://art.nativescript.org/layouts/wrap_layout_horizontal.svg)

### Vertical WrapLayout [​](https://docs.nativescript.org/ui/wrap-layout\#vertical-wraplayout)

To wrap child items vertically, set the `WrapLayout`'s `orentation` property to `vertical`. The following example creates a column of equally-sized items. When the column runs out of space, the container wraps the last item to a new column.

```xml
<WrapLayout orientation="vertical" backgroundColor="#3c495e">
  <Label text="first" width="30%" height="30%" backgroundColor="#43B3F4" />
  <Label text="second" width="30%" height="30%" backgroundColor="#075B88" />
  <Label text="third" width="30%" height="30%" backgroundColor="#1089CA" />
  <Label text="fourth" width="30%" height="30%" backgroundColor="#1089CA" />
</WrapLayout>
```

![](https://art.nativescript.org/layouts/wrap_layout_vertical.svg)

## Props [​](https://docs.nativescript.org/ui/wrap-layout\#props)

### orientation [​](https://docs.nativescript.org/ui/wrap-layout\#orientation)

```ts
orientation: 'horizontal' | 'vertical'
```

Specifies the stacking direction.

Defaults to `horizontal`.

### itemWidth [​](https://docs.nativescript.org/ui/wrap-layout\#itemwidth)

```ts
itemWidth: number
```

Sets the width used to measure and layout each child. When not set, the item width is automatically calculated based on it's contents.

Defaults to `Number.NaN`.

### itemHeight [​](https://docs.nativescript.org/ui/wrap-layout\#itemheight)

```ts
itemHeight: number
```

Sets the height used to measure and layout each child. When not set, the item height is automatically calculated based on it's contents.

### ...Inherited [​](https://docs.nativescript.org/ui/wrap-layout\#inherited)

For additional inherited properties not shown, refer to the [API Reference](https://docs.nativescript.org/api/class/WrapLayout).

2. [Examples](https://docs.nativescript.org/ui/wrap-layout#examples)
1. [Horizontal WrapLayout](https://docs.nativescript.org/ui/wrap-layout#horizontal-wraplayout)
2. [Vertical WrapLayout](https://docs.nativescript.org/ui/wrap-layout#vertical-wraplayout)
3. [Props](https://docs.nativescript.org/ui/wrap-layout#props)
1. [orientation](https://docs.nativescript.org/ui/wrap-layout#orientation)
2. [itemWidth](https://docs.nativescript.org/ui/wrap-layout#itemwidth)
3. [itemHeight](https://docs.nativescript.org/ui/wrap-layout#itemheight)
4. [...Inherited](https://docs.nativescript.org/ui/wrap-layout#inherited)

## Dynamic View Management


`<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](https://docs.nativescript.org/ui/grid-layout) so has all the features of a GridLayout, enhanced with additional APIs.

## Examples [​](https://docs.nativescript.org/ui/root-layout\#examples)

### Using RootLayout to open dynamic popups [​](https://docs.nativescript.org/ui/root-layout\#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)
```

OpeningClosinghelper.ts

```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 [​](https://docs.nativescript.org/ui/root-layout\#api)

### getRootLayout() [​](https://docs.nativescript.org/ui/root-layout\#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 [​](https://docs.nativescript.org/ui/root-layout\#methods)

### open() [​](https://docs.nativescript.org/ui/root-layout\#open)

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

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

See [View](https://docs.nativescript.org/api/class/View), [RootLayoutOptions](https://docs.nativescript.org/ui/root-layout#rootLayoutOptions).

### bringToFront() [​](https://docs.nativescript.org/ui/root-layout\#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](https://docs.nativescript.org/api/class/View).

### close() [​](https://docs.nativescript.org/ui/root-layout\#close)

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

See [View](https://docs.nativescript.org/api/class/View), [TransitionAnimation](https://docs.nativescript.org/ui/root-layout#transitionAnimation).

### closeAll() [​](https://docs.nativescript.org/ui/root-layout\#closeall)

```ts
closeAll(): Promise<void>
```

Closes all views.

### getShadeCover() [​](https://docs.nativescript.org/ui/root-layout\#getshadecover)

```ts
getShadeCover(): View
```

Returns the shade cover (overlay view).

## RootLayoutOptions [​](https://docs.nativescript.org/ui/root-layout\#rootLayoutOptions)

### shadeCover [​](https://docs.nativescript.org/ui/root-layout\#shadecover)

```ts
shadeCover: ShadeCoverOptions
```

See [ShadeCoverOptions](https://docs.nativescript.org/ui/root-layout#shadeCoverOptions).

### animation [​](https://docs.nativescript.org/ui/root-layout\#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](https://docs.nativescript.org/ui/root-layout#transitionAnimation).

## ShadeCoverOptions [​](https://docs.nativescript.org/ui/root-layout\#shadeCoverOptions)

### opacity [​](https://docs.nativescript.org/ui/root-layout\#opacity)

```ts
opacity: number
```

### color [​](https://docs.nativescript.org/ui/root-layout\#color)

```ts
color: Color
```

Sets the color of the shade cover.

See [Color](https://docs.nativescript.org/api/class/Color).

### tapToClose [​](https://docs.nativescript.org/ui/root-layout\#taptoclose)

```ts
tapToClose: boolean
```

Allows closing by tapping on the shade cover.

### animation [​](https://docs.nativescript.org/ui/root-layout\#animation-1)

```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](https://docs.nativescript.org/ui/root-layout#transitionAnimation).

### ignoreShadeRestore [​](https://docs.nativescript.org/ui/root-layout\#ignoreshaderestore)

```ts
ignoreShadeRestore: boolean
```

## TransitionAnimation [​](https://docs.nativescript.org/ui/root-layout\#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](https://docs.nativescript.org/api/namespace/CoreTypes-AnimationCurve).

2. [Examples](https://docs.nativescript.org/ui/root-layout#examples)
1. [Using RootLayout to open dynamic popups](https://docs.nativescript.org/ui/root-layout#using-rootlayout-to-open-dynamic-popups)
3. [API](https://docs.nativescript.org/ui/root-layout#api)
1. [getRootLayout()](https://docs.nativescript.org/ui/root-layout#getrootlayout)
4. [Methods](https://docs.nativescript.org/ui/root-layout#methods)
1. [open()](https://docs.nativescript.org/ui/root-layout#open)
2. [bringToFront()](https://docs.nativescript.org/ui/root-layout#bringtofront)
3. [close()](https://docs.nativescript.org/ui/root-layout#close)
4. [closeAll()](https://docs.nativescript.org/ui/root-layout#closeall)
5. [getShadeCover()](https://docs.nativescript.org/ui/root-layout#getshadecover)
5. [RootLayoutOptions](https://docs.nativescript.org/ui/root-layout#rootLayoutOptions)
1. [shadeCover](https://docs.nativescript.org/ui/root-layout#shadecover)
2. [animation](https://docs.nativescript.org/ui/root-layout#animation)
6. [ShadeCoverOptions](https://docs.nativescript.org/ui/root-layout#shadeCoverOptions)
1. [opacity](https://docs.nativescript.org/ui/root-layout#opacity)
2. [color](https://docs.nativescript.org/ui/root-layout#color)
3. [tapToClose](https://docs.nativescript.org/ui/root-layout#taptoclose)
4. [animation](https://docs.nativescript.org/ui/root-layout#animation-1)
5. [ignoreShadeRestore](https://docs.nativescript.org/ui/root-layout#ignoreshaderestore)
7. [TransitionAnimation](https://docs.nativescript.org/ui/root-layout#transitionAnimation)

## DockLayout UI Guide


`<DockLayout>` is a layout container that lets you dock child views to the sides or the center of the layout.

`<DockLayout>` has the following behavior:

- Uses the `dock` property to dock its children to the `left`, `right`, `top`, `bottom` or center of the layout.

To dock a child element to the center, it must be the **last child** of the container and you must set the `stretchLastChild` property of the parent to `true`.
- Enforces layout constraints to its children.
- Resizes its children at runtime when its size changes.

## Examples [​](https://docs.nativescript.org/ui/dock-layout\#examples)

### Dock to every side without stretching the last child [​](https://docs.nativescript.org/ui/dock-layout\#dock-to-every-side-without-stretching-the-last-child)

The following example creates a frame-like layout consisting of 4 elements, positioned at the 4 edges of the screen.

```xml
<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="top" dock="top" height="40" backgroundColor="#1089CA" />
  <Label text="right" dock="right" width="40" backgroundColor="#43B3F4" />
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#1089CA" />
</DockLayout>
```

![](https://art.nativescript.org/layouts/dock_layout_no_stretch.svg)

### Dock to every side and stretch the last child [​](https://docs.nativescript.org/ui/dock-layout\#dock-to-every-side-and-stretch-the-last-child)

The following example shows how `stretchLastChild` affects the positioning of child elements in a `DockLayout` container. The last child ( `bottom`) is stretched to take up all the remaining space after positioning the first three elements.

```xml
<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="top" dock="top" height="40" backgroundColor="#1089CA" />
  <Label text="right" dock="right" width="40" backgroundColor="#43B3F4" />
  <Label text="bottom" dock="bottom" backgroundColor="#075B88" />
</DockLayout>
```

![](https://art.nativescript.org/layouts/dock_layout_stretch.svg)

### Dock to every side and the center [​](https://docs.nativescript.org/ui/dock-layout\#dock-to-every-side-and-the-center)

The following example creates a `<DockLayout>` of 5 elements. The first four wrap the center element in a frame.

```xml
<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="top" dock="top" height="40" backgroundColor="#1089CA" />
  <Label text="right" dock="right" width="40" backgroundColor="#43B3F4" />
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#1089CA" />
  <Label text="center" backgroundColor="#075B88" />
</DockLayout>
```

![](https://art.nativescript.org/layouts/dock_layout_all_sides_and_stretch.svg)

### Dock multiple children to the same side [​](https://docs.nativescript.org/ui/dock-layout\#dock-multiple-children-to-the-same-side)

The following example creates a single line of 4 elements that stretch across the entire height and width of the screen.

```xml
<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left 1" dock="left" width="40" backgroundColor="#43B3F4" />
  <Label text="left 2" dock="left" width="40" backgroundColor="#1089CA" />
  <Label text="left 3" dock="left" width="40" backgroundColor="#075B88" />
  <Label text="last child" backgroundColor="#43B3F4" />
</DockLayout>
```

![](https://art.nativescript.org/layouts/dock_layout_multiple_on_same_side.svg)

## Props [​](https://docs.nativescript.org/ui/dock-layout\#props)

### stretchLastChild [​](https://docs.nativescript.org/ui/dock-layout\#stretchlastchild)

```ts
stretchLastChild: boolean
```

Enables or disables stretching the last child to fit the remaining space.

### ...Inherited [​](https://docs.nativescript.org/ui/dock-layout\#inherited)

Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api/class/DockLayout).

## Children props [​](https://docs.nativescript.org/ui/dock-layout\#children-props)

When an element is a direct child of `<DockLayout>`, these properties are accounted for:

### dock [​](https://docs.nativescript.org/ui/dock-layout\#dock)

```ts
dock: 'top' | 'right' | 'bottom' | 'left'
```

Specifies which side to dock the element to.

2. [Examples](https://docs.nativescript.org/ui/dock-layout#examples)
1. [Dock to every side without stretching the last child](https://docs.nativescript.org/ui/dock-layout#dock-to-every-side-without-stretching-the-last-child)
2. [Dock to every side and stretch the last child](https://docs.nativescript.org/ui/dock-layout#dock-to-every-side-and-stretch-the-last-child)
3. [Dock to every side and the center](https://docs.nativescript.org/ui/dock-layout#dock-to-every-side-and-the-center)
4. [Dock multiple children to the same side](https://docs.nativescript.org/ui/dock-layout#dock-multiple-children-to-the-same-side)
3. [Props](https://docs.nativescript.org/ui/dock-layout#props)
1. [stretchLastChild](https://docs.nativescript.org/ui/dock-layout#stretchlastchild)
2. [...Inherited](https://docs.nativescript.org/ui/dock-layout#inherited)
4. [Children props](https://docs.nativescript.org/ui/dock-layout#children-props)
1. [dock](https://docs.nativescript.org/ui/dock-layout#dock)

## ScrollView UI Component


`<ScrollView>` is a UI component for rendering scrollable content. Content can be scrolled `vertically` (default) or `horizontally`.

Note

A ScrollView can only have a single child element.

![](https://docs.nativescript.org/assets/ScrollView.f79dc400.png)

![](https://docs.nativescript.org/assets/ScrollView.4bb84966.png)

```xml
<ScrollView>
  <StackLayout padding="12">
    <Label text="v1" height="50" />
    <Label text="v2" height="50" />
    <Label text="v3" height="50" />
    <Label text="v4" height="50" />
    <Label text="v5" height="50" />
    <Label text="v6" height="50" />
    <Label text="v7" height="50" />
    <Label text="v8" height="50" />
    <Label text="v9" height="50" />
  </StackLayout>
</ScrollView>
```

```html
<ScrollView>
  <StackLayout padding="12">
    <Label text="v1" height="50"></Label>
    <Label text="v2" height="50"></Label>
    <Label text="v3" height="50"></Label>
    <Label text="v4" height="50"></Label>
    <Label text="v5" height="50"></Label>
    <Label text="v6" height="50"></Label>
    <Label text="v7" height="50"></Label>
    <Label text="v8" height="50"></Label>
    <Label text="v9" height="50"></Label>
  </StackLayout>
</ScrollView>
```

```tsx
<gridLayout rows="*, 50, 300, *">
  <scrollView orientation="horizontal" row="1">
    <stackLayout orientation="horizontal" padding="12">
      <label text="h1" width="50"></label>
      <label text="h2" width="50"></label>
      <label text="h3" width="50"></label>
      <label text="h4" width="50"></label>
      <label text="h5" width="50"></label>
      <label text="h6" width="50"></label>
      <label text="h7" width="50"></label>
      <label text="h8" width="50"></label>
      <label text="h9" width="50"></label>
    </stackLayout>
  </scrollView>

  <contentView row="2">
    <scrollView>
      <stackLayout padding="12">
        <label text="v1" height="50"></label>
        <label text="v2" height="50"></label>
        <label text="v3" height="50"></label>
        <label text="v4" height="50"></label>
        <label text="v5" height="50"></label>
        <label text="v6" height="50"></label>
        <label text="v7" height="50"></label>
        <label text="v8" height="50"></label>
        <label text="v9" height="50"></label>
      </stackLayout>
    </scrollView>
```

```tsx
<scrollview>
  <stacklayout padding="12">
    <label text="v1" height="50"></label>
    <label text="v2" height="50"></label>
    <label text="v3" height="50"></label>
    <label text="v4" height="50"></label>
    <label text="v5" height="50"></label>
    <label text="v6" height="50"></label>
    <label text="v7" height="50"></label>
    <label text="v8" height="50"></label>
    <label text="v9" height="50"></label>
  </stacklayout>
</scrollview>
```

```svelte
<scrollView>
  <stackLayout padding="12">
    <label text="v1" height="50"></label>
    <label text="v2" height="50"></label>
    <label text="v3" height="50"></label>
    <label text="v4" height="50"></label>
    <label text="v5" height="50"></label>
    <label text="v6" height="50"></label>
    <label text="v7" height="50"></label>
    <label text="v8" height="50"></label>
    <label text="v9" height="50"></label>
  </stackLayout>
</scrollView>
```

```vue
<ScrollView>
  <StackLayout padding="12">
    <Label text="v1" height="50"></Label>
    <Label text="v2" height="50"></Label>
    <Label text="v3" height="50"></Label>
    <Label text="v4" height="50"></Label>
    <Label text="v5" height="50"></Label>
    <Label text="v6" height="50"></Label>
    <Label text="v7" height="50"></Label>
    <Label text="v8" height="50"></Label>
    <Label text="v9" height="50"></Label>
  </StackLayout>
</ScrollView>
```

## Props [​](https://docs.nativescript.org/ui/scroll-view\#props)

### orientation [​](https://docs.nativescript.org/ui/scroll-view\#orientation)

```ts
orientation: 'horizontal' | 'vertical'
```

Gets or sets the direction in which the content can be scrolled.

Defaults to `vertical`.

### scrollBarIndicatorVisible [​](https://docs.nativescript.org/ui/scroll-view\#scrollbarindicatorvisible)

```ts
scrollBarIndicatorVisible: boolean
```

Specifies if the scrollbar is visible.

Defaults to `true`.

### isScrollEnabled [​](https://docs.nativescript.org/ui/scroll-view\#isscrollenabled)

```ts
isScrollEnabled: boolean
```

Enables or disables scrolling of the ScrollView.

### verticalOffset [​](https://docs.nativescript.org/ui/scroll-view\#verticalOffset)

```ts
verticalOffset: number
```

Gets the vertical offset of the scrolled content.

### horizontalOffset [​](https://docs.nativescript.org/ui/scroll-view\#horizontalOffset)

```ts
horizontalOffset: number
```

Gets the horizontal offset of the scrolled content.

### scrollableHeight [​](https://docs.nativescript.org/ui/scroll-view\#scrollableheight)

```ts
scrollableHeight: number
```

Gets the maximum scrollable height, this is also the maximum value for the [verticalOffset](https://docs.nativescript.org/ui/scroll-view#verticalOffset).

### scrollableWidth [​](https://docs.nativescript.org/ui/scroll-view\#scrollablewidth)

```ts
scrollableWidth: number = scrollView.scrollableWidth
```

Gets the maximum scrollable width, this is also the maximum value for the [horizontalOffset](https://docs.nativescript.org/ui/scroll-view#horizontalOffset).

## Methods [​](https://docs.nativescript.org/ui/scroll-view\#methods)

### scrollToVerticalOffset() [​](https://docs.nativescript.org/ui/scroll-view\#scrolltoverticaloffset)

```ts
scrollToVerticalOffset(value: number, animated: boolean)
```

Scrolls the content to the specified vertical offset.

Set `animated` to `true` for animated scroll, `false` for immediate scroll.

### scrollToHorizontalOffset() [​](https://docs.nativescript.org/ui/scroll-view\#scrolltohorizontaloffset)

```ts
scrollToHorizontalOffset(value: number, animated: boolean)
```

Scrolls the content to the specified horizontal offset position.

Set `animated` to `true` for animated scroll, `false` for immediate scroll.

## Events [​](https://docs.nativescript.org/ui/scroll-view\#events)

### scroll [​](https://docs.nativescript.org/ui/scroll-view\#scroll)

```ts
on('scroll', (args: ScrollEventData) => {
  const scrollView = args.object as ScrollView
  console.log('Scrolled', {
    scrollX: args.scrollX,
    scrollY: args.scrollY,
  })
})
```

Emitted when the ScrollView is scrolled.

See [ScrollEventData](https://docs.nativescript.org/api/interface/ScrollEventData).

## Native component [​](https://docs.nativescript.org/ui/scroll-view\#native-component)

- Android: [`android.view`](https://developer.android.com/reference/android/view/View.html)
- iOS: [`UIScrollView`](https://developer.apple.com/documentation/uikit/uiscrollview)

2. [Props](https://docs.nativescript.org/ui/scroll-view#props)
1. [orientation](https://docs.nativescript.org/ui/scroll-view#orientation)
2. [scrollBarIndicatorVisible](https://docs.nativescript.org/ui/scroll-view#scrollbarindicatorvisible)
3. [isScrollEnabled](https://docs.nativescript.org/ui/scroll-view#isscrollenabled)
4. [verticalOffset](https://docs.nativescript.org/ui/scroll-view#verticalOffset)
5. [horizontalOffset](https://docs.nativescript.org/ui/scroll-view#horizontalOffset)
6. [scrollableHeight](https://docs.nativescript.org/ui/scroll-view#scrollableheight)
7. [scrollableWidth](https://docs.nativescript.org/ui/scroll-view#scrollablewidth)
3. [Methods](https://docs.nativescript.org/ui/scroll-view#methods)
1. [scrollToVerticalOffset()](https://docs.nativescript.org/ui/scroll-view#scrolltoverticaloffset)
2. [scrollToHorizontalOffset()](https://docs.nativescript.org/ui/scroll-view#scrolltohorizontaloffset)
4. [Events](https://docs.nativescript.org/ui/scroll-view#events)
1. [scroll](https://docs.nativescript.org/ui/scroll-view#scroll)
5. [Native component](https://docs.nativescript.org/ui/scroll-view#native-component)

## Flexbox Layout Guide


`<FlexboxLayout>` is a layout container that provides a non-exact implementation of [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). This layout lets you arrange child components both horizontally and vertically.

Items are placed in the order they were declared in, unless overridden by the `order` child property.

## Examples [​](https://docs.nativescript.org/ui/flexbox-layout\#examples)

### Default FlexboxLayout [​](https://docs.nativescript.org/ui/flexbox-layout\#default-flexboxlayout)

The following example creates a row of three equally-sized elements that span across the entire height of the screen.

```xml
<FlexboxLayout backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43B3F4" />
  <Label text="second" width="70" backgroundColor="#075B88" />
  <Label text="third" width="70" backgroundColor="#1089CA" />
</FlexboxLayout>
```

![](https://art.nativescript.org/layouts/flexbox_layout_row_stretch.svg)

### Default FlexboxLayout with items aligned to the top ( `flex-start`) [​](https://docs.nativescript.org/ui/flexbox-layout\#default-flexboxlayout-with-items-aligned-to-the-top-flex-start)

The following example creates a row with items aligned to the top of the FlexboxLayout container ( `flex-start`).

```xml
<FlexboxLayout alignItems="flex-start" backgroundColor="#3c495e">
  <Label text="first" width="70" height="70" backgroundColor="#43B3F4" />
  <Label text="second" width="70" height="70" backgroundColor="#075B88" />
  <Label text="third" width="70" height="70" backgroundColor="#1089CA" />
</FlexboxLayout>
```

![](https://art.nativescript.org/layouts/flexbox_layout_row_flex-start.svg)

### Custom item ordering in a FlexboxLayout [​](https://docs.nativescript.org/ui/flexbox-layout\#custom-item-ordering-in-a-flexboxlayout)

The following example reorders items using the `order` property.

```xml
<FlexboxLayout backgroundColor="#3c495e">
  <Label
    text="first"
    order="2"
    width="70"
    height="70"
    backgroundColor="#43B3F4"
  />
  <Label
    text="second"
    order="3"
    width="70"
    height="70"
    backgroundColor="#075B88"
  />
  <Label
    text="third"
    order="1"
    width="70"
    height="70"
    backgroundColor="#1089CA"
  />
</FlexboxLayout>
```

![](https://art.nativescript.org/layouts/flexbox_layout_row_custom_order.svg)

### FlexboxLayout with item wrapping [​](https://docs.nativescript.org/ui/flexbox-layout\#flexboxlayout-with-item-wrapping)

The following example shows items that wrap to a new row when there's not enough space for them to fit on the first row.

```xml
<FlexboxLayout flexWrap="wrap" backgroundColor="#3c495e">
  <Label text="first" width="30%" backgroundColor="#43B3F4" />
  <Label text="second" width="30%" backgroundColor="#075B88" />
  <Label text="third" width="30%" backgroundColor="#1089CA" />
  <Label text="fourth" width="30%" backgroundColor="#1089CA" />
</FlexboxLayout>
```

![](https://art.nativescript.org/layouts/flexbox_layout_wrap.svg)

### FlexboxLayout with a vertical direction ( `column`) [​](https://docs.nativescript.org/ui/flexbox-layout\#flexboxlayout-with-a-vertical-direction-column)

The following example creates a column of three equally-sized elements that span across the entire width of the screen.

Flexbox axis changed

This is the opposite of the default `flexDirection`, notice how the items are laid out in a column instead of a row.

```xml
<FlexboxLayout flexDirection="column" backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43B3F4" />
  <Label text="second" height="70" backgroundColor="#075B88" />
  <Label text="third" height="70" backgroundColor="#1089CA" />
</FlexboxLayout>
```

![](https://art.nativescript.org/layouts/flexbox_layout_column_stretch.svg)

### Reversed items with mixed alignment in a FlexboxLayout [​](https://docs.nativescript.org/ui/flexbox-layout\#reversed-items-with-mixed-alignment-in-a-flexboxlayout)

The following example paces items in a reversed column direction, with the remaining space split between items, and the begginging/end of the FlexboxLayout container using `justifyContent`.

The example also shows how items can modify their position using `alignSelf`

```xml
<FlexboxLayout
  flexDirection="column-reverse"
  justifyContent="space-around"
  backgroundColor="#3c495e"
>
  <Label text="first" height="70" backgroundColor="#43B3F4" />
  <Label
    text="second"
    alignSelf="center"
    width="70"
    height="70"
    backgroundColor="#075B88"
  />
  <Label
    text="third\nflex-end"
    alignSelf="flex-end"
    width="70"
    height="70"
    backgroundColor="#1089CA"
  />
  <Label text="fourth" height="70" backgroundColor="#1089CA" />
</FlexboxLayout>
```

![](https://art.nativescript.org/layouts/flexbox_layout_column_reverse_space_around_align_self.svg)

## Props [​](https://docs.nativescript.org/ui/flexbox-layout\#props)

### flexDirection [​](https://docs.nativescript.org/ui/flexbox-layout\#flexdirection)

```ts
flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse'
```

Sets the direction for placing child elements in the flexbox container.

Valid values:

- `row` \- horizontal, left to right
- `row-reverse` \- horizontal, right to left
- `column` \- vertical, top to bottom
- `column-reverse` \- vertical, bottom to top

Default value: `row`.

### flexWrap [​](https://docs.nativescript.org/ui/flexbox-layout\#flexwrap)

```ts
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse'
```

Sets whether child elements are forced in a single line or can flow into multiple lines. If set to multiple lines, also defines the cross axis which determines the direction new lines are stacked in.

Valid values:

- `nowrap` \- single line which may cause the container to overflow
- `wrap` \- multiple lines, direction is defined by `flexDirection`
- `wrap-reverse` \- multiple lines, opposite to the direction defined by `flexDirection`

Default value: `nowrap`.

### justifyContent [​](https://docs.nativescript.org/ui/flexbox-layout\#justifycontent)

```ts
justifyContent: 'flex-start' |
  'flex-end' |
  'center' |
  'space-between' |
  'space-around'
```

Sets the alignment of child elements along the main axis. You can use it to distribute leftover space when all the child elements on a line are inflexible or are flexible but have reached their maximum size. You can also use it to control the alignment of items when they overflow the line.

Valid values:

- `flex-start` \- items are packed toward the start line
- `flex-end` \- items are packed toward the end line
- `center` \- items are centered along the line
- `space-between` \- items are evenly distributed on the line—first item is on the start line, last item on the end line
- `space-around` \- items are evenly distributed on the line with equal space around them

Default value: `flex-start`.

### alignItems [​](https://docs.nativescript.org/ui/flexbox-layout\#alignitems)

```ts
alignItems: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
```

(Android-only) Sets the alignment of child elements along the cross axis on the current line. Acts as `justifyContent` for the cross axis.

Valid values:

- `flex-start` \- cross-start margin edge of the items is placed on the cross-start line
- `flex-end` \- cross-end margin edge of the items is placed on the cross-end line
- `center` \- items are centered оn the cross axis
- `baseline` \- the item baselines are aligned
- `stretch` \- items are stretched to fill the container but respect `min-width` and `max-width`

Default value: `stretch`.

### alignContent [​](https://docs.nativescript.org/ui/flexbox-layout\#aligncontent)

```ts
alignContent: 'flex-start' |
  'flex-end' |
  'center' |
  'space-between' |
  'space-around' |
  'stretch'
```

Sets how lines are aligned in the flex container on the cross axis, similar to how `justifyContent` aligns individual items within the main axis.

This property has no effect when the flex container has only one line.

Valid values:

- `flex-start` \- lines are packed to the start of the container
- `flex-end` \- lines are packed to the end of the container
- `center` \- lines are packed to the center of the container
- `space-between` \- lines are evenly distributed; the first line is at the start of the container while the last one is at the end
- `space-around` \- lines are evenly distributed with equal space between them
- `stretch` \- lines are stretched to take up the remaining space

Default value: `stretch`.

### ...Inherited [​](https://docs.nativescript.org/ui/flexbox-layout\#inherited)

Additional inherited properties not shown. Refer to the [API Reference](https://docs.nativescript.org/api/class/FlexboxLayout)

## Children props [​](https://docs.nativescript.org/ui/flexbox-layout\#children-props)

When an element is a direct child of `<FlexboxLayout>`, these properties are accounted for:

### order [​](https://docs.nativescript.org/ui/flexbox-layout\#order)

```ts
order: number
```

Sets the order in which child element appear in relation to one another.

### flexGrow [​](https://docs.nativescript.org/ui/flexbox-layout\#flexgrow)

```ts
flexGrow: number
```

Indicates that the child should grow in size, if necessary. Sets how much the child will grow in proportion to the rest of the child elements in the flex container.

### flexShrink [​](https://docs.nativescript.org/ui/flexbox-layout\#flexshrink)

```ts
flexShrink: number
```

Indicates that the child should shrink when the row runs out of space. Sets how much the flex item will shrink in proportion to the rest of the child elements in the flex container. When not specified, its value is set to `1`.

### alignSelf [​](https://docs.nativescript.org/ui/flexbox-layout\#alignself)

```ts
alignSelf: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
```

(Android-only) Overrides the `alignItems` value for the child.

Valid values:

- `flex-start` (cross-start margin edge of the item is placed on the cross-start line),
- `flex-end` (cross-end margin edge of the item is placed on the cross-end line),
- `center` (item is centered on the cross axis),
- `baseline` (the item baselines are aligned), and
- `stretch` (items is stretched to fill the container but respects `min-width` and `max-width`).

Default value: `stretch`.

### flexWrapBefore [​](https://docs.nativescript.org/ui/flexbox-layout\#flexwrapbefore)

```ts
flexWrapBefore: boolean
```

When `true`, forces the item to wrap onto a new line.

Note

This property is not part of the CSS Flexbox specification.

Default value: `false`.

2. [Examples](https://docs.nativescript.org/ui/flexbox-layout#examples)
1. [Default FlexboxLayout](https://docs.nativescript.org/ui/flexbox-layout#default-flexboxlayout)
2. [Default FlexboxLayout with items aligned to the top (flex-start)](https://docs.nativescript.org/ui/flexbox-layout#default-flexboxlayout-with-items-aligned-to-the-top-flex-start)
3. [Custom item ordering in a FlexboxLayout](https://docs.nativescript.org/ui/flexbox-layout#custom-item-ordering-in-a-flexboxlayout)
4. [FlexboxLayout with item wrapping](https://docs.nativescript.org/ui/flexbox-layout#flexboxlayout-with-item-wrapping)
5. [FlexboxLayout with a vertical direction (column)](https://docs.nativescript.org/ui/flexbox-layout#flexboxlayout-with-a-vertical-direction-column)
6. [Reversed items with mixed alignment in a FlexboxLayout](https://docs.nativescript.org/ui/flexbox-layout#reversed-items-with-mixed-alignment-in-a-flexboxlayout)
3. [Props](https://docs.nativescript.org/ui/flexbox-layout#props)
1. [flexDirection](https://docs.nativescript.org/ui/flexbox-layout#flexdirection)
2. [flexWrap](https://docs.nativescript.org/ui/flexbox-layout#flexwrap)
3. [justifyContent](https://docs.nativescript.org/ui/flexbox-layout#justifycontent)
4. [alignItems](https://docs.nativescript.org/ui/flexbox-layout#alignitems)
5. [alignContent](https://docs.nativescript.org/ui/flexbox-layout#aligncontent)
6. [...Inherited](https://docs.nativescript.org/ui/flexbox-layout#inherited)
4. [Children props](https://docs.nativescript.org/ui/flexbox-layout#children-props)
1. [order](https://docs.nativescript.org/ui/flexbox-layout#order)
2. [flexGrow](https://docs.nativescript.org/ui/flexbox-layout#flexgrow)
3. [flexShrink](https://docs.nativescript.org/ui/flexbox-layout#flexshrink)
4. [alignSelf](https://docs.nativescript.org/ui/flexbox-layout#alignself)
5. [flexWrapBefore](https://docs.nativescript.org/ui/flexbox-layout#flexwrapbefore)

## File System APIs


File system handing with @nativescript/core provides easy-to-use APIs for working with files and folders in a device's file system like managing files, folders, paths, and separators, etc.

## How to work with files and folders [​](https://docs.nativescript.org/core/file-system\#how-to-work-with-files-and-folders)

### Accessing the Documents folder [​](https://docs.nativescript.org/core/file-system\#accessing-the-documents-folder)

To get the root Documents folder, call the `documents()` method on `knownFolders`:

```ts
import { knownFolders } from '@nativescript/core'

const documents = knownFolders.documents()
```

### Accessing the temporary(Caches) folder [​](https://docs.nativescript.org/core/file-system\#accessing-the-temporary-caches-folder)

```ts
import { knownFolders } from '@nativescript/core'

const cache = knownFolders.temp()
```

### Accessing the root folder for the app [​](https://docs.nativescript.org/core/file-system\#accessing-the-root-folder-for-the-app)

```ts
import { knownFolders } from '@nativescript/core'

const appRootFolder = knownFolders.currentApp()
```

### Creating a folder [​](https://docs.nativescript.org/core/file-system\#creating-a-folder)

To create a folder, call the `getFolder()` method on an instance of `Folder` (any of the root folders above or one you create) and pass it the name of the folder.

```ts
folder.getFolder('folder-name')
```

You can also use the [fromPath](https://docs.nativescript.org/core/file-system#frompath) static method of the Folder class.

```ts
const folderPath = path.join(knownFolders.documents().path, 'music')
const folder: Folder = Folder.fromPath(folderPath)
```

### Renaming a folder [​](https://docs.nativescript.org/core/file-system\#renaming-a-folder)

To rename a folder, use the `rename` or `renameSync` method:

```ts
folder
  .rename(newName)
  .then((res) => {
    // Folder Successfully renamed.
  })
  .catch((err) => {
    //Folder couldn't be renamed
    console.error(err)
  })
```

### Check if a folder exists [​](https://docs.nativescript.org/core/file-system\#check-if-a-folder-exists)

```ts
const folderExists: boolean = Folder.exists('folder-path')
```

### Accessing a folder's content [​](https://docs.nativescript.org/core/file-system\#accessing-a-folder-s-content)

To get a folder's files and folders, use the `getEntitiesSync` or `getEntities` method:

```ts
folder
  .getEntities()
  .then((entities: FileSystemEntity[]) => {
    // do something
  })
  .catch((err) => {
    console.log(err)
  })
```

### Deleting the contents of a Folder [​](https://docs.nativescript.org/core/file-system\#deleting-the-contents-of-a-folder)

To delete all the content of a Folder, use the [clear](https://docs.nativescript.org/core/file-system#clear) or [clearSync](https://docs.nativescript.org/core/file-system#clearsync) method of a Folder instance:

```ts
folder
  .clear()
  .then((result) => {
    // successful delete
  })
  .catch((rerror) => {})

// OR

folder.clearSync((error) => {})
```

### Deleting a folder [​](https://docs.nativescript.org/core/file-system\#deleting-a-folder)

To delete a folder, use the `remove` or `removeSync` method:

```ts
folder
  .remove()
  .then((value: boolean) => {
    console.log(value)
  })
  .catch((error) => {
    console.error(error.message)
  })
```

### Creating, writing to and reading from a text file [​](https://docs.nativescript.org/core/file-system\#creating-writing-to-and-reading-from-a-text-file)

- To create a file, call the `getFile()` method on an instance of the `Folder` class and pass it the file name with the extension.

```ts
folder.getFile('my-text.txt')
//or
const filePath = path.join(folder.path, 'my-text.txt')
const file = File.fromPath(filePath)
```

- To save a text to a file, use the `writeText` or `writeTextSync` method:

```ts
file
  .writeText('Some text')
  .then((result) => {
    // Succeeded writing to the file.
  })
  .catch((error) => {
    console.log(error)
  })
```

- To extract data from a text file, you can use the readText or readTextSync method of the file instance. Here's an example of how to use it:

```ts
file
  .readText()
  .then((res) => {
    // Succeeded read from file.
  })
  .catch((error) => {})
```

### Check if a file exists [​](https://docs.nativescript.org/core/file-system\#check-if-a-file-exists)

To check if a file exists, you can use [exists](https://docs.nativescript.org/core/file-system#exists) with the file path:

```ts
const exists = File.exists(filePath)
```

### Renaming a file [​](https://docs.nativescript.org/core/file-system\#renaming-a-file)

To rename a file, use the `rename` or `renameSync` method:

```ts
file
  .rename('new-name.ext')
  .then((value) => {})
  .catch((err) => {})
```

### Saving a binary data to a file [​](https://docs.nativescript.org/core/file-system\#saving-a-binary-data-to-a-file)

To save binary data to a file, use either the `write` or `writeSync` method:

```ts
file
  .write(binary data)
  .then(result => {
    // Succeeded writing to the file.

  })
  .catch(error => {
    console.log(error)
  })
```

### Reading a binary data from a file [​](https://docs.nativescript.org/core/file-system\#reading-a-binary-data-from-a-file)

To read binary data, use the `read` or `readSync` method of the File instance. For example, you can save an image on the device and retrive it as follows:

```ts
async readAnImage() {

    const folder = knownFolders.documents()
    const filePath = path.join(folder.path, 'cat.png')
    const imageFile = File.fromPath(filePath)

    try {

      const imageSource = await ImageSource.fromFile('~/assets/images/download.jpeg')
      const saved: boolean = imageSource.saveToFile(filePath, "png")

      if (saved) {
        // READ BINARY DATA
        const imageBinary = await imageFile.read()
        const img = await ImageSource.fromData(imageBinary)
      }

    } catch (err) {

    }
}
```

### Deleting a file [​](https://docs.nativescript.org/core/file-system\#deleting-a-file)

To remove a file, use the [remove](https://docs.nativescript.org/core/file-system#remove) or [removeSync](https://docs.nativescript.org/core/file-system#removesync) method of the File instance:

```ts
file
  .remove()
  .then((res: boolean) => {
    // Success removing the file.
  })
  .catch((err) => {})
```

### Normalizing a path [​](https://docs.nativescript.org/core/file-system\#normalizing-a-path)

To normalize a path use the `normalize` or create the path with the `join` method from the [path](https://docs.nativescript.org/core/file-system#path-operations) object:

```ts
const testPath = '///test.txt'
let documentsFolder = knownFolders.documents()
path.normalize(documentsFolder.path + testPath)
```

## FileSystem API [​](https://docs.nativescript.org/core/file-system\#filesystem-api)

### documents() [​](https://docs.nativescript.org/core/file-system\#documents)

```ts
const folder: Folder = knownFolders.documents()
```

Gets the Documents folder available for the current application. This Folder is private for the application and not accessible from Users/External apps.

* * *

### externalDocuments() [​](https://docs.nativescript.org/core/file-system\#externaldocuments)

```ts
const folder: Folder = knownFolders.externalDocuments()
```

Gets the Documents folder available for the current application from an external storage source. This folder has private access, with availability limited to the application, meaning it is not accessible to outside users, bots or external apps.

- On Android, for such read or write access, the flags `READ_EXTERNAL_STORAGE/WRITE_EXTERNAL_STORAGE` permissions need to be set to true. This can be done by adding the following XML code to the `AndroidManifest.xml` file:

```xml
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
```

- There is no external storage on iOS, it is the same as [documents()](https://docs.nativescript.org/core/file-system#documents).

* * *

### temp() [​](https://docs.nativescript.org/core/file-system\#temp)

```ts
const folder: Folder = knownFolders.temp()
```

Gets the Temporary (Caches) folder available for the current application. This Folder is private for the application and not accessible from Users/External apps.

* * *

### currentApp() [​](https://docs.nativescript.org/core/file-system\#currentapp)

```ts
const folder: Folder = knownFolders.currentApp()
```

Gets the root folder for the current application.

* * *

### iOS known folders [​](https://docs.nativescript.org/core/file-system\#ios-known-folders)

The following methods allow to access to iOS known folders.

#### library() [​](https://docs.nativescript.org/core/file-system\#library)

```ts
const folder: Folder = knownFolders.ios.library()
```

Gets the NSLibraryDirectory.

* * *

#### developer() [​](https://docs.nativescript.org/core/file-system\#developer)

```ts
const folder: Folder = knownFolders.ios.developer()
```

Gets the NSDeveloperDirectory.

* * *

#### desktop() [​](https://docs.nativescript.org/core/file-system\#desktop)

```ts
const folder: Folder = knownFolders.ios.desktop()
```

Gets the NSDesktopDirectory.

* * *

#### downloads() [​](https://docs.nativescript.org/core/file-system\#downloads)

```ts
const folder: Folder = knownFolders.ios.downloads()
```

Gets the NSDownloadsDirectory.

* * *

#### movies() [​](https://docs.nativescript.org/core/file-system\#movies)

```ts
const folder: Folder = knownFolders.ios.movies()
```

Gets the NSMoviesDirectory.

* * *

#### music() [​](https://docs.nativescript.org/core/file-system\#music)

```ts
const folder: Folder = knownFolders.ios.music()
```

Gets the NSMusicDirectory.

* * *

#### pictures() [​](https://docs.nativescript.org/core/file-system\#pictures)

```ts
const folder: Folder = knownFolders.ios.pictures()
```

Gets the NSPicturesDirectory.

* * *

#### sharedPublic() [​](https://docs.nativescript.org/core/file-system\#sharedpublic)

```ts
const folder: Folder = knownFolders.ios.sharedPublic()
```

Gets the NSSharedPublicDirectory.

* * *

### fromPath() [​](https://docs.nativescript.org/core/file-system\#frompath)

```ts
const file: File = File.fromPath(path)
```

or

```ts
const folder: Folder = Folder.fromPath(path)
```

Gets or creates a Folder or File entity at the specified path.

* * *

### getFolder [​](https://docs.nativescript.org/core/file-system\#getfolder)

```ts
const folder: Folder = folder.getFolder(name)
```

Gets or creates a Folder entity with the specified `name` within a Folder.

* * *

### exists [​](https://docs.nativescript.org/core/file-system\#exists)

```ts
const folderExists: boolean = Folder.exists(path)
```

or

```ts
const file: boolean = File.exists(path)
```

Checks whether a Folder or File with the specified path already exists.

* * *

### isKnown [​](https://docs.nativescript.org/core/file-system\#isknown)

```ts
const isItAKnownFolder: boolean = folder.isKnown
```

Determines whether this instance is a known folder (accessed through the `knownFolders` object).

* * *

Both the File and Folder classes extend the FileSystemEntity which has the following API:

### lastModified [​](https://docs.nativescript.org/core/file-system\#lastmodified)

```ts
const lastModified: Date = entity.lastModified
```

Gets the Date object specifying the last time this entity was modified.

* * *

### name [​](https://docs.nativescript.org/core/file-system\#name)

```ts
const name: string = entity.name
```

Gets the name of the entity.

* * *

### path [​](https://docs.nativescript.org/core/file-system\#path)

```ts
const path: string = entity.path
```

Gets the fully-qualified path (including the extension for a File) of the entity.

* * *

### parent [​](https://docs.nativescript.org/core/file-system\#parent)

```ts
const parent: Folder = entity.parent
```

Gets the Folder object representing the parent of this entity. Will be null for a root folder like Documents or Temporary. This property is readonly.

* * *

### remove() [​](https://docs.nativescript.org/core/file-system\#remove)

```ts
const result = await entity.remove()
```

Asynchronously removes (deletes) the current Entity from the file system.

* * *

### removeSync() [​](https://docs.nativescript.org/core/file-system\#removesync)

```ts
entity.removeSync(onError?: (error: any) => any): void
```

Removes (deletes) the current Entity from the file system.

* * *

### rename() [​](https://docs.nativescript.org/core/file-system\#rename)

```ts
entity.rename(newName: string): Promise<any>
```

Asynchronously renames the current entity using the specified name.

* * *

### renameSync() [​](https://docs.nativescript.org/core/file-system\#renamesync)

```ts
entity.renameSync(newName: string, onError?: (error: any) => any)
```

Renames the current entity synchronously, using the specified name.

* * *

### getEntities() [​](https://docs.nativescript.org/core/file-system\#getentities)

```ts
folder.getEntities(): Promise<Array<FileSystemEntity>>
```

Asynchronously gets all the top-level entities residing within a folder.

* * *

### getEntitiesSync() [​](https://docs.nativescript.org/core/file-system\#getentitiessync)

```ts
folder.getEntitiesSync(onError?: (error: any) => any): Array<FileSystemEntity>
```

Gets all the top-level entities residing within this folder synchronously. `onError` is a optional function to be called if some error occurs.

* * *

### eachEntity() [​](https://docs.nativescript.org/core/file-system\#eachentity)

```ts
folder.eachEntity(onEntity: (entity: FileSystemEntity) => boolean)
```

Enumerates all the top-level FileSystem entities within a folder. `onEntity` is a callback that receives the current entity.

* * *

### getFile() [​](https://docs.nativescript.org/core/file-system\#getfile)

```ts
folder.getFile(name: string): File
```

Gets or creates a File entity with the specified name within this Folder

* * *

### extension [​](https://docs.nativescript.org/core/file-system\#extension)

```ts
const fileExt: string = file.extension
```

Gets the extension of the file.

* * *

### size [​](https://docs.nativescript.org/core/file-system\#size)

```ts
const fileSize: number = file.size
```

Gets the extension of the file.

* * *

### isLocked [​](https://docs.nativescript.org/core/file-system\#islocked)

```ts
const isFileLocked: boolean = file.isLocked
```

Gets a boolean value indicating whether the file is currently locked, meaning a background operation associated with this file is running.

* * *

### readText() [​](https://docs.nativescript.org/core/file-system\#readtext)

```ts
const text = await file.readText(encoding)
```

Asynchronously reads the content of the file as a string using an optional encoding value. If you do not pass any encoding, `UTF-8` is used.

* * *

### readTextSync() [​](https://docs.nativescript.org/core/file-system\#readtextsync)

```ts
file.readTextSync(onError?: (error: any) => any, encoding?: string): string
```

Reads the content of the file as a string synchronously, using the specified encoding (defaults to UTF-8). `onError` is a function to be called if some IO-error occurs.

* * *

### read [​](https://docs.nativescript.org/core/file-system\#read)

```ts
const fileContent = await file.read()
```

Reads the binary content of the file asynchronously.

* * *

### readSync() [​](https://docs.nativescript.org/core/file-system\#readsync)

```ts
const fileContent = file.readSync(onError)
```

Reads the binary content of the file synchronously. `onError` is a function to be called if some IO-error occurs.

| Parameter | Type | Description |
| --- | --- | --- |
| `onError?` | `(error: any) => any` | An optional function to be called if some IO-error occurs. |

* * *

### writeText() [​](https://docs.nativescript.org/core/file-system\#writetext)

```ts
const result = await file.writeText(content, encoding)
```

Asynchronously writes the content of the file as a string using the specified encoding (defaults to UTF-8).

| Parameter | Type | Description |
| --- | --- | --- |
| `content` | `string` | The content to write. |
| `encoding?` | `string` | An optional encoding value. If you do not pass any encoding, `UTF-8` is used. |

* * *

### writeTextSync() [​](https://docs.nativescript.org/core/file-system\#writetextsync)

```ts
file.writeTextSync(content, onError, encoding): void
```

Synchronously writes the content of the file as a string using the specified encoding (defaults to UTF-8).

| Parameter | Type | Description |
| --- | --- | --- |
| `content` | `string` | The content to write. |
| `onError?` | `(error: any) => any` | An optional function to be called if some IO-error occurs. |
| `encoding?` | `string` | An optional encoding value. If you do not pass any encoding, `UTF-8` is used. |

* * *

### write() [​](https://docs.nativescript.org/core/file-system\#write)

```ts
await file.write(content)
```

Writes the provided binary content to the file asynchronously.

| Parameter | Type | Description |
| --- | --- | --- |
| `content` | `any` | The content to write. |

* * *

### writeSync() [​](https://docs.nativescript.org/core/file-system\#writesync)

```ts
file.writeSync(content: any, onError?: (error: any) => any): void
```

Writes the provided binary content to the file synchronously.

| Parameter | Type | Description |
| --- | --- | --- |
| `content` | `any` | The content to write. |
| `onError?` | `(error: any) => any` | An optional function to be called if some IO-error occurs. |

* * *

### contains() [​](https://docs.nativescript.org/core/file-system\#contains)

```ts
const containsEntity: boolean = folder.contains(name)
```

Checks whether this Folder contains an Entity with the specified name.

| Parameter | Type | Description |
| --- | --- | --- |
| `name` | `string` | The name of the entity to check for. |

* * *

### clear() [​](https://docs.nativescript.org/core/file-system\#clear)

```ts
const result = await folder.clear()
```

Asynchronously deletes all the files and folders (recursively), contained within the Folder.

* * *

### clearSync() [​](https://docs.nativescript.org/core/file-system\#clearsync)

```ts
folder.clearSync(onError)
```

Synchronously deletes all the files and folders (recursively), contained within the Folder.

| Parameter | Type | Description |
| --- | --- | --- |
| `onError?` | `(error: any) => any` | An optional function to be called if some IO-error occurs. |

* * *

### path operations [​](https://docs.nativescript.org/core/file-system\#path-operations)

#### normalize [​](https://docs.nativescript.org/core/file-system\#normalize)

```ts
const normalizedPath: string = path.normalize(path)
```

Normalizes a path, taking care of occurrences like `..` and `//`.

| Parameter | Type | Description |
| --- | --- | --- |
| `path` | `string` | The path to normalize. |

* * *

#### join() [​](https://docs.nativescript.org/core/file-system\#join)

```ts
const joinedPath: string = path.join(...paths)
```

Joins all the provided string components, forming a valid and normalized path.

| Parameter | Type | Description |
| --- | --- | --- |
| `paths` | `string[]` | The components of the path to join. |

* * *

#### separator [​](https://docs.nativescript.org/core/file-system\#separator)

```ts
pathSeparator: string = path.separator
```

Gets the string used to separate file paths.

* * *

## API References [​](https://docs.nativescript.org/core/file-system\#api-references)

- [File](https://docs.nativescript.org/api/class/File) class
- [Folder](https://docs.nativescript.org/api/class/Folder) class
- [FileSystemEntity](https://docs.nativescript.org/api/class/FileSystemEntity) class
- [knownFolders](https://docs.nativescript.org/api/namespace/knownFolders) module
- [path](https://docs.nativescript.org/api/namespace/path) module

## Native Component [​](https://docs.nativescript.org/core/file-system\#native-component)

- Android: [java.io.File](https://developer.android.com/reference/java/io/File)

- iOS: [NSFileManager](https://developer.apple.com/documentation/foundation/nsfilemanager)

2. [How to work with files and folders](https://docs.nativescript.org/core/file-system#how-to-work-with-files-and-folders)
01. [Accessing the Documents folder](https://docs.nativescript.org/core/file-system#accessing-the-documents-folder)
02. [Accessing the temporary(Caches) folder](https://docs.nativescript.org/core/file-system#accessing-the-temporary-caches-folder)
03. [Accessing the root folder for the app](https://docs.nativescript.org/core/file-system#accessing-the-root-folder-for-the-app)
04. [Creating a folder](https://docs.nativescript.org/core/file-system#creating-a-folder)
05. [Renaming a folder](https://docs.nativescript.org/core/file-system#renaming-a-folder)
06. [Check if a folder exists](https://docs.nativescript.org/core/file-system#check-if-a-folder-exists)
07. [Accessing a folder's content](https://docs.nativescript.org/core/file-system#accessing-a-folder-s-content)
08. [Deleting the contents of a Folder](https://docs.nativescript.org/core/file-system#deleting-the-contents-of-a-folder)
09. [Deleting a folder](https://docs.nativescript.org/core/file-system#deleting-a-folder)
10. [Creating, writing to and reading from a text file](https://docs.nativescript.org/core/file-system#creating-writing-to-and-reading-from-a-text-file)
11. [Check if a file exists](https://docs.nativescript.org/core/file-system#check-if-a-file-exists)
12. [Renaming a file](https://docs.nativescript.org/core/file-system#renaming-a-file)
13. [Saving a binary data to a file](https://docs.nativescript.org/core/file-system#saving-a-binary-data-to-a-file)
14. [Reading a binary data from a file](https://docs.nativescript.org/core/file-system#reading-a-binary-data-from-a-file)
15. [Deleting a file](https://docs.nativescript.org/core/file-system#deleting-a-file)
16. [Normalizing a path](https://docs.nativescript.org/core/file-system#normalizing-a-path)
3. [FileSystem API](https://docs.nativescript.org/core/file-system#filesystem-api)
01. [documents()](https://docs.nativescript.org/core/file-system#documents)
02. [externalDocuments()](https://docs.nativescript.org/core/file-system#externaldocuments)
03. [temp()](https://docs.nativescript.org/core/file-system#temp)
04. [currentApp()](https://docs.nativescript.org/core/file-system#currentapp)
05. [iOS known folders](https://docs.nativescript.org/core/file-system#ios-known-folders)
06. [fromPath()](https://docs.nativescript.org/core/file-system#frompath)
07. [getFolder](https://docs.nativescript.org/core/file-system#getfolder)
08. [exists](https://docs.nativescript.org/core/file-system#exists)
09. [isKnown](https://docs.nativescript.org/core/file-system#isknown)
10. [lastModified](https://docs.nativescript.org/core/file-system#lastmodified)
11. [name](https://docs.nativescript.org/core/file-system#name)
12. [path](https://docs.nativescript.org/core/file-system#path)
13. [parent](https://docs.nativescript.org/core/file-system#parent)
14. [remove()](https://docs.nativescript.org/core/file-system#remove)
15. [removeSync()](https://docs.nativescript.org/core/file-system#removesync)
16. [rename()](https://docs.nativescript.org/core/file-system#rename)
17. [renameSync()](https://docs.nativescript.org/core/file-system#renamesync)
18. [getEntities()](https://docs.nativescript.org/core/file-system#getentities)
19. [getEntitiesSync()](https://docs.nativescript.org/core/file-system#getentitiessync)
20. [eachEntity()](https://docs.nativescript.org/core/file-system#eachentity)
21. [getFile()](https://docs.nativescript.org/core/file-system#getfile)
22. [extension](https://docs.nativescript.org/core/file-system#extension)
23. [size](https://docs.nativescript.org/core/file-system#size)
24. [isLocked](https://docs.nativescript.org/core/file-system#islocked)
25. [readText()](https://docs.nativescript.org/core/file-system#readtext)
26. [readTextSync()](https://docs.nativescript.org/core/file-system#readtextsync)
27. [read](https://docs.nativescript.org/core/file-system#read)
28. [readSync()](https://docs.nativescript.org/core/file-system#readsync)
29. [writeText()](https://docs.nativescript.org/core/file-system#writetext)
30. [writeTextSync()](https://docs.nativescript.org/core/file-system#writetextsync)
31. [write()](https://docs.nativescript.org/core/file-system#write)
32. [writeSync()](https://docs.nativescript.org/core/file-system#writesync)
33. [contains()](https://docs.nativescript.org/core/file-system#contains)
34. [clear()](https://docs.nativescript.org/core/file-system#clear)
35. [clearSync()](https://docs.nativescript.org/core/file-system#clearsync)
36. [path operations](https://docs.nativescript.org/core/file-system#path-operations)
4. [API References](https://docs.nativescript.org/core/file-system#api-references)
5. [Native Component](https://docs.nativescript.org/core/file-system#native-component)

## SegmentedBar UI Component


`<SegmentedBar>` is a UI bar component that displays a set of buttons for discrete selection.

![](https://docs.nativescript.org/assets/SegmentedBar.61737320.png)

![](https://docs.nativescript.org/assets/SegmentedBar.6c928d1b.png)

```xml
<SegmentedBar>
  <SegmentedBarItem title="First" />
  <SegmentedBarItem title="Second" />
  <SegmentedBarItem title="Third" />
</SegmentedBar>
```

```html
<SegmentedBar>
  <SegmentedBarItem title="First" />
  <SegmentedBarItem title="Second" />
  <SegmentedBarItem title="Third" />
</SegmentedBar>
```

```tsx
<segmentedBar>
  <segmentedBarItem title="First" />
  <segmentedBarItem title="Second" />
  <segmentedBarItem title="Third" />
</segmentedBar>
```

```tsx
<segmentedbar>
  <segmentedbaritem title="First" />
  <segmentedbaritem title="Second" />
  <segmentedbaritem title="Third" />
</segmentedbar>
```

```svelte
<segmentedBar>
  <segmentedBarItem title="First" />
  <segmentedBarItem title="Second" />
  <segmentedBarItem title="Third" />
</segmentedBar>
```

```vue
<SegmentedBar>
  <SegmentedBarItem title="First" />
  <SegmentedBarItem title="Second" />
  <SegmentedBarItem title="Third" />
</SegmentedBar>
```

## Props [​](https://docs.nativescript.org/ui/segmented-bar\#props)

### items [​](https://docs.nativescript.org/ui/segmented-bar\#items)

```ts
items: SegmentedBarItem[]
```

An array of items to be displayed in the SegmentedBar.

### selectedIndex [​](https://docs.nativescript.org/ui/segmented-bar\#selectedindex)

```ts
selectedIndex: number
```

Gets or sets the index of the selected item.

### selectedBackgroundColor [​](https://docs.nativescript.org/ui/segmented-bar\#selectedbackgroundcolor)

```ts
selectedBackgroundColor: Color
```

Gets or sets the background color of the selected item.

To set the background color of the entire bar, use `backgroundColor`.

See [Color](https://docs.nativescript.org/api/class/Color).

### selectedTextColor [​](https://docs.nativescript.org/ui/segmented-bar\#selectedtextcolor)

```ts
selectedTextColor: Color
```

Gets or sets the text color of the selected item.

To set the text color of the entire bar, use `selectedTextColor`.

See [Color](https://docs.nativescript.org/api/class/Color).

### ...Inherited [​](https://docs.nativescript.org/ui/segmented-bar\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/SegmentedBar).

## SegmentedBarItem Props [​](https://docs.nativescript.org/ui/segmented-bar\#segmentedbaritem-props)

### title [​](https://docs.nativescript.org/ui/segmented-bar\#title)

```ts
title: string
```

Gets or sets the title of the SegmentedBarItem.

## Events [​](https://docs.nativescript.org/ui/segmented-bar\#events)

### selectedIndexChanged [​](https://docs.nativescript.org/ui/segmented-bar\#selectedindexchanged)

```ts
on('selectedIndexChanged', (args: EventData) => {
  const segmentedBar = args.object as SegmentedBar
  console.log('SegmentedBar index changed to:', segmentedBar.selectedIndex)
})
```

Emitted when an item in the SegmentedBar is tapped.

## Native component [​](https://docs.nativescript.org/ui/segmented-bar\#native-component)

- Android: [`android.widget.TabHost`](https://developer.android.com/reference/android/widget/TabHost.html)
- iOS: [`UISegmentedControl`](https://developer.apple.com/documentation/uikit/uisegmentedcontrol)

2. [Props](https://docs.nativescript.org/ui/segmented-bar#props)
1. [items](https://docs.nativescript.org/ui/segmented-bar#items)
2. [selectedIndex](https://docs.nativescript.org/ui/segmented-bar#selectedindex)
3. [selectedBackgroundColor](https://docs.nativescript.org/ui/segmented-bar#selectedbackgroundcolor)
4. [selectedTextColor](https://docs.nativescript.org/ui/segmented-bar#selectedtextcolor)
5. [...Inherited](https://docs.nativescript.org/ui/segmented-bar#inherited)
3. [SegmentedBarItem Props](https://docs.nativescript.org/ui/segmented-bar#segmentedbaritem-props)
1. [title](https://docs.nativescript.org/ui/segmented-bar#title)
4. [Events](https://docs.nativescript.org/ui/segmented-bar#events)
1. [selectedIndexChanged](https://docs.nativescript.org/ui/segmented-bar#selectedindexchanged)
5. [Native component](https://docs.nativescript.org/ui/segmented-bar#native-component)

## HtmlView Component


`<HtmlView>` is a UI component for rendering simple static HTML content.

TIP

For additional features and improved performance, consider using an alternative implementation like the [@nativescript-community/ui-label](https://github.com/nativescript-community/ui-label) from the community.

See also: [WebView](https://docs.nativescript.org/ui/web-view).

![](https://docs.nativescript.org/assets/HtmlView.682c4741.png)

![](https://docs.nativescript.org/assets/HtmlView.30a327cc.png)


```xml
<HtmlView html="{{ htmlString }}" />
```

```ts
const htmlString = `
<h1 style="color: black; font-family: ui-sans-serif, system-ui;">
  <span style="color: #65adf1;">Html</span>View
</h1>
`
```

HTMLTypeScript

```html
<HtmlView [html]="htmlString" />
```

```ts
htmlString = `
<h1 style="color: black; font-family: ui-sans-serif, system-ui;">
  <span style="color: #65adf1;">Html</span>View
</h1>
`
```

```tsx
<htmlView html={htmlString}></htmlView>
```

```tsx
<htmlview html={htmlString}></htmlview>
```

```svelte
<htmlView html={htmlString}></htmlView>
```

```vue
<HtmlView :html="htmlString"/>
```

## Props [​](https://docs.nativescript.org/ui/html-view\#props)

### html [​](https://docs.nativescript.org/ui/html-view\#html)

```ts
html: string
```

The HTML content to be shown.

### selectable [​](https://docs.nativescript.org/ui/html-view\#selectable)

```ts
selectable: boolean
```

Gets or sets a value indicating whether HtmlView content is selectable.

### ...Inherited [​](https://docs.nativescript.org/ui/html-view\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/HtmlView).

## Native component [​](https://docs.nativescript.org/ui/html-view\#native-component)

- Android: [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html)
- iOS: [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview)

2. [Props](https://docs.nativescript.org/ui/html-view#props)
1. [html](https://docs.nativescript.org/ui/html-view#html)
2. [selectable](https://docs.nativescript.org/ui/html-view#selectable)
3. [...Inherited](https://docs.nativescript.org/ui/html-view#inherited)
3. [Native component](https://docs.nativescript.org/ui/html-view#native-component)

## TextView UI Component


`<TextView>` is a UI component for multi-line text entry. When set to read-only, it can also be used to display multi-line text.

For single-line text input, see [TextField](https://docs.nativescript.org/ui/text-field).

![](https://docs.nativescript.org/assets/TextView.36119741.png)

![](https://docs.nativescript.org/assets/TextView.fc25c04f.png)


```xml
<TextView text="{{ text }}" />
```

```ts
const text = `TextView\nWith\nMultiple\nLines!`
```

HTMLTypeScript

```html
<TextView [text]="text" />
```

```ts
text = `TextView\nWith\nMultiple\nLines!`;
```

```tsx
<textView text={text} />
```

```tsx
<textview text={text} />
```

```svelte
<textView {text} />
```

```vue
<TextView :text="text" />
```

## Examples [​](https://docs.nativescript.org/ui/text-view\#examples)

### Formatting text inside a TextView [​](https://docs.nativescript.org/ui/text-view\#formatting-text-inside-a-textview)

If you need to style parts of the text, you can use a combination of a `FormattedString` and `Span` elements.

```xml
<TextView>
  <FormattedString>
    <Span text="This text has a " />
    <Span text="red " style="color: red" />
    <Span text="piece of text. " />
    <Span text="Also, this bit is italic, " fontStyle="italic" />
    <Span text="and this bit is bold." fontWeight="bold" />
  </FormattedString>
</TextView>
```

## Props [​](https://docs.nativescript.org/ui/text-view\#props)

### text [​](https://docs.nativescript.org/ui/text-view\#text)

```ts
text: string
```

Gets or sets the text of the TextView.

### hint [​](https://docs.nativescript.org/ui/text-view\#hint)

```ts
hint: string
```

Gets or sets the placeholder text for the TextView.

### editable [​](https://docs.nativescript.org/ui/text-view\#editable)

```ts
editable: boolean
```

When set to `false` the TextView is read-only.

Defaults to `true`.

### keyboardType [​](https://docs.nativescript.org/ui/text-view\#keyboardtype)

```ts
keyboardType: CoreTypes.KeyboardType | number // "datetime" | "email" | "integer" | "number" | "phone" | "url"
```

Gets or sets the keyboard type shown when editing this TextView.

On iOS, any valid `UIKeyboardType` number works, for example:

```ts
keyboardType = 8 // UIKeyboardType.DecimalPad
```

See [CoreTypes.KeyboardType](https://docs.nativescript.org/api/namespace/CoreTypes-KeyboardType), [UIKeyboardType](https://developer.apple.com/documentation/uikit/uikeyboardtype?language=objc).

### returnKeyType [​](https://docs.nativescript.org/ui/text-view\#returnkeytype)

```ts
returnKeyType: CoreTypes.ReturnKeyType // "done" | "go" | "next" | "search" | "send"
```

Gets or sets the label of the return key.

See [CoreTypes.ReturnKeyType](https://docs.nativescript.org/api/namespace/CoreTypes-ReturnKeyType).

### isEnabled [​](https://docs.nativescript.org/ui/text-view\#isenabled)

Allows disabling the TextView. A disabled TextView does not react to user gestures or input.

Default value is `true`.

### maxLines [​](https://docs.nativescript.org/ui/text-view\#maxlines)

```ts
maxLines: number
```

Limits input to the specified number of lines.

### autocorrect [​](https://docs.nativescript.org/ui/text-view\#autocorrect)

```ts
autocorrect: boolean
```

Enables or disables autocorrect.

### isWritingToolsActive 8.9+ [​](https://docs.nativescript.org/ui/text-view\#iswritingtoolsactive-8-9)

(iOS Only) Are Apple Intelligence writing tools active.

```ts
isWritingToolsActive: boolean
```

### enableWritingToolsEvents 8.9+ [​](https://docs.nativescript.org/ui/text-view\#enablewritingtoolsevents-8-9)

(iOS Only) Allow Apple Intelligence writing tools to emit text changes on each alteration instead of after the final change (default).

```ts
enableWritingToolsEvents: boolean
```

### iosWritingToolsBehavior 8.9+ [​](https://docs.nativescript.org/ui/text-view\#ioswritingtoolsbehavior-8-9)

(iOS Only) Behavior for Apple Intelligence Writing Tools.

```ts
iosWritingToolsBehavior: WritingToolsBehavior
```

Can be `Default`, `Complete`, `Limited` or `None`.

### iosWritingToolsAllowedInput 8.9+ [​](https://docs.nativescript.org/ui/text-view\#ioswritingtoolsallowedinput-8-9)

(iOS Only) Allowed input for Apple Intelligence Writing Tools.

```ts
iosWritingToolsAllowedInput: Array<WritingToolsAllowedInput>
```

Can be `Default`, `List`, `PlainText`, `RichText` or `Table`.

### ...Inherited [​](https://docs.nativescript.org/ui/text-view\#inherited)

For additional inherited properties not shown, refer to the [API Reference](https://docs.nativescript.org/api/class/TextView).

## Methods [​](https://docs.nativescript.org/ui/text-view\#methods)

### focus() [​](https://docs.nativescript.org/ui/text-view\#focus)

```ts
focus(): boolean
```

Focuses the TextView and returns `true` if the focus was succeessful.

### dismissSoftInput() [​](https://docs.nativescript.org/ui/text-view\#dismisssoftinput)

```ts
dismissSoftInput(): void
```

Hides the on-screen keyboard.

## Events [​](https://docs.nativescript.org/ui/text-view\#events)

### textChange [​](https://docs.nativescript.org/ui/text-view\#textchange)

```ts
on('textChange', (args: PropertyChangeData) => {
  const textView = args.object as TextView
  console.log('TextView text changed:', args.value)
})
```

Emitted when the input text changes.

Event data type: [PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData)

### returnPress [​](https://docs.nativescript.org/ui/text-view\#returnpress)

```ts
on('returnPress', (args: EventData) => {
  const textView = args.object as TextView
  console.log('TextView return key pressed.')
})
```

Emitted when the return key is pressed.

### focus [​](https://docs.nativescript.org/ui/text-view\#focus-1)

```ts
on('focus', (args: EventData) => {
  const textView = args.object as TextView
  console.log('TextView has been focused')
})
```

Emitted when the TextView gains focus.

### blur [​](https://docs.nativescript.org/ui/text-view\#blur)

```ts
on('blur', (args: EventData) => {
  const textView = args.object as TextView
  console.log('TextView has been blured')
})
```

Emitted when the TextView loses focus.

## Native component [​](https://docs.nativescript.org/ui/text-view\#native-component)

- Android: [`android.widget.EditText`](https://developer.android.com/reference/android/widget/EditText.html)
- iOS: [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview)

2. [Examples](https://docs.nativescript.org/ui/text-view#examples)
1. [Formatting text inside a TextView](https://docs.nativescript.org/ui/text-view#formatting-text-inside-a-textview)
3. [Props](https://docs.nativescript.org/ui/text-view#props)
01. [text](https://docs.nativescript.org/ui/text-view#text)
02. [hint](https://docs.nativescript.org/ui/text-view#hint)
03. [editable](https://docs.nativescript.org/ui/text-view#editable)
04. [keyboardType](https://docs.nativescript.org/ui/text-view#keyboardtype)
05. [returnKeyType](https://docs.nativescript.org/ui/text-view#returnkeytype)
06. [isEnabled](https://docs.nativescript.org/ui/text-view#isenabled)
07. [maxLines](https://docs.nativescript.org/ui/text-view#maxlines)
08. [autocorrect](https://docs.nativescript.org/ui/text-view#autocorrect)
09. [isWritingToolsActive 8.9+](https://docs.nativescript.org/ui/text-view#iswritingtoolsactive-8-9)
10. [enableWritingToolsEvents 8.9+](https://docs.nativescript.org/ui/text-view#enablewritingtoolsevents-8-9)
11. [iosWritingToolsBehavior 8.9+](https://docs.nativescript.org/ui/text-view#ioswritingtoolsbehavior-8-9)
12. [iosWritingToolsAllowedInput 8.9+](https://docs.nativescript.org/ui/text-view#ioswritingtoolsallowedinput-8-9)
13. [...Inherited](https://docs.nativescript.org/ui/text-view#inherited)
4. [Methods](https://docs.nativescript.org/ui/text-view#methods)
1. [focus()](https://docs.nativescript.org/ui/text-view#focus)
2. [dismissSoftInput()](https://docs.nativescript.org/ui/text-view#dismisssoftinput)
5. [Events](https://docs.nativescript.org/ui/text-view#events)
1. [textChange](https://docs.nativescript.org/ui/text-view#textchange)
2. [returnPress](https://docs.nativescript.org/ui/text-view#returnpress)
3. [focus](https://docs.nativescript.org/ui/text-view#focus-1)
4. [blur](https://docs.nativescript.org/ui/text-view#blur)
6. [Native component](https://docs.nativescript.org/ui/text-view#native-component)

## NativeScript ActionBar Guide


`<ActionBar>` is NativeScript’s abstraction over the Android [ActionBar](https://developer.android.com/training/appbar/) and iOS [NavigationBar](https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/). It represents a toolbar at the top of the activity window, and can have a title, application-level navigation, as well as other custom interactive items.

Views also part of the ActionBar abstraction:

- [ActionItem](https://docs.nativescript.org/ui/action-bar#action-item)
- [NavigationButton](https://docs.nativescript.org/ui/action-bar#navigation-button)

![](https://docs.nativescript.org/assets/ActionBar.14a4cad9.png)

![](https://docs.nativescript.org/assets/ActionBar.b88bf667.png)

```xml
<ActionBar title="MyApp" />
```

HTMLTypeScript

```html
<ActionBar title="ActionBar Title">
  <ActionItem (tap)="goBack()">
    <label text="<< Back      "></label>
  </ActionItem>
</ActionBar>
```

```ts
router = inject(RouterExtensions);

goBack() {
  this.router.back();
}
```

```tsx
<actionBar title="ActionBar" onTap={() => Frame.goBack()}></actionBar>
```

```tsx
import { Frame } from '@nativescript/core'

export const ActionBar = () => {
  function goBack() {
    Frame.goBack()
  }

  return (<>
    <actionbar title="ActionBar">
      <actionitem on:tap={goBack} text="<<Back"></actionitem>
    </actionbar>
    <gridlayout>
      <label>Main Content</label>
    </gridlayout>
  </>)
}
```

```svelte
<script lang="ts">
  import { Frame } from '@nativescript/core'

  function goBack() {
    Frame.goBack()
  }
</script>

<page>
  <actionBar title="ActionBar">
    <actionItem on:tap={goBack}>
      <label text="<< Back" class="font-bold text-lg" />
    </actionItem>
  </actionBar>

  <gridLayout>
    <contentView horizontalAlignment="center" verticalAlignment="center">
      <label>Main Content</label>
    </contentView>
  </gridLayout>
</page>
```

```vue
<script lang="ts" setup>
import { Frame } from "@nativescript/core";
function goBack() {
  Frame.goBack();
}
</script>

<template>
  <Page>
    <ActionBar title="ActionBar Title">
      <ActionItem @tap="goBack" >
        <Label text="<< Back"></Label>
      </ActionItem>
    </ActionBar>
    <GridLayout>
      <Label text="Main Content" verticalAlignment="center" horizontalAlignment="center"></Label>
    </GridLayout>
  </Page>
</template>
```

## Examples [​](https://docs.nativescript.org/ui/action-bar\#examples)

### ActionBar with a custom title view [​](https://docs.nativescript.org/ui/action-bar\#actionbar-with-a-custom-title-view)

```xml
<ActionBar>
  <GridLayout columns="auto, *" width="100%">
    <Image src="~/assets/icon.png" width="40" height="40" />
    <Label text="Custom Title" fontSize="24" />
  </GridLayout>
</ActionBar>
```

### ActionBar with an always visible Android icon [​](https://docs.nativescript.org/ui/action-bar\#actionbar-with-an-always-visible-android-icon)

```xml
<ActionBar
  title="ActionBar Title"
  android.icon="res://icon"
  android.iconVisibility="always"
/>
```

### Customizing the ActionBar [​](https://docs.nativescript.org/ui/action-bar\#customizing-the-actionbar)

```xml
<ActionBar title="MyApp">
  <!-- explicitly hide the back button -->
  <NavigationButton visibility="collapsed" />

  <!-- show a Font Awesome icon on the left -->
  <ActionItem
    position="left"
    icon="font://&#xf0a8;"
    class="fas"
    tap="goBack"
  />

  <!-- Show a custom ActionItem on the right -->
  <ActionItem ios.position="right">
    <GridLayout width="100">
      <Button text="Action Item" />
    </GridLayout>
  </ActionItem>
</ActionBar>
```

Note

On iOS, setting the `color` only affects the title and the action items.

On Android, `color` only affects the title. You can set the default color of the ActionItems by setting `actionMenuTextColor` in `App_Resources\Android\values\styles.xml`.

### Removing the border from the ActionBar [​](https://docs.nativescript.org/ui/action-bar\#removing-the-border-from-the-actionbar)

By default, a border is drawn at the bottom of the ActionBar. In addition to the border, on iOS a translucency filter is also applied over the ActionBar. To remove the border and the translucency, set `flat="true"`:

```xml
<ActionBar title="MyApp" flat="true" />
```

8.9+

You can alternatively use `iosShadow="false"` in the event you want to keep the translucency but remove the border.

```xml
<ActionBar title="MyApp" iosShadow="false" />
```

## Props [​](https://docs.nativescript.org/ui/action-bar\#props)

### title [​](https://docs.nativescript.org/ui/action-bar\#title)

```ts
title: string
```

Gets or sets the ActionBar title.

8.9+

On iOS, you can also enable prefersLargeTitles by setting `iosLargeTitle="true"`

```xml
<ActionBar title="MyApp" iosLargeTitle="true" />
```

### titleView [​](https://docs.nativescript.org/ui/action-bar\#titleview)

```ts
titleView: View
```

Replaces the title property with the custom view.

**Note**: this is the property set when defining a custom child view in xml (Unless an instance of ActionItem, or NavigationButton).

See [View](https://docs.nativescript.org/api/class/View).

### flat [​](https://docs.nativescript.org/ui/action-bar\#flat)

```ts
flat: boolean
```

Removes the border on Android and the translucency on iOS.

Defaults to `false`.

### navigationButton [​](https://docs.nativescript.org/ui/action-bar\#navigationbutton)

```ts
navigationButton: NavigationButton
```

Gets or sets the navigation button (back button).

See [NavigationButton](https://docs.nativescript.org/ui/action-bar#navigation-button).

### actionItems [​](https://docs.nativescript.org/ui/action-bar\#actionitems)

```ts
actionItems: ActionItems
```

Gets or sets the ActionItems.

See [ActionItem](https://docs.nativescript.org/ui/action-bar#action-item).

### iosIconRenderingMode [​](https://docs.nativescript.org/ui/action-bar\#iosiconrenderingmode)

```ts
actionBar.iosIconRenderingMode
```

Gets or set the [UIImage.RenderingMode](https://developer.apple.com/documentation/uikit/uiimage/renderingmode) of the ActionBar icons in iOS.

Available values:

- `automatic`
- `alwaysTemplate`
- `alwaysOriginal`

Defaults to `alwaysOriginal`.

## ActionItem [​](https://docs.nativescript.org/ui/action-bar\#action-item)

`<ActionItem>` is a UI component for adding action buttons to the ActionBar.

```xml
<ActionBar title="MyApp">
  <ActionItem
    ios.systemIcon="9" ios.position="left"
    android.systemIcon="ic_menu_share" android.position="actionBar" />
  <ActionItem
    ios.systemIcon="16" ios.position="right"
    text="delete" android.position="popup" />
</ActionBar>
```

## ActionItem Props [​](https://docs.nativescript.org/ui/action-bar\#actionitem-props)

### text [​](https://docs.nativescript.org/ui/action-bar\#text)

```ts
text: string
```

Gets or sets the text of the ActionItem.

### icon [​](https://docs.nativescript.org/ui/action-bar\#icon)

```ts
icon: string
```

Gets or sets the icon of the action item. Supports local images ( `~/`), resources ( `res://`) and fonts icons ( `font://`)

### ios.position [​](https://docs.nativescript.org/ui/action-bar\#ios-position)

```ts
ios.position: 'left' | 'right'
```

Sets the position of the ActionItem on iOS. **iOS only.**

Avaibable values:

- `left`: Puts the item on the left side of the ActionBar.
- `right`: Puts the item on the right side of the ActionBar.

Defaults to `left`.

### android.position [​](https://docs.nativescript.org/ui/action-bar\#android-position)

```ts
android.position: 'actionBar' | 'popup' | 'actionBarIfRoom'
```

Sets the position of the ActionItem on Android. **Android only.**

Avaibable values:

- `actionBar`: puts the item in the ActionBar. Action item can be rendered both as text or icon.
- `popup`: puts the item in the options menu. Items will be rendered as text.
- `actionBarIfRoom`: puts the item in the ActionBar if there is room for it. Otherwise, puts it in the options menu.

Defaults to `actionBar`.

### ios.systemIcon [​](https://docs.nativescript.org/ui/action-bar\#ios-systemicon)

```ts
ios.systemIcon: string
```

Sets the icon of the ActionItem using a [UIBarButton.SystemIcon](https://developer.apple.com/documentation/uikit/uibarbuttonsystemitem). **iOS only.**

### android.systemIcon [​](https://docs.nativescript.org/ui/action-bar\#android-systemicon)

```xml
android.systemIcon: string
```

Sets the icon of the ActionItem. For a list of system icons, refer to `R.drawable`. **Android only.**

See [R.drawable](https://developer.android.com/reference/android/R.drawable).

### actionBar [​](https://docs.nativescript.org/ui/action-bar\#actionbar)

```ts
actionBar: ActionBar
```

Gets the ActionBar that contains the ActionItem.

## NavigationButton [​](https://docs.nativescript.org/ui/action-bar\#navigation-button)

`<NavigationButton>` is a UI component providing an abstraction for the Android navigation button and the iOS back button.

```xml
<ActionBar title="MyApp">
  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" />
</ActionBar>
```

Platform specific behavior

**iOS Specific**

On iOS the default text of the NavigationButton is the title of the previous page and the back button is used explicitly for navigation. It navigates to the previous page and does not allow overriding this behavior. If you need to place a custom button on the left side of the `<ActionBar>` (e.g., to show a Drawer button), you can use an ActionItem with `ios.position="left"`.

**Android Specific**

On Android, you can't add text inside the NavigationButton. You can use the icon property to set an image (e.g., `~/images/nav-image.png` or `res:\\ic_nav`). You can use `android.systemIcon` to set one of the system icons available in Android. In this case, there is no default behavior for NavigationButton tap event, instead the passed-in callback will be called.

## NavigationButton Props [​](https://docs.nativescript.org/ui/action-bar\#navigationbutton-props)

### text [​](https://docs.nativescript.org/ui/action-bar\#text-1)

```ts
text: string
```

Sets the text of the back button. **iOS only.**

### android.systemIcon [​](https://docs.nativescript.org/ui/action-bar\#android-systemicon-1)

```ts
android.systemIcon: string
```

The icon to be shown in the button. You can specify any system icon whose name begins with the ic\_ prefix. For a complete list of the available icons, see the `R.drawable`. **Android only.**

See [R.drawable](https://developer.android.com/reference/android/R.drawable.html)

## Native component [​](https://docs.nativescript.org/ui/action-bar\#native-component)

### ActionBar [​](https://docs.nativescript.org/ui/action-bar\#actionbar-1)

- Android: [android.widget.Toolbar](https://developer.android.com/reference/android/widget/Toolbar.html)
- iOS: [UINavigationBar](https://developer.apple.com/documentation/uikit/uinavigationbar?language=objc)

### ActionItem [​](https://docs.nativescript.org/ui/action-bar\#actionitem)

- Android: [android.widget.Toolbar](https://developer.android.com/reference/android/widget/Toolbar.html)
- iOS: [UINavigationItem](https://developer.apple.com/documentation/uikit/uinavigationitem?language=objca)

### NavigationButton [​](https://docs.nativescript.org/ui/action-bar\#navigationbutton-1)

- Android: [android.widget.Toolbar](https://developer.android.com/reference/android/widget/Toolbar.html)
- iOS: [UINavigationItem](https://developer.apple.com/documentation/uikit/uinavigationitem?language=objca)

2. [Examples](https://docs.nativescript.org/ui/action-bar#examples)
1. [ActionBar with a custom title view](https://docs.nativescript.org/ui/action-bar#actionbar-with-a-custom-title-view)
2. [ActionBar with an always visible Android icon](https://docs.nativescript.org/ui/action-bar#actionbar-with-an-always-visible-android-icon)
3. [Customizing the ActionBar](https://docs.nativescript.org/ui/action-bar#customizing-the-actionbar)
4. [Removing the border from the ActionBar](https://docs.nativescript.org/ui/action-bar#removing-the-border-from-the-actionbar)
3. [Props](https://docs.nativescript.org/ui/action-bar#props)
1. [title](https://docs.nativescript.org/ui/action-bar#title)
2. [titleView](https://docs.nativescript.org/ui/action-bar#titleview)
3. [flat](https://docs.nativescript.org/ui/action-bar#flat)
4. [navigationButton](https://docs.nativescript.org/ui/action-bar#navigationbutton)
5. [actionItems](https://docs.nativescript.org/ui/action-bar#actionitems)
6. [iosIconRenderingMode](https://docs.nativescript.org/ui/action-bar#iosiconrenderingmode)
4. [ActionItem](https://docs.nativescript.org/ui/action-bar#action-item)
5. [ActionItem Props](https://docs.nativescript.org/ui/action-bar#actionitem-props)
1. [text](https://docs.nativescript.org/ui/action-bar#text)
2. [icon](https://docs.nativescript.org/ui/action-bar#icon)
3. [ios.position](https://docs.nativescript.org/ui/action-bar#ios-position)
4. [android.position](https://docs.nativescript.org/ui/action-bar#android-position)
5. [ios.systemIcon](https://docs.nativescript.org/ui/action-bar#ios-systemicon)
6. [android.systemIcon](https://docs.nativescript.org/ui/action-bar#android-systemicon)
7. [actionBar](https://docs.nativescript.org/ui/action-bar#actionbar)
6. [NavigationButton](https://docs.nativescript.org/ui/action-bar#navigation-button)
7. [NavigationButton Props](https://docs.nativescript.org/ui/action-bar#navigationbutton-props)
1. [text](https://docs.nativescript.org/ui/action-bar#text-1)
2. [android.systemIcon](https://docs.nativescript.org/ui/action-bar#android-systemicon-1)
8. [Native component](https://docs.nativescript.org/ui/action-bar#native-component)
1. [ActionBar](https://docs.nativescript.org/ui/action-bar#actionbar-1)
2. [ActionItem](https://docs.nativescript.org/ui/action-bar#actionitem)
3. [NavigationButton](https://docs.nativescript.org/ui/action-bar#navigationbutton-1)

## NativeScript ListView Component


`<ListView>` is a UI component that renders items in a vertically scrolling list, the template for the items can be defined via `itemTemplate` (or multiple templates via `itemTemplates` \- more on that below). The ListView only renders the visible items, as the user scrolls, new items render by reusing a no-longer-visible item's view—this is usually referred to as view-recycling.

TIP

For additional features and improved performance in certain scenarios, consider using an alternative implementation like the [CollectionView](https://github.com/nativescript-community/ui-collectionview) from the community.

![](https://docs.nativescript.org/assets/ListView.2ba2d9f4.png)

![](https://docs.nativescript.org/assets/ListView.3661babd.png)


```xml
<ListView items="{{ items }}">
  <ListView.itemTemplate>
    <GridLayout padding="16" columns="20, *">
      <ContentView width="20" height="20" borderRadius="20" backgroundColor="#65adf1" />
      <Label text="{{ title }}" col="1" textWrap="true" marginLeft="8" />
    </GridLayout>
  </ListView.itemTemplate>
</ListView>
```

```ts
const items = Array.from({ length: 100 }).map((_, i) => ({
  title: `Item ${i}`,
}))
```

HTMLTypeScript

```html
<ListView [items]="items">
  <ng-template let-item="item" let-i="index">
    <GridLayout>
      <label [text]="item.title"></label>
    </GridLayout>
  </ng-template>
</ListView>
```

```ts
items = Array.from({ length: 100 }).map((_, i) => ({
  title: `Item ${i}`,
}));
```

```tsx
export function ListViewCmp({ navigation }: HomeProps) {

  const items: Array<{ title: string }> = []
  for (let i = 0; i < 100; i++) {
    items.push({
      title: `Item ${i + 1}`,
    })
  }
  const cellFactory = (item: { title }) => {
    return <label text={item.title} />
  }
  const testItemTap = (args: ItemEventData) => {
    alert(args.index + ' - ' + items[args.index].title)
  }

  return (
    <frame>
      <page style={styles.container}>
        <actionBar title="ListView" onTap={() => Frame.goBack()}></actionBar>

        <gridLayout>
          <ListView
            items={items}
            cellFactory={cellFactory}
            onItemTap={testItemTap}
          ></ListView>
        </gridLayout>
      </page>
    </frame>
  )
}
```

```tsx
export const ListView = () => {
  const items = []
  for (let i = 0; i < 100; i++) {
    items.push({
      text: `Item ${i + 1}`,
    })
  }
  return (
    <>
      <actionbar title="ListView">
      </actionbar>
      <gridlayout>
        <list-view items={items}></list-view>
      </gridlayout>
    </>
  )
}
```

```svelte
<script lang="ts">
  import { Template } from 'svelte-native/components'

  const items = []
  for (let i = 0; i < 100; i++) {
    items.push({
      title: `Item ${i + 1}`,
    })
  }
</script>

<page>
  <actionBar title="ListView">
  </actionBar>

  <gridLayout>
    <listView {items}>
      <Template let:item>
        <stackLayout>
          <label>{item.title}</label>
        </stackLayout>
      </Template>
    </listView>
  </gridLayout>
</page>
```

```vue
<script lang="ts" setup>
  const items = [];
  for(let i = 0; i < 100; i++) {
    items.push({
      title: `Item ${i+1}`
    })
  }
</script>

<template>
  <Page>
    <ActionBar title="ListView Example">
    </ActionBar>
    <GridLayout>
      <ListView :items="items">
        <template #default="{ item }">
          <StackLayout>
            <Label :text="item.title" />
          </StackLayout>
        </template>
      </ListView>
    </GridLayout>
  </Page>
</template>
```

## Examples [​](https://docs.nativescript.org/ui/list-view\#examples)

### ListView with multiple itemTemplates [​](https://docs.nativescript.org/ui/list-view\#listview-with-multiple-itemtemplates)

Individual items can be rendered using a different template. For example, let's say our items can either be headings or items. In that case, we can define a template for them, and pass in an `itemTemplateSelector` function that will get called before rendering an item.

```xml
<ListView items="{{ items }}" itemTemplateSelector="{{ itemTemplateSelector }}">
  <ListView.itemTemplates>
    <template key="heading">
      <!-- template for headings -->
    </template>
    <template key="item">
      <!-- template for items -->
    </template>
  </ListView.itemTemplates>
</ListView>
```

```ts
// example item definition
type ItemType = {
  title: string
  type: 'heading' | 'item'
}

// called for each item in the list before rendering
function itemTemplateSelector(
  item: ItemType,
  index: number,
  items: Array<ItemType>
) {
  return item.type === 'heading' ? 'heading' : 'item'
}
```

## Props [​](https://docs.nativescript.org/ui/list-view\#props)

### items [​](https://docs.nativescript.org/ui/list-view\#items)

```ts
items: Array | ObservableArray
```

Gets or set the items of the `ListView`.

For static lists using an Array is fine, however for dynamically changed arrays it's recommended to use an ObservableArray to optimize re-rendering performance.

See [ObservableArray](https://docs.nativescript.org/api/class/ObservableArray).

### itemTemplateSelector [​](https://docs.nativescript.org/ui/list-view\#itemtemplateselector)

```ts
itemTemplateSelector: (
  item: T,
  index: number,
  items: Array | ObservableArray,
) => string
```

A function to be called when selecting the template for the item.

### itemTemplate [​](https://docs.nativescript.org/ui/list-view\#itemtemplate)

```ts
itemTemplate: KeyedTemplate
```

Gets or sets the default item template.

**Note**: this is usually set by the framwork (eg. `ListView.itemTemplate` via xml).

See [KeyedTemplate](https://docs.nativescript.org/api/interface/KeyedTemplate).

### itemTemplates [​](https://docs.nativescript.org/ui/list-view\#itemtemplates)

```ts
itemTemplates: KeyedTemplate[]
```

Gets or sets the available itemTemplates.

**Note**: this is usually set by the framwork (eg. `ListView.itemTemplates` via xml).

See [KeyedTemplate](https://docs.nativescript.org/api/interface/KeyedTemplate).

### separatorColor [​](https://docs.nativescript.org/ui/list-view\#separatorcolor)

```ts
separatorColor: Color
```

Gets or sets the color of the line separating each item.

TIP

Set the `separatorColor` to `transparent` to hide it, or use your own borders.

See [Color](https://docs.nativescript.org/api/class/Color).

### rowHeight [​](https://docs.nativescript.org/ui/list-view\#rowheight)

```ts
rowHeight: number
```

Gets or sets the row height of the ListView. Useful when your items have a fixed height, as the required calculations are greatly simplified and the rendering can be faster.

### iosEstimatedRowHeight [​](https://docs.nativescript.org/ui/list-view\#iosestimatedrowheight)

Gets or sets the estimated height of rows in the ListView. Default value: `44px`

### ...Inherited [​](https://docs.nativescript.org/ui/list-view\#inherited)

For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api/class/ListView).

## Methods [​](https://docs.nativescript.org/ui/list-view\#methods)

### refresh() [​](https://docs.nativescript.org/ui/list-view\#refresh)

```ts
listView.refresh()
```

Forces the ListView to reload all its items.

### scrollToIndex() [​](https://docs.nativescript.org/ui/list-view\#scrolltoindex)

```ts
listView.scrollToIndex(index: number)
```

Scrolls the item with the specified index into view.

### scrollToIndexAnimated() [​](https://docs.nativescript.org/ui/list-view\#scrolltoindexanimated)

```ts
listView.scrollToIndexAnimated(index: number)
```

Scrolls the item with the specified index into view with animation.

### isItemAtIndexVisible() [​](https://docs.nativescript.org/ui/list-view\#isitematindexvisible)

```ts
listView.isItemAtIndexVisible(index: number) // boolean
```

Checks if the item with the specified index is visible.

## Events [​](https://docs.nativescript.org/ui/list-view\#events)

### itemTap [​](https://docs.nativescript.org/ui/list-view\#itemtap)

```ts
on('itemTap', (args: ItemEventData) => {
  const listView = args.object as ListView
  console.log('Tapped index', args.index)
  console.log('Tapped item', listView.items[args.index])
})
```

Emitted when a user taps an item in the ListView.

See [ItemEventData](https://docs.nativescript.org/api/interface/ItemEventData).

### itemLoading [​](https://docs.nativescript.org/ui/list-view\#itemloading)

```ts
on('itemLoading', (args: ItemEventData) => {
  const listView = args.object as ListView
})
```

Emitted when the ListView is loading/recycling an item. `args.view` is set if the ListView is recycling an item, otherwise it's `undefined`.

**Note**: frameworks use this event to update the `args.view` with new data.

See [ItemEventData](https://docs.nativescript.org/api/interface/ItemEventData).

### loadMoreItems [​](https://docs.nativescript.org/ui/list-view\#loadmoreitems)

```ts
on('loadMoreItems', (args: EventData) => {
  const listView = args.object as ListView

  // example: add new items
  listView.items.push(newItems)
})
```

Emitted when the user reaches the end of the ListView. Useful for loading additional items (ie. infinite scroll).

## Native component [​](https://docs.nativescript.org/ui/list-view\#native-component)

- Android: [`android.widget.ListView`](https://developer.android.com/reference/android/widget/ListView.html)
- iOS: [`UITableView`](https://developer.apple.com/documentation/uikit/uitableview)

2. [Examples](https://docs.nativescript.org/ui/list-view#examples)
1. [ListView with multiple itemTemplates](https://docs.nativescript.org/ui/list-view#listview-with-multiple-itemtemplates)
3. [Props](https://docs.nativescript.org/ui/list-view#props)
1. [items](https://docs.nativescript.org/ui/list-view#items)
2. [itemTemplateSelector](https://docs.nativescript.org/ui/list-view#itemtemplateselector)
3. [itemTemplate](https://docs.nativescript.org/ui/list-view#itemtemplate)
4. [itemTemplates](https://docs.nativescript.org/ui/list-view#itemtemplates)
5. [separatorColor](https://docs.nativescript.org/ui/list-view#separatorcolor)
6. [rowHeight](https://docs.nativescript.org/ui/list-view#rowheight)
7. [iosEstimatedRowHeight](https://docs.nativescript.org/ui/list-view#iosestimatedrowheight)
8. [...Inherited](https://docs.nativescript.org/ui/list-view#inherited)
4. [Methods](https://docs.nativescript.org/ui/list-view#methods)
1. [refresh()](https://docs.nativescript.org/ui/list-view#refresh)
2. [scrollToIndex()](https://docs.nativescript.org/ui/list-view#scrolltoindex)
3. [scrollToIndexAnimated()](https://docs.nativescript.org/ui/list-view#scrolltoindexanimated)
4. [isItemAtIndexVisible()](https://docs.nativescript.org/ui/list-view#isitematindexvisible)
5. [Events](https://docs.nativescript.org/ui/list-view#events)
1. [itemTap](https://docs.nativescript.org/ui/list-view#itemtap)
2. [itemLoading](https://docs.nativescript.org/ui/list-view#itemloading)
3. [loadMoreItems](https://docs.nativescript.org/ui/list-view#loadmoreitems)
6. [Native component](https://docs.nativescript.org/ui/list-view#native-component)

## Modal Navigation Guide



## Showing a modal [​](https://docs.nativescript.org/guide/navigation/modals\#showing-a-modal)

To show a modal, call the [showModal](https://docs.nativescript.org/api/class/ViewCommon#showmodal) method on a [View](https://docs.nativescript.org/api/class/View) instance and pass it the path to the modal view file:

```xml
<Button text="Show a Modal" tap="onShowModal" />
```

```ts
import { EventData, View, ShowModalOptions } from '@nativescript/core'

export function onShowModal(args: EventData) {
  const view = args.object as View
  const options: ShowModalOptions = {
    // ...
  }
  view.showModal('details-page', options)
}
```

Note

If your modal does not appear when tapping the button, confirm you set the correct path and the modal page exists. `showModal` does not throw an error when the provided path doesn't exist.

## Closing a modal [​](https://docs.nativescript.org/guide/navigation/modals\#closing-a-modal)

To close a modal, call the `closeModal` method of any `View` from the modal.

For passing data back to the parent, see [Passing Data](https://docs.nativescript.org/guide/navigation/modals#passing-data).

```xml
<Button text="Close a Modal" tap="onCloseModal"/>
```

```ts
export function onCloseModal(args: EventData) {
  const view = args.object as View
  view.closeModal()
}
```

## Passing data [​](https://docs.nativescript.org/guide/navigation/modals\#passing-data)

Modals are often used for prompting the user for input, this requires passing data between the parent and the modal.

### From parent to modal [​](https://docs.nativescript.org/guide/navigation/modals\#from-parent-to-modal)

To pass data to the modal, provide it in the `context` field of the ShowModalOptions:

```ts
// main-page.ts
import { ShowModalOptions } from '@nativescript/core'

// optionally use strong types
import { ExampleModalContext } from './details-page'

const options: ShowModalOptions = {
  context: {
    name: 'John Doe',
  } as ExampleModalContext,
}

button.showModal('details-page', options)
```

In the modal page, listen to the `shownModally` event to access the `context`:

```xml
<!-- details-page.xml -->
<Page shownModally="onShownModally"/>
```

```ts
// details-page.ts
import { ShownModallyData } from '@nativescript/core'

// optional strong type for the context
export type ExampleModalContext = {
  name: string
}

export function onShownModally(args: ShownModallyData) {
  const context = args.context as ExampleModalContext
  console.log(context.name) // 'John Doe'
}
```

### From modal to parent [​](https://docs.nativescript.org/guide/navigation/modals\#from-modal-to-parent)

When closing a modal, you can optionally pass data back to the parent. To do so, provide a `closeCallback` option in the ShowModalOptions:

```ts
// main-page.ts

import { ShowModalOptions } from '@nativescript/core'

// optionally use strong types
import { ExampleModalContext, ExampleModalResult } from './details-page'

const options: ShowModalOptions = {
  context: {
    name: 'John Doe',
  } as ExampleModalContext,
  closeCallback(result?: ExampleModalResult) {
    if (result) {
      console.log(`Modal returned: ${result.newName}`) // 'Modal returned: Jane Doe'
      return
    }
    console.log('Modal was cancelled.')
  },
}

button.showModal('details-page', options)
```

In the modal page, listen to the `shownModally` event to access the `context`.

details-page.xmldetails-page.```tsxml
<Page shownModally="onShownModally">
  <StackLayout>
    <!-- ... -->
    <TextField text="{{ name }}" />
    <Button text="Change Name" tap="onChangeName"></Button>
    <Button text="Cancel" tap="onCancel"></Button>
  </StackLayout>
</Page>
```

```ts
import {
  fromObject,
  Page,
  Button,
  ShownModallyData,
  EventData,
} from '@nativescript/core'

// optional strong type for the context
export type ExampleModalContext = {
  name: string
}

export type ExampleModalResult = {
  newName: string
}

export function onShownModally(args: ShownModallyData) {
  const page = args.object as Page
  const incomingContext = args.context as ExampleModalContext

  const bindingContext = fromObject({
    ...incomingContext,
    onChangeName(args: EventData) {
      const button = args.object as Button
      button.closeModal({
        newName: bindingContext.name, // 'Jane Doe'
      } as ExampleModalResult)
    },
    onCancel(args: EventData) {
      const view = args.object as View
      view.closeModal()
    },
  })
  page.bindingContext = bindingContext
}
```

## Additional Resources [​](https://docs.nativescript.org/guide/navigation/modals\#additional-resources)

- [NativeScript XML Data Binding](https://docs.nativescript.org/guide/data-binding)
- [TextField](https://docs.nativescript.org/ui/text-field)

2. [Showing a modal](https://docs.nativescript.org/guide/navigation/modals#showing-a-modal)
3. [Closing a modal](https://docs.nativescript.org/guide/navigation/modals#closing-a-modal)
4. [Passing data](https://docs.nativescript.org/guide/navigation/modals#passing-data)
1. [From parent to modal](https://docs.nativescript.org/guide/navigation/modals#from-parent-to-modal)
2. [From modal to parent](https://docs.nativescript.org/guide/navigation/modals#from-modal-to-parent)
5. [Additional Resources](https://docs.nativescript.org/guide/navigation/modals#additional-resources)

## Adding Native Code



NativeScript provides direct access to all native APIs as well as cross-platform capabilities through [@nativescript/core](https://docs.nativescript.org/core/#nativescript-core), [third party plugins](https://market.nativescript.org/) or [@nativescript/\* plugins](https://docs.nativescript.org/plugins). Additionally, you can easily add custom native files directly to your project and use them immediately from TypeScript.

Ever since [NativeScript 8.8](https://blog.nativescript.org/nativescript-8-8-announcement/#ns-native), you can use a single command to add platform language files and have them auto configured ready to use with:

```bash
ns native add swift AwesomeClass
# Swift file 'nativescript-project/App_Resources/iOS/src/AwesomeClass.swift' generated successfully.

ns native add objective-c OtherAwesomeClass
# Module map 'nativescript-project/App_Resources/iOS/src/module.modulemap' has been updated with the header 'OtherAwesomeClass.h'.

ns native add kotlin com.company.AwesomeClass
# Kotlin file 'nativescript-project/App_Resources/Android/src/main/java/com/company/AwesomeClass.kt' generated successfully.

ns native add java com.company.OtherAwesomeClass
# Java file 'nativescript-project/App_Resources/Android/src/main/java/com/company/OtherAwesomeClass.java' generated successfully.
```

1. You can also manually add native code to [App\_Resources](https://docs.nativescript.org/project-structure/app-resources):
   - [Adding Java/Kotlin code to an application](https://docs.nativescript.org/guide/native-code/android)
   - [Adding ObjectiveC/Swift Code to an application](https://docs.nativescript.org/guide/native-code/ios)
2. Optionally [generate TypeScript types for the added APIs](https://docs.nativescript.org/guide/native-code/generate-typings)

Additionally, NativeScript also supports Jetpack Compose and SwiftUI through plugins.

1. [Jetpack Compose Plugin](https://docs.nativescript.org/plugins/jetpack-compose)
   - [Jetpack Compose Introduction and example](https://dev.to/valorsoftware/introduction-to-jetpack-compose-for-nativescript-54d7)
2. [SwiftUI Plugin](https://docs.nativescript.org/plugins/swift-ui)
   - [SwiftUI Introduction and example](https://dev.to/valorsoftware/introduction-to-swiftui-for-nativescript-4m1b)


## Progress Component

Represents a progress component.

## Summary [​](https://docs.nativescript.org/api/class/Progress\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/Progress#constructor)

#### Properties

[android](https://docs.nativescript.org/api/class/Progress#android)[ios](https://docs.nativescript.org/api/class/Progress#ios)[maxValue](https://docs.nativescript.org/api/class/Progress#maxvalue)[value](https://docs.nativescript.org/api/class/Progress#value)

## Constructors [​](https://docs.nativescript.org/api/class/Progress\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/Progress\#constructor)

```
new Progress(): Progress
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[Progress](https://docs.nativescript.org/api/class/Progress)_

## Properties [​](https://docs.nativescript.org/api/class/Progress\#properties)

### android [​](https://docs.nativescript.org/api/class/Progress\#android)

```
android: any
```

defined in [@nativescript/core/ui/progress/index.d.ts:11:1](https://unpkg.com/browse/@nativescript/core//ui/progress/index.d.ts#L11)

Gets the native \[android widget\](http://developer.android.com/reference/android/widget/ProgressBar.html) that represents the user interface for this component. Valid only when running on Android OS.

### ios [​](https://docs.nativescript.org/api/class/Progress\#ios)

```
ios: any
```

defined in [@nativescript/core/ui/progress/index.d.ts:16:1](https://unpkg.com/browse/@nativescript/core//ui/progress/index.d.ts#L16)

Gets the native iOS \[UIProgressView\](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIProgressView\_Class/) that represents the user interface for this component. Valid only when running on iOS.

### maxValue [​](https://docs.nativescript.org/api/class/Progress\#maxvalue)

```
maxValue: number
```

defined in [@nativescript/core/ui/progress/index.d.ts:26:1](https://unpkg.com/browse/@nativescript/core//ui/progress/index.d.ts#L26)

Gets or sets a progress max value.

### value [​](https://docs.nativescript.org/api/class/Progress\#value)

```
value: number
```

defined in [@nativescript/core/ui/progress/index.d.ts:21:1](https://unpkg.com/browse/@nativescript/core//ui/progress/index.d.ts#L21)

Gets or sets a progress current value.

2. [Summary](https://docs.nativescript.org/api/class/Progress#summary)
3. [Constructors](https://docs.nativescript.org/api/class/Progress#constructors)
1. [constructor](https://docs.nativescript.org/api/class/Progress#constructor)
4. [Properties](https://docs.nativescript.org/api/class/Progress#properties)
1. [android](https://docs.nativescript.org/api/class/Progress#android)
2. [ios](https://docs.nativescript.org/api/class/Progress#ios)
3. [maxValue](https://docs.nativescript.org/api/class/Progress#maxvalue)
4. [value](https://docs.nativescript.org/api/class/Progress#value)


## NativeScript PageBase Class




[ContentView](https://docs.nativescript.org/api/class/ContentView)

PageBase

[Page](https://docs.nativescript.org/api/class/Page)

## Summary [​](https://docs.nativescript.org/api/class/PageBase\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/PageBase#constructor)

#### Properties

[\_frame](https://docs.nativescript.org/api/class/PageBase#frame)[accessibilityAnnouncePageEnabled](https://docs.nativescript.org/api/class/PageBase#accessibilityannouncepageenabled)[actionBarHidden](https://docs.nativescript.org/api/class/PageBase#actionbarhidden)[backgroundSpanUnderStatusBar](https://docs.nativescript.org/api/class/PageBase#backgroundspanunderstatusbar)[enableSwipeBackNavigation](https://docs.nativescript.org/api/class/PageBase#enableswipebacknavigation)[hasActionBar](https://docs.nativescript.org/api/class/PageBase#hasactionbar)[navigatedFromEvent](https://docs.nativescript.org/api/class/PageBase#navigatedfromevent)[navigatedToEvent](https://docs.nativescript.org/api/class/PageBase#navigatedtoevent)[navigatingFromEvent](https://docs.nativescript.org/api/class/PageBase#navigatingfromevent)[navigatingToEvent](https://docs.nativescript.org/api/class/PageBase#navigatingtoevent)

155 properties inherited from ContentView

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancontentcreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeheighthorizontalAlignmentidignoreTouchAnimationiosiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftloadedEventmarginmarginBottommarginLeftmarginRightmarginTopminHeightminWidthmodalnativeViewProtectedopacityorderoriginXoriginYparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywidth

#### Accessors

[\_childrenCount](https://docs.nativescript.org/api/class/PageBase#childrencount)[actionBar](https://docs.nativescript.org/api/class/PageBase#actionbar)[androidStatusBarBackground](https://docs.nativescript.org/api/class/PageBase#androidstatusbarbackground)[frame](https://docs.nativescript.org/api/class/PageBase#frame)[navigationContext](https://docs.nativescript.org/api/class/PageBase#navigationcontext)[page](https://docs.nativescript.org/api/class/PageBase#page)[statusBarStyle](https://docs.nativescript.org/api/class/PageBase#statusbarstyle)

10 accessors inherited from ContentView

Click to expand

backgroundPositionbackgroundRepeatbackgroundSizeclassisLoadednativeViewparentNodestyletextTransformtypeName

#### Methods

[\_addChildFromBuilder](https://docs.nativescript.org/api/class/PageBase#addchildfrombuilder)[accessibilityScreenChanged](https://docs.nativescript.org/api/class/PageBase#accessibilityscreenchanged)[eachChildView](https://docs.nativescript.org/api/class/PageBase#eachchildview)[getKeyframeAnimationWithName](https://docs.nativescript.org/api/class/PageBase#getkeyframeanimationwithname)[onNavigatedFrom](https://docs.nativescript.org/api/class/PageBase#onnavigatedfrom)[onNavigatedTo](https://docs.nativescript.org/api/class/PageBase#onnavigatedto)[onNavigatingFrom](https://docs.nativescript.org/api/class/PageBase#onnavigatingfrom)[onNavigatingTo](https://docs.nativescript.org/api/class/PageBase#onnavigatingto)

111 methods inherited from ContentView

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewlayoutViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffonononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/PageBase\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/PageBase\#constructor)

```
new PageBase(): PageBase
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[PageBase](https://docs.nativescript.org/api/class/PageBase)_

## Properties [​](https://docs.nativescript.org/api/class/PageBase\#properties)

### \_frame [​](https://docs.nativescript.org/api/class/PageBase\#frame)

```
_frame: Frame
```

defined in [@nativescript/core/ui/page/page-common.d.ts:22:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L22)

### accessibilityAnnouncePageEnabled [​](https://docs.nativescript.org/api/class/PageBase\#accessibilityannouncepageenabled)

```
accessibilityAnnouncePageEnabled: boolean
```

defined in [@nativescript/core/ui/page/page-common.d.ts:27:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L27)

### actionBarHidden [​](https://docs.nativescript.org/api/class/PageBase\#actionbarhidden)

```
actionBarHidden: boolean
```

defined in [@nativescript/core/ui/page/page-common.d.ts:23:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L23)

### backgroundSpanUnderStatusBar [​](https://docs.nativescript.org/api/class/PageBase\#backgroundspanunderstatusbar)

```
backgroundSpanUnderStatusBar: boolean
```

defined in [@nativescript/core/ui/page/page-common.d.ts:25:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L25)

### enableSwipeBackNavigation [​](https://docs.nativescript.org/api/class/PageBase\#enableswipebacknavigation)

```
enableSwipeBackNavigation: boolean
```

defined in [@nativescript/core/ui/page/page-common.d.ts:24:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L24)

### hasActionBar [​](https://docs.nativescript.org/api/class/PageBase\#hasactionbar)

```
hasActionBar: boolean
```

defined in [@nativescript/core/ui/page/page-common.d.ts:26:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L26)

### navigatedFromEvent [​](https://docs.nativescript.org/api/class/PageBase\#navigatedfromevent)

Static

```
navigatedFromEvent: string
```

defined in [@nativescript/core/ui/page/page-common.d.ts:19:11](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L19)

### navigatedToEvent [​](https://docs.nativescript.org/api/class/PageBase\#navigatedtoevent)

Static

```
navigatedToEvent: string
```

defined in [@nativescript/core/ui/page/page-common.d.ts:17:11](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L17)

### navigatingFromEvent [​](https://docs.nativescript.org/api/class/PageBase\#navigatingfromevent)

Static

```
navigatingFromEvent: string
```

defined in [@nativescript/core/ui/page/page-common.d.ts:18:11](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L18)

### navigatingToEvent [​](https://docs.nativescript.org/api/class/PageBase\#navigatingtoevent)

Static

```
navigatingToEvent: string
```

defined in [@nativescript/core/ui/page/page-common.d.ts:16:11](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L16)

## Accessors [​](https://docs.nativescript.org/api/class/PageBase\#accessors)

### \_childrenCount [​](https://docs.nativescript.org/api/class/PageBase\#childrencount)

```
get _childrenCount(): number
```

defined in [@nativescript/core/ui/page/page-common.d.ts:45:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L45)

Returns _number_

### actionBar [​](https://docs.nativescript.org/api/class/PageBase\#actionbar)

```
get actionBar(): ActionBar
```

defined in [@nativescript/core/ui/page/page-common.d.ts:29:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L29)

Returns _[ActionBar](https://docs.nativescript.org/api/class/ActionBar)_

### androidStatusBarBackground [​](https://docs.nativescript.org/api/class/PageBase\#androidstatusbarbackground)

```
get androidStatusBarBackground(): Color
```

defined in [@nativescript/core/ui/page/page-common.d.ts:33:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L33)

Returns _[Color](https://docs.nativescript.org/api/class/Color)_

### frame [​](https://docs.nativescript.org/api/class/PageBase\#frame-1)

```
get frame(): Frame
```

defined in [@nativescript/core/ui/page/page-common.d.ts:38:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L38)

Returns _[Frame](https://docs.nativescript.org/api/class/Frame)_

### navigationContext [​](https://docs.nativescript.org/api/class/PageBase\#navigationcontext)

```
get navigationContext(): any
```

defined in [@nativescript/core/ui/page/page-common.d.ts:28:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L28)

Returns _any_

### page [​](https://docs.nativescript.org/api/class/PageBase\#page)

```
get page(): Page
```

defined in [@nativescript/core/ui/page/page-common.d.ts:35:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L35)

Returns _[Page](https://docs.nativescript.org/api/class/Page)_

### statusBarStyle [​](https://docs.nativescript.org/api/class/PageBase\#statusbarstyle)

```
get statusBarStyle(): "dark" | "light"
```

defined in [@nativescript/core/ui/page/page-common.d.ts:31:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L31)

Returns _"dark" \| "light"_

## Methods [​](https://docs.nativescript.org/api/class/PageBase\#methods)

### \_addChildFromBuilder [​](https://docs.nativescript.org/api/class/PageBase\#addchildfrombuilder)

```
_addChildFromBuilder(name: string, value: any): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:36:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L36)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |
| `value` | `` | `any` |

Returns _void_

### accessibilityScreenChanged [​](https://docs.nativescript.org/api/class/PageBase\#accessibilityscreenchanged)

```
accessibilityScreenChanged(refocus?: boolean): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:46:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L46)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `refocus` | `` | `boolean` |

Returns _void_

### eachChildView [​](https://docs.nativescript.org/api/class/PageBase\#eachchildview)

```
eachChildView(callback: (child: View) => boolean): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:44:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L44)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `callback` | `` | `(child: View) => boolean` |

Returns _void_

### getKeyframeAnimationWithName [​](https://docs.nativescript.org/api/class/PageBase\#getkeyframeanimationwithname)

```
getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo
```

defined in [@nativescript/core/ui/page/page-common.d.ts:37:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L37)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `animationName` | `` | `string` |

Returns _[KeyframeAnimationInfo](https://docs.nativescript.org/api/class/KeyframeAnimationInfo)_

### onNavigatedFrom [​](https://docs.nativescript.org/api/class/PageBase\#onnavigatedfrom)

```
onNavigatedFrom(isBackNavigation: boolean): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:43:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L43)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `isBackNavigation` | `` | `boolean` |

Returns _void_

### onNavigatedTo [​](https://docs.nativescript.org/api/class/PageBase\#onnavigatedto)

```
onNavigatedTo(isBackNavigation: boolean): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:41:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L41)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `isBackNavigation` | `` | `boolean` |

Returns _void_

### onNavigatingFrom [​](https://docs.nativescript.org/api/class/PageBase\#onnavigatingfrom)

```
onNavigatingFrom(isBackNavigation: boolean): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:42:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L42)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `isBackNavigation` | `` | `boolean` |

Returns _void_

### onNavigatingTo [​](https://docs.nativescript.org/api/class/PageBase\#onnavigatingto)

```
onNavigatingTo(
  context: any,
  isBackNavigation: boolean,
  bindingContext?: any
): void
```

defined in [@nativescript/core/ui/page/page-common.d.ts:40:4](https://unpkg.com/browse/@nativescript/core//ui/page/page-common.d.ts#L40)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `context` | `` | `any` |
| `isBackNavigation` | `` | `boolean` |
| `bindingContext` | `` | `any` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/PageBase#summary)
3. [Constructors](https://docs.nativescript.org/api/class/PageBase#constructors)
1. [constructor](https://docs.nativescript.org/api/class/PageBase#constructor)
4. [Properties](https://docs.nativescript.org/api/class/PageBase#properties)
01. [\_frame](https://docs.nativescript.org/api/class/PageBase#frame)
02. [accessibilityAnnouncePageEnabled](https://docs.nativescript.org/api/class/PageBase#accessibilityannouncepageenabled)
03. [actionBarHidden](https://docs.nativescript.org/api/class/PageBase#actionbarhidden)
04. [backgroundSpanUnderStatusBar](https://docs.nativescript.org/api/class/PageBase#backgroundspanunderstatusbar)
05. [enableSwipeBackNavigation](https://docs.nativescript.org/api/class/PageBase#enableswipebacknavigation)
06. [hasActionBar](https://docs.nativescript.org/api/class/PageBase#hasactionbar)
07. [navigatedFromEvent](https://docs.nativescript.org/api/class/PageBase#navigatedfromevent)
08. [navigatedToEvent](https://docs.nativescript.org/api/class/PageBase#navigatedtoevent)
09. [navigatingFromEvent](https://docs.nativescript.org/api/class/PageBase#navigatingfromevent)
10. [navigatingToEvent](https://docs.nativescript.org/api/class/PageBase#navigatingtoevent)
5. [Accessors](https://docs.nativescript.org/api/class/PageBase#accessors)
1. [\_childrenCount](https://docs.nativescript.org/api/class/PageBase#childrencount)
2. [actionBar](https://docs.nativescript.org/api/class/PageBase#actionbar)
3. [androidStatusBarBackground](https://docs.nativescript.org/api/class/PageBase#androidstatusbarbackground)
4. [frame](https://docs.nativescript.org/api/class/PageBase#frame-1)
5. [navigationContext](https://docs.nativescript.org/api/class/PageBase#navigationcontext)
6. [page](https://docs.nativescript.org/api/class/PageBase#page)
7. [statusBarStyle](https://docs.nativescript.org/api/class/PageBase#statusbarstyle)
6. [Methods](https://docs.nativescript.org/api/class/PageBase#methods)
1. [\_addChildFromBuilder](https://docs.nativescript.org/api/class/PageBase#addchildfrombuilder)
2. [accessibilityScreenChanged](https://docs.nativescript.org/api/class/PageBase#accessibilityscreenchanged)
3. [eachChildView](https://docs.nativescript.org/api/class/PageBase#eachchildview)
4. [getKeyframeAnimationWithName](https://docs.nativescript.org/api/class/PageBase#getkeyframeanimationwithname)
5. [onNavigatedFrom](https://docs.nativescript.org/api/class/PageBase#onnavigatedfrom)
6. [onNavigatedTo](https://docs.nativescript.org/api/class/PageBase#onnavigatedto)
7. [onNavigatingFrom](https://docs.nativescript.org/api/class/PageBase#onnavigatingfrom)
8. [onNavigatingTo](https://docs.nativescript.org/api/class/PageBase#onnavigatingto)


## LayoutBase Class




[CustomLayoutView](https://docs.nativescript.org/api/class/CustomLayoutView)

LayoutBase

[ProxyViewContainer](https://docs.nativescript.org/api/class/ProxyViewContainer) [AbsoluteLayout](https://docs.nativescript.org/api/class/AbsoluteLayout) [DockLayout](https://docs.nativescript.org/api/class/DockLayout) [FlexboxLayout](https://docs.nativescript.org/api/class/FlexboxLayout) [GridLayout](https://docs.nativescript.org/api/class/GridLayout) [StackLayout](https://docs.nativescript.org/api/class/StackLayout) [WrapLayout](https://docs.nativescript.org/api/class/WrapLayout)

Base class for all views that supports children positioning.

## Summary [​](https://docs.nativescript.org/api/class/LayoutBase\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/LayoutBase#constructor)

#### Properties

[clipToBounds](https://docs.nativescript.org/api/class/LayoutBase#cliptobounds)[isPassThroughParentEnabled](https://docs.nativescript.org/api/class/LayoutBase#ispassthroughparentenabled)[padding](https://docs.nativescript.org/api/class/LayoutBase#padding)[paddingBottom](https://docs.nativescript.org/api/class/LayoutBase#paddingbottom)[paddingLeft](https://docs.nativescript.org/api/class/LayoutBase#paddingleft)[paddingRight](https://docs.nativescript.org/api/class/LayoutBase#paddingright)[paddingTop](https://docs.nativescript.org/api/class/LayoutBase#paddingtop)

154 properties inherited from CustomLayoutView

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeheighthorizontalAlignmentidignoreTouchAnimationiosiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftloadedEventmarginmarginBottommarginLeftmarginRightmarginTopminHeightminWidthmodalnativeViewProtectedopacityorderoriginXoriginYparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywidth

#### Methods

[\_registerLayoutChild](https://docs.nativescript.org/api/class/LayoutBase#registerlayoutchild)[\_unregisterLayoutChild](https://docs.nativescript.org/api/class/LayoutBase#unregisterlayoutchild)[addChild](https://docs.nativescript.org/api/class/LayoutBase#addchild)[eachLayoutChild](https://docs.nativescript.org/api/class/LayoutBase#eachlayoutchild)[getChildAt](https://docs.nativescript.org/api/class/LayoutBase#getchildat)[getChildIndex](https://docs.nativescript.org/api/class/LayoutBase#getchildindex)[getChildrenCount](https://docs.nativescript.org/api/class/LayoutBase#getchildrencount)[insertChild](https://docs.nativescript.org/api/class/LayoutBase#insertchild)[removeChild](https://docs.nativescript.org/api/class/LayoutBase#removechild)[removeChildren](https://docs.nativescript.org/api/class/LayoutBase#removechildren)

112 methods inherited from CustomLayoutView

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildeachChildViewensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffonononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/LayoutBase\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/LayoutBase\#constructor)

```
new LayoutBase(): LayoutBase
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[LayoutBase](https://docs.nativescript.org/api/class/LayoutBase)_

## Properties [​](https://docs.nativescript.org/api/class/LayoutBase\#properties)

### clipToBounds [​](https://docs.nativescript.org/api/class/LayoutBase\#cliptobounds)

```
clipToBounds: boolean
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:94:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L94)

Gets or sets a value indicating whether to clip the content of this layout.

### isPassThroughParentEnabled [​](https://docs.nativescript.org/api/class/LayoutBase\#ispassthroughparentenabled)

```
isPassThroughParentEnabled: boolean
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:101:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L101)

Gets or sets a value indicating whether touch event should pass through to a parent view of the
layout container in case an interactive child view did not handle it.
Default value of this property is false. This does not affect the appearance of the view.

### padding [​](https://docs.nativescript.org/api/class/LayoutBase\#padding)

```
padding: string | number | LengthDipUnit | LengthPxUnit
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:69:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L69)

Gets or sets padding style property.

### paddingBottom [​](https://docs.nativescript.org/api/class/LayoutBase\#paddingbottom)

```
paddingBottom: LengthType
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:74:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L74)

Specify the bottom padding of this layout.

### paddingLeft [​](https://docs.nativescript.org/api/class/LayoutBase\#paddingleft)

```
paddingLeft: LengthType
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:79:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L79)

Specify the left padding of this layout.

### paddingRight [​](https://docs.nativescript.org/api/class/LayoutBase\#paddingright)

```
paddingRight: LengthType
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:84:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L84)

Specify the right padding of this layout.

### paddingTop [​](https://docs.nativescript.org/api/class/LayoutBase\#paddingtop)

```
paddingTop: LengthType
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:89:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L89)

Specify the top padding of this layout.

## Methods [​](https://docs.nativescript.org/api/class/LayoutBase\#methods)

### \_registerLayoutChild [​](https://docs.nativescript.org/api/class/LayoutBase\#registerlayoutchild)

```
_registerLayoutChild(child: View): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:53:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L53)

INTERNAL. Used by the layout system.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |

Returns _void_

### \_unregisterLayoutChild [​](https://docs.nativescript.org/api/class/LayoutBase\#unregisterlayoutchild)

```
_unregisterLayoutChild(child: View): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:58:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L58)

INTERNAL. Used by the layout system.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |

Returns _void_

### addChild [​](https://docs.nativescript.org/api/class/LayoutBase\#addchild)

```
addChild(view: View): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:30:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L30)

Adds the view to children array.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `view` | `` | `View`<br>The view to be added to the end of the children array. |

Returns _void_

### eachLayoutChild [​](https://docs.nativescript.org/api/class/LayoutBase\#eachlayoutchild)

```
eachLayoutChild(callback: (child: View, isLast: boolean) => void): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:64:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L64)

Calls the callback for each child that should be laid out.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `callback` | `` | `(child: View, isLast: boolean) => void`<br>The callback |

Returns _void_

### getChildAt [​](https://docs.nativescript.org/api/class/LayoutBase\#getchildat)

```
getChildAt(index: number): View
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:18:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L18)

Returns the view at the specified position.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `index` | `` | `number`<br>The position at which to get the child from. |

Returns _[View](https://docs.nativescript.org/api/class/View)_

### getChildIndex [​](https://docs.nativescript.org/api/class/LayoutBase\#getchildindex)

```
getChildIndex(child: View): number
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:24:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L24)

Returns the position of the child view

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View`<br>The child view that we are looking for. |

Returns _number_

### getChildrenCount [​](https://docs.nativescript.org/api/class/LayoutBase\#getchildrencount)

```
getChildrenCount(): number
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:12:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L12)

Returns the number of children in this Layout.

Returns _number_

### insertChild [​](https://docs.nativescript.org/api/class/LayoutBase\#insertchild)

```
insertChild(child: View, atIndex: number): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:37:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L37)

Inserts the view to children array at the specified index.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |
| `atIndex` | `` | `number`<br>The insertion index. |

Returns _void_

### removeChild [​](https://docs.nativescript.org/api/class/LayoutBase\#removechild)

```
removeChild(view: View): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:43:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L43)

Removes the specified view from the children array.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `view` | `` | `View`<br>The view to remove from the children array. |

Returns _void_

### removeChildren [​](https://docs.nativescript.org/api/class/LayoutBase\#removechildren)

```
removeChildren(): void
```

defined in [@nativescript/core/ui/layouts/layout-base.d.ts:48:1](https://unpkg.com/browse/@nativescript/core//ui/layouts/layout-base.d.ts#L48)

Removes all views in this layout.

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/LayoutBase#summary)
3. [Constructors](https://docs.nativescript.org/api/class/LayoutBase#constructors)
1. [constructor](https://docs.nativescript.org/api/class/LayoutBase#constructor)
4. [Properties](https://docs.nativescript.org/api/class/LayoutBase#properties)
1. [clipToBounds](https://docs.nativescript.org/api/class/LayoutBase#cliptobounds)
2. [isPassThroughParentEnabled](https://docs.nativescript.org/api/class/LayoutBase#ispassthroughparentenabled)
3. [padding](https://docs.nativescript.org/api/class/LayoutBase#padding)
4. [paddingBottom](https://docs.nativescript.org/api/class/LayoutBase#paddingbottom)
5. [paddingLeft](https://docs.nativescript.org/api/class/LayoutBase#paddingleft)
6. [paddingRight](https://docs.nativescript.org/api/class/LayoutBase#paddingright)
7. [paddingTop](https://docs.nativescript.org/api/class/LayoutBase#paddingtop)
5. [Methods](https://docs.nativescript.org/api/class/LayoutBase#methods)
01. [\_registerLayoutChild](https://docs.nativescript.org/api/class/LayoutBase#registerlayoutchild)
02. [\_unregisterLayoutChild](https://docs.nativescript.org/api/class/LayoutBase#unregisterlayoutchild)
03. [addChild](https://docs.nativescript.org/api/class/LayoutBase#addchild)
04. [eachLayoutChild](https://docs.nativescript.org/api/class/LayoutBase#eachlayoutchild)
05. [getChildAt](https://docs.nativescript.org/api/class/LayoutBase#getchildat)
06. [getChildIndex](https://docs.nativescript.org/api/class/LayoutBase#getchildindex)
07. [getChildrenCount](https://docs.nativescript.org/api/class/LayoutBase#getchildrencount)
08. [insertChild](https://docs.nativescript.org/api/class/LayoutBase#insertchild)
09. [removeChild](https://docs.nativescript.org/api/class/LayoutBase#removechild)
10. [removeChildren](https://docs.nativescript.org/api/class/LayoutBase#removechildren)


## Inherited CSS Property




[CssProperty<T, U>](https://docs.nativescript.org/api/class/CssProperty)

InheritedCssProperty

## Summary [​](https://docs.nativescript.org/api/class/InheritedCssProperty\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/InheritedCssProperty#constructor)

#### Properties

[setInheritedValue](https://docs.nativescript.org/api/class/InheritedCssProperty#setinheritedvalue)

13 properties inherited from CssProperty

Click to expand

cssLocalNamecssNamecssValueDescriptordefaultValuedefaultValueKeygetDefaultisStylePropertykeylocalValueDescriptornameoverrideHandlerssetNativesourceKey

## Constructors [​](https://docs.nativescript.org/api/class/InheritedCssProperty\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/InheritedCssProperty\#constructor)

```
new InheritedCssProperty<T, U>(options: CssPropertyOptions<T, U>): InheritedCssProperty<T, U>
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:119:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L119)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `CssPropertyOptions<T, U>` |

Returns _[InheritedCssProperty](https://docs.nativescript.org/api/class/InheritedCssProperty) <T, U>_

## Properties [​](https://docs.nativescript.org/api/class/InheritedCssProperty\#properties)

### setInheritedValue [​](https://docs.nativescript.org/api/class/InheritedCssProperty\#setinheritedvalue)

```
setInheritedValue: (value: U) => void
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:118:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L118)

2. [Summary](https://docs.nativescript.org/api/class/InheritedCssProperty#summary)
3. [Constructors](https://docs.nativescript.org/api/class/InheritedCssProperty#constructors)
1. [constructor](https://docs.nativescript.org/api/class/InheritedCssProperty#constructor)
4. [Properties](https://docs.nativescript.org/api/class/InheritedCssProperty#properties)
1. [setInheritedValue](https://docs.nativescript.org/api/class/InheritedCssProperty#setinheritedvalue)

## ContentView Class Overview




[CustomLayoutView](https://docs.nativescript.org/api/class/CustomLayoutView)

ContentView

[PageBase](https://docs.nativescript.org/api/class/PageBase) [ScrollView](https://docs.nativescript.org/api/class/ScrollView)

## Summary [​](https://docs.nativescript.org/api/class/ContentView\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ContentView#constructor)

#### Properties

[content](https://docs.nativescript.org/api/class/ContentView#content)

154 properties inherited from CustomLayoutView

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeheighthorizontalAlignmentidignoreTouchAnimationiosiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftloadedEventmarginmarginBottommarginLeftmarginRightmarginTopminHeightminWidthmodalnativeViewProtectedopacityorderoriginXoriginYparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywidth

#### Methods

[\_addChildFromBuilder](https://docs.nativescript.org/api/class/ContentView#addchildfrombuilder)[layoutView](https://docs.nativescript.org/api/class/ContentView#layoutview)

112 methods inherited from CustomLayoutView

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildeachChildViewensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffonononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/ContentView\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ContentView\#constructor)

```
new ContentView(): ContentView
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[ContentView](https://docs.nativescript.org/api/class/ContentView)_

## Properties [​](https://docs.nativescript.org/api/class/ContentView\#properties)

### content [​](https://docs.nativescript.org/api/class/ContentView\#content)

```
content: View
```

defined in [@nativescript/core/ui/content-view/index.d.ts:4:1](https://unpkg.com/browse/@nativescript/core//ui/content-view/index.d.ts#L4)

## Methods [​](https://docs.nativescript.org/api/class/ContentView\#methods)

### \_addChildFromBuilder [​](https://docs.nativescript.org/api/class/ContentView\#addchildfrombuilder)

```
_addChildFromBuilder(name: string, value: any): void
```

defined in [@nativescript/core/ui/content-view/index.d.ts:6:1](https://unpkg.com/browse/@nativescript/core//ui/content-view/index.d.ts#L6)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |
| `value` | `` | `any` |

Returns _void_

### layoutView [​](https://docs.nativescript.org/api/class/ContentView\#layoutview)

```
layoutView(): View
```

defined in [@nativescript/core/ui/content-view/index.d.ts:5:1](https://unpkg.com/browse/@nativescript/core//ui/content-view/index.d.ts#L5)

Returns _[View](https://docs.nativescript.org/api/class/View)_

2. [Summary](https://docs.nativescript.org/api/class/ContentView#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ContentView#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ContentView#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ContentView#properties)
1. [content](https://docs.nativescript.org/api/class/ContentView#content)
5. [Methods](https://docs.nativescript.org/api/class/ContentView#methods)
1. [\_addChildFromBuilder](https://docs.nativescript.org/api/class/ContentView#addchildfrombuilder)
2. [layoutView](https://docs.nativescript.org/api/class/ContentView#layoutview)


## CssProperty Class Overview




CssProperty

[InheritedCssProperty](https://docs.nativescript.org/api/class/InheritedCssProperty)

## Summary [​](https://docs.nativescript.org/api/class/CssProperty\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/CssProperty#constructor)

#### Properties

[cssLocalName](https://docs.nativescript.org/api/class/CssProperty#csslocalname)[cssName](https://docs.nativescript.org/api/class/CssProperty#cssname)[cssValueDescriptor](https://docs.nativescript.org/api/class/CssProperty#cssvaluedescriptor)[defaultValue](https://docs.nativescript.org/api/class/CssProperty#defaultvalue)[defaultValueKey](https://docs.nativescript.org/api/class/CssProperty#defaultvaluekey)[getDefault](https://docs.nativescript.org/api/class/CssProperty#getdefault)[isStyleProperty](https://docs.nativescript.org/api/class/CssProperty#isstyleproperty)[key](https://docs.nativescript.org/api/class/CssProperty#key)[localValueDescriptor](https://docs.nativescript.org/api/class/CssProperty#localvaluedescriptor)[name](https://docs.nativescript.org/api/class/CssProperty#name)[overrideHandlers](https://docs.nativescript.org/api/class/CssProperty#overridehandlers)[setNative](https://docs.nativescript.org/api/class/CssProperty#setnative)[sourceKey](https://docs.nativescript.org/api/class/CssProperty#sourcekey)

#### Methods

[isSet](https://docs.nativescript.org/api/class/CssProperty#isset)[register](https://docs.nativescript.org/api/class/CssProperty#register)

## Constructors [​](https://docs.nativescript.org/api/class/CssProperty\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/CssProperty\#constructor)

```
new CssProperty<T, U>(options: CssPropertyOptions<T, U>): CssProperty<T, U>
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:88:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L88)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `CssPropertyOptions<T, U>` |

Returns _[CssProperty](https://docs.nativescript.org/api/class/CssProperty) <T, U>_

## Properties [​](https://docs.nativescript.org/api/class/CssProperty\#properties)

### cssLocalName [​](https://docs.nativescript.org/api/class/CssProperty\#csslocalname)

Readonly

```
cssLocalName: string
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:77:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L77)

### cssName [​](https://docs.nativescript.org/api/class/CssProperty\#cssname)

Readonly

```
cssName: string
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:76:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L76)

### cssValueDescriptor [​](https://docs.nativescript.org/api/class/CssProperty\#cssvaluedescriptor)

ProtectedReadonly

```
cssValueDescriptor: PropertyDescriptor
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:78:23](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L78)

### defaultValue [​](https://docs.nativescript.org/api/class/CssProperty\#defaultvalue)

Readonly

```
defaultValue: U
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:86:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L86)

### defaultValueKey [​](https://docs.nativescript.org/api/class/CssProperty\#defaultvaluekey)

Readonly

```
defaultValueKey: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:85:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L85)

### getDefault [​](https://docs.nativescript.org/api/class/CssProperty\#getdefault)

Readonly

```
getDefault: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:82:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L82)

### isStyleProperty [​](https://docs.nativescript.org/api/class/CssProperty\#isstyleproperty)

```
isStyleProperty: boolean
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:80:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L80)

### key [​](https://docs.nativescript.org/api/class/CssProperty\#key)

Readonly

```
key: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:81:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L81)

### localValueDescriptor [​](https://docs.nativescript.org/api/class/CssProperty\#localvaluedescriptor)

ProtectedReadonly

```
localValueDescriptor: PropertyDescriptor
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:79:23](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L79)

### name [​](https://docs.nativescript.org/api/class/CssProperty\#name)

Readonly

```
name: string
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:75:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L75)

### overrideHandlers [​](https://docs.nativescript.org/api/class/CssProperty\#overridehandlers)

```
overrideHandlers: (options: CssPropertyOptions&lt;T, U&gt;) => void
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:87:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L87)

### setNative [​](https://docs.nativescript.org/api/class/CssProperty\#setnative)

Readonly

```
setNative: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:83:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L83)

### sourceKey [​](https://docs.nativescript.org/api/class/CssProperty\#sourcekey)

Readonly

```
sourceKey: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:84:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L84)

## Methods [​](https://docs.nativescript.org/api/class/CssProperty\#methods)

### isSet [​](https://docs.nativescript.org/api/class/CssProperty\#isset)

```
isSet(instance: T): boolean
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:92:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L92)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `instance` | `` | `T` |

Returns _boolean_

### register [​](https://docs.nativescript.org/api/class/CssProperty\#register)

```
register(cls: {}): void
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:89:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L89)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `cls` | `` | `{}` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/CssProperty#summary)
3. [Constructors](https://docs.nativescript.org/api/class/CssProperty#constructors)
1. [constructor](https://docs.nativescript.org/api/class/CssProperty#constructor)
4. [Properties](https://docs.nativescript.org/api/class/CssProperty#properties)
01. [cssLocalName](https://docs.nativescript.org/api/class/CssProperty#csslocalname)
02. [cssName](https://docs.nativescript.org/api/class/CssProperty#cssname)
03. [cssValueDescriptor](https://docs.nativescript.org/api/class/CssProperty#cssvaluedescriptor)
04. [defaultValue](https://docs.nativescript.org/api/class/CssProperty#defaultvalue)
05. [defaultValueKey](https://docs.nativescript.org/api/class/CssProperty#defaultvaluekey)
06. [getDefault](https://docs.nativescript.org/api/class/CssProperty#getdefault)
07. [isStyleProperty](https://docs.nativescript.org/api/class/CssProperty#isstyleproperty)
08. [key](https://docs.nativescript.org/api/class/CssProperty#key)
09. [localValueDescriptor](https://docs.nativescript.org/api/class/CssProperty#localvaluedescriptor)
10. [name](https://docs.nativescript.org/api/class/CssProperty#name)
11. [overrideHandlers](https://docs.nativescript.org/api/class/CssProperty#overridehandlers)
12. [setNative](https://docs.nativescript.org/api/class/CssProperty#setnative)
13. [sourceKey](https://docs.nativescript.org/api/class/CssProperty#sourcekey)
5. [Methods](https://docs.nativescript.org/api/class/CssProperty#methods)
1. [isSet](https://docs.nativescript.org/api/class/CssProperty#isset)
2. [register](https://docs.nativescript.org/api/class/CssProperty#register)


## AndroidApplication Class




[ApplicationCommon](https://docs.nativescript.org/api/class/ApplicationCommon)

AndroidApplication

## Summary [​](https://docs.nativescript.org/api/class/AndroidApplication\#summary)

#### Properties

[activityBackPressedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitybackpressedevent)[activityBackPressedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitybackpressedevent-1)[activityCreatedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitycreatedevent)[activityCreatedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitycreatedevent-1)[activityDestroyedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitydestroyedevent)[activityDestroyedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitydestroyedevent-1)[activityNewIntentEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitynewintentevent)[activityNewIntentEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitynewintentevent-1)[activityPausedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitypausedevent)[activityPausedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitypausedevent-1)[activityRequestPermissionsEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityrequestpermissionsevent)[activityRequestPermissionsEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityrequestpermissionsevent-1)[activityResultEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresultevent)[activityResultEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresultevent-1)[activityResumedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresumedevent)[activityResumedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresumedevent-1)[activityStartedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystartedevent)[activityStartedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystartedevent-1)[activityStoppedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystoppedevent)[activityStoppedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystoppedevent-1)[saveActivityStateEvent](https://docs.nativescript.org/api/class/AndroidApplication#saveactivitystateevent)[saveActivityStateEvent](https://docs.nativescript.org/api/class/AndroidApplication#saveactivitystateevent-1)

28 properties inherited from [ApplicationCommon](https://docs.nativescript.org/api/class/ApplicationCommon)

Click to expand

[autoSystemAppearanceChanged](https://docs.nativescript.org/api/class/ApplicationCommon#autosystemappearancechanged)[backgroundEvent](https://docs.nativescript.org/api/class/ApplicationCommon#backgroundevent)[cssChangedEvent](https://docs.nativescript.org/api/class/ApplicationCommon#csschangedevent)[discardedErrorEvent](https://docs.nativescript.org/api/class/ApplicationCommon#discardederrorevent)[displayedEvent](https://docs.nativescript.org/api/class/ApplicationCommon#displayedevent)[exitEvent](https://docs.nativescript.org/api/class/ApplicationCommon#exitevent)[fontScaleChangedEvent](https://docs.nativescript.org/api/class/ApplicationCommon#fontscalechangedevent)[foregroundEvent](https://docs.nativescript.org/api/class/ApplicationCommon#foregroundevent)[hasListeners](https://docs.nativescript.org/api/class/ApplicationCommon#haslisteners)[hasListeners](https://docs.nativescript.org/api/class/ApplicationCommon#haslisteners-1)[launchEvent](https://docs.nativescript.org/api/class/ApplicationCommon#launchevent)[livesyncEvent](https://docs.nativescript.org/api/class/ApplicationCommon#livesyncevent)[loadAppCssEvent](https://docs.nativescript.org/api/class/ApplicationCommon#loadappcssevent)[lowMemoryEvent](https://docs.nativescript.org/api/class/ApplicationCommon#lowmemoryevent)[mainEntry](https://docs.nativescript.org/api/class/ApplicationCommon#mainentry)[notify](https://docs.nativescript.org/api/class/ApplicationCommon#notify)[notify](https://docs.nativescript.org/api/class/ApplicationCommon#notify-1)[off](https://docs.nativescript.org/api/class/ApplicationCommon#off)[off](https://docs.nativescript.org/api/class/ApplicationCommon#off-1)[on](https://docs.nativescript.org/api/class/ApplicationCommon#on-1)[once](https://docs.nativescript.org/api/class/ApplicationCommon#once)[once](https://docs.nativescript.org/api/class/ApplicationCommon#once-1)[orientationChangedEvent](https://docs.nativescript.org/api/class/ApplicationCommon#orientationchangedevent)[resumeEvent](https://docs.nativescript.org/api/class/ApplicationCommon#resumeevent)[started](https://docs.nativescript.org/api/class/ApplicationCommon#started)[suspendEvent](https://docs.nativescript.org/api/class/ApplicationCommon#suspendevent)[systemAppearanceChangedEvent](https://docs.nativescript.org/api/class/ApplicationCommon#systemappearancechangedevent)[uncaughtErrorEvent](https://docs.nativescript.org/api/class/ApplicationCommon#uncaughterrorevent)

#### Accessors

[backgrounded](https://docs.nativescript.org/api/class/AndroidApplication#backgrounded)[context](https://docs.nativescript.org/api/class/AndroidApplication#context)[foregroundActivity](https://docs.nativescript.org/api/class/AndroidApplication#foregroundactivity)[nativeApp](https://docs.nativescript.org/api/class/AndroidApplication#nativeapp)[packageName](https://docs.nativescript.org/api/class/AndroidApplication#packagename)[paused](https://docs.nativescript.org/api/class/AndroidApplication#paused)[startActivity](https://docs.nativescript.org/api/class/AndroidApplication#startactivity)

6 accessors inherited from [ApplicationCommon](https://docs.nativescript.org/api/class/ApplicationCommon)

Click to expand

androidAndroidApplicationinBackgroundiosiOSApplicationsuspended

#### Methods

[getNativeApplication](https://docs.nativescript.org/api/class/AndroidApplication#getnativeapplication)[getRegisteredBroadcastReceiver](https://docs.nativescript.org/api/class/AndroidApplication#getregisteredbroadcastreceiver)[on](https://docs.nativescript.org/api/class/AndroidApplication#on-1)[registerBroadcastReceiver](https://docs.nativescript.org/api/class/AndroidApplication#registerbroadcastreceiver)[unregisterBroadcastReceiver](https://docs.nativescript.org/api/class/AndroidApplication#unregisterbroadcastreceiver)

27 methods inherited from [ApplicationCommon](https://docs.nativescript.org/api/class/ApplicationCommon)

Click to expand

[addCss](https://docs.nativescript.org/api/class/ApplicationCommon#addcss)[applyCssClass](https://docs.nativescript.org/api/class/ApplicationCommon#applycssclass)[createRootView](https://docs.nativescript.org/api/class/ApplicationCommon#createrootview)[getCssFileName](https://docs.nativescript.org/api/class/ApplicationCommon#getcssfilename)[getMainEntry](https://docs.nativescript.org/api/class/ApplicationCommon#getmainentry)[getOrientation](https://docs.nativescript.org/api/class/ApplicationCommon#getorientation)[getResources](https://docs.nativescript.org/api/class/ApplicationCommon#getresources)[getRootView](https://docs.nativescript.org/api/class/ApplicationCommon#getrootview)[getSystemAppearance](https://docs.nativescript.org/api/class/ApplicationCommon#getsystemappearance)[hasLaunched](https://docs.nativescript.org/api/class/ApplicationCommon#haslaunched)[initRootView](https://docs.nativescript.org/api/class/ApplicationCommon#initrootview)[loadAppCss](https://docs.nativescript.org/api/class/ApplicationCommon#loadappcss)[notifyLaunch](https://docs.nativescript.org/api/class/ApplicationCommon#notifylaunch)[orientation](https://docs.nativescript.org/api/class/ApplicationCommon#orientation)[orientationChanged](https://docs.nativescript.org/api/class/ApplicationCommon#orientationchanged)[resetRootView](https://docs.nativescript.org/api/class/ApplicationCommon#resetrootview)[run](https://docs.nativescript.org/api/class/ApplicationCommon#run)[setAutoSystemAppearanceChanged](https://docs.nativescript.org/api/class/ApplicationCommon#setautosystemappearancechanged)[setCssFileName](https://docs.nativescript.org/api/class/ApplicationCommon#setcssfilename)[setInBackground](https://docs.nativescript.org/api/class/ApplicationCommon#setinbackground)[setMaxRefreshRate](https://docs.nativescript.org/api/class/ApplicationCommon#setmaxrefreshrate)[setOrientation](https://docs.nativescript.org/api/class/ApplicationCommon#setorientation)[setResources](https://docs.nativescript.org/api/class/ApplicationCommon#setresources)[setSuspended](https://docs.nativescript.org/api/class/ApplicationCommon#setsuspended)[setSystemAppearance](https://docs.nativescript.org/api/class/ApplicationCommon#setsystemappearance)[systemAppearance](https://docs.nativescript.org/api/class/ApplicationCommon#systemappearance)[systemAppearanceChanged](https://docs.nativescript.org/api/class/ApplicationCommon#systemappearancechanged)

## Properties [​](https://docs.nativescript.org/api/class/AndroidApplication\#properties)

### activityBackPressedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitybackpressedevent)

Readonly

```
activityBackPressedEvent: "activityBackPressed" = AndroidApplication.activityBackPressedEvent
```

defined in [@nativescript/core/application/application.d.ts:62:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L62)

### activityCreatedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitycreatedevent)

Readonly

```
activityCreatedEvent: "activityCreated" = AndroidApplication.activityCreatedEvent
```

defined in [@nativescript/core/application/application.d.ts:54:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L54)

### activityDestroyedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitydestroyedevent)

Readonly

```
activityDestroyedEvent: "activityDestroyed" = AndroidApplication.activityDestroyedEvent
```

defined in [@nativescript/core/application/application.d.ts:55:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L55)

### activityNewIntentEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitynewintentevent)

Readonly

```
activityNewIntentEvent: "activityNewIntent" = AndroidApplication.activityNewIntentEvent
```

defined in [@nativescript/core/application/application.d.ts:63:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L63)

### activityPausedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitypausedevent)

Readonly

```
activityPausedEvent: "activityPaused" = AndroidApplication.activityPausedEvent
```

defined in [@nativescript/core/application/application.d.ts:57:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L57)

### activityRequestPermissionsEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activityrequestpermissionsevent)

Readonly

```
activityRequestPermissionsEvent: "activityRequestPermissions" = AndroidApplication.activityRequestPermissionsEvent
```

defined in [@nativescript/core/application/application.d.ts:64:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L64)

### activityResultEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activityresultevent)

Readonly

```
activityResultEvent: "activityResult" = AndroidApplication.activityResultEvent
```

defined in [@nativescript/core/application/application.d.ts:61:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L61)

### activityResumedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activityresumedevent)

Readonly

```
activityResumedEvent: "activityResumed" = AndroidApplication.activityResumedEvent
```

defined in [@nativescript/core/application/application.d.ts:58:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L58)

### activityStartedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitystartedevent)

Readonly

```
activityStartedEvent: "activityStarted" = AndroidApplication.activityStartedEvent
```

defined in [@nativescript/core/application/application.d.ts:56:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L56)

### activityStoppedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitystoppedevent)

Readonly

```
activityStoppedEvent: "activityStopped" = AndroidApplication.activityStoppedEvent
```

defined in [@nativescript/core/application/application.d.ts:59:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L59)

### saveActivityStateEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#saveactivitystateevent)

Readonly

```
saveActivityStateEvent: "saveActivityState" = AndroidApplication.saveActivityStateEvent
```

defined in [@nativescript/core/application/application.d.ts:60:10](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L60)

### activityBackPressedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitybackpressedevent-1)

StaticReadonly

```
activityBackPressedEvent: "activityBackPressed" = 'activityBackPressed'
```

defined in [@nativescript/core/application/application.d.ts:44:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L44)

### activityCreatedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitycreatedevent-1)

StaticReadonly

```
activityCreatedEvent: "activityCreated" = 'activityCreated'
```

defined in [@nativescript/core/application/application.d.ts:12:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L12)

### activityDestroyedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitydestroyedevent-1)

StaticReadonly

```
activityDestroyedEvent: "activityDestroyed" = 'activityDestroyed'
```

defined in [@nativescript/core/application/application.d.ts:16:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L16)

### activityNewIntentEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitynewintentevent-1)

StaticReadonly

```
activityNewIntentEvent: "activityNewIntent" = 'activityNewIntent'
```

defined in [@nativescript/core/application/application.d.ts:48:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L48)

### activityPausedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitypausedevent-1)

StaticReadonly

```
activityPausedEvent: "activityPaused" = 'activityPaused'
```

defined in [@nativescript/core/application/application.d.ts:24:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L24)

### activityRequestPermissionsEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activityrequestpermissionsevent-1)

StaticReadonly

```
activityRequestPermissionsEvent: "activityRequestPermissions" = 'activityRequestPermissions'
```

defined in [@nativescript/core/application/application.d.ts:52:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L52)

### activityResultEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activityresultevent-1)

StaticReadonly

```
activityResultEvent: "activityResult" = 'activityResult'
```

defined in [@nativescript/core/application/application.d.ts:40:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L40)

### activityResumedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activityresumedevent-1)

StaticReadonly

```
activityResumedEvent: "activityResumed" = 'activityResumed'
```

defined in [@nativescript/core/application/application.d.ts:28:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L28)

### activityStartedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitystartedevent-1)

StaticReadonly

```
activityStartedEvent: "activityStarted" = 'activityStarted'
```

defined in [@nativescript/core/application/application.d.ts:20:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L20)

### activityStoppedEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#activitystoppedevent-1)

StaticReadonly

```
activityStoppedEvent: "activityStopped" = 'activityStopped'
```

defined in [@nativescript/core/application/application.d.ts:32:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L32)

### saveActivityStateEvent [​](https://docs.nativescript.org/api/class/AndroidApplication\#saveactivitystateevent-1)

StaticReadonly

```
saveActivityStateEvent: "saveActivityState" = 'saveActivityState'
```

defined in [@nativescript/core/application/application.d.ts:36:17](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L36)

## Accessors [​](https://docs.nativescript.org/api/class/AndroidApplication\#accessors)

### backgrounded [​](https://docs.nativescript.org/api/class/AndroidApplication\#backgrounded)

```
get backgrounded(): boolean
```

defined in [@nativescript/core/application/application.d.ts:103:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L103)

Returns _boolean_

### context [​](https://docs.nativescript.org/api/class/AndroidApplication\#context)

```
get context(): Context
```

defined in [@nativescript/core/application/application.d.ts:98:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L98)

Returns _Context_

### foregroundActivity [​](https://docs.nativescript.org/api/class/AndroidApplication\#foregroundactivity)

```
get foregroundActivity(): AppCompatActivity
```

defined in [@nativescript/core/application/application.d.ts:93:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L93)

The currently active (loaded) \[android Activity\](http://developer.android.com/reference/android/app/Activity.html).

This property is automatically updated upon Activity events.

Returns _AppCompatActivity_

### nativeApp [​](https://docs.nativescript.org/api/class/AndroidApplication\#nativeapp)

```
get nativeApp(): Application
```

defined in [@nativescript/core/application/application.d.ts:76:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L76)

The \[android Application\](http://developer.android.com/reference/android/app/Application.html) object instance provided to the init of the module.

Returns _Application_

### packageName [​](https://docs.nativescript.org/api/class/AndroidApplication\#packagename)

```
get packageName(): string
```

defined in [@nativescript/core/application/application.d.ts:81:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L81)

Returns _string_

### paused [​](https://docs.nativescript.org/api/class/AndroidApplication\#paused)

```
get paused(): boolean
```

defined in [@nativescript/core/application/application.d.ts:108:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L108)

Returns _boolean_

### startActivity [​](https://docs.nativescript.org/api/class/AndroidApplication\#startactivity)

```
get startActivity(): AppCompatActivity
```

defined in [@nativescript/core/application/application.d.ts:86:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L86)

The main (start) Activity for the application.

Returns _AppCompatActivity_

## Methods [​](https://docs.nativescript.org/api/class/AndroidApplication\#methods)

### getNativeApplication [​](https://docs.nativescript.org/api/class/AndroidApplication\#getnativeapplication)

```
getNativeApplication(): Application
```

defined in [@nativescript/core/application/application.d.ts:66:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L66)

Returns _Application_

### getRegisteredBroadcastReceiver [​](https://docs.nativescript.org/api/class/AndroidApplication\#getregisteredbroadcastreceiver)

```
getRegisteredBroadcastReceiver(intentFilter: string): BroadcastReceiver
```

defined in [@nativescript/core/application/application.d.ts:129:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L129)

Get a registered BroadcastReceiver, then you can get the result code of BroadcastReceiver in onReceiveCallback method.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `intentFilter` | `` | `string`<br>A string containing the intent filter. |

Returns _BroadcastReceiver_

### on [​](https://docs.nativescript.org/api/class/AndroidApplication\#on)

```
on(
  event: "activityCreated",
  callback: (args: AndroidActivityBundleEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:131:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L131)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityCreated"` |
| `callback` | `` | `(args: AndroidActivityBundleEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityDestroyed",
  callback: (args: AndroidActivityEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:132:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L132)

This event is raised when application css is changed.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityDestroyed"` |
| `callback` | `` | `(args: AndroidActivityEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityStarted",
  callback: (args: AndroidActivityEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:133:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L133)

Event raised then livesync operation is performed.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityStarted"` |
| `callback` | `` | `(args: AndroidActivityEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityPaused",
  callback: (args: AndroidActivityEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:134:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L134)

This event is raised when application css is changed.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityPaused"` |
| `callback` | `` | `(args: AndroidActivityEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityResumed",
  callback: (args: AndroidActivityEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:135:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L135)

This event is raised on application launchEvent.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityResumed"` |
| `callback` | `` | `(args: AndroidActivityEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityStopped",
  callback: (args: AndroidActivityEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:136:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L136)

This event is raised after the application has performed most of its startup actions.
Its intent is to be suitable for measuring app startup times.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityStopped"` |
| `callback` | `` | `(args: AndroidActivityEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "saveActivityState",
  callback: (args: AndroidActivityBundleEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:137:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L137)

This event is raised when the Application is suspended.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"saveActivityState"` |
| `callback` | `` | `(args: AndroidActivityBundleEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityResult",
  callback: (args: AndroidActivityResultEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:138:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L138)

This event is raised when the Application is resumed after it has been suspended.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityResult"` |
| `callback` | `` | `(args: AndroidActivityResultEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityBackPressed",
  callback: (args: AndroidActivityBackPressedEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:139:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L139)

This event is raised when the Application is about to exit.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityBackPressed"` |
| `callback` | `` | `(args: AndroidActivityBackPressedEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityNewIntent",
  callback: (args: AndroidActivityNewIntentEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:140:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L140)

This event is raised when there is low memory on the target device.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityNewIntent"` |
| `callback` | `` | `(args: AndroidActivityNewIntentEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(
  event: "activityRequestPermissions",
  callback: (args: AndroidActivityRequestPermissionsEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/application/application.d.ts:141:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L141)

This event is raised when an uncaught error occurs while the application is running.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"activityRequestPermissions"` |
| `callback` | `` | `(args: AndroidActivityRequestPermissionsEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### registerBroadcastReceiver [​](https://docs.nativescript.org/api/class/AndroidApplication\#registerbroadcastreceiver)

```
registerBroadcastReceiver(
  intentFilter: string,
  onReceiveCallback: (context: Context, intent: Intent) => void
): void
```

defined in [@nativescript/core/application/application.d.ts:116:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L116)

Register a BroadcastReceiver to be run in the main activity thread. The receiver will be called with any broadcast Intent that matches filter, in the main application thread.
For more information, please visit 'http://developer.android.com/reference/android/content/Context.html#registerReceiver%28android.content.BroadcastReceiver,%20android.content.IntentFilter%29'

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `intentFilter` | `` | `string`<br>A string containing the intent filter. |
| `onReceiveCallback` | `` | `(context: Context, intent: Intent) => void`<br>A callback function that will be called each time the receiver receives a broadcast. |

Returns _void_

### unregisterBroadcastReceiver [​](https://docs.nativescript.org/api/class/AndroidApplication\#unregisterbroadcastreceiver)

```
unregisterBroadcastReceiver(intentFilter: string): void
```

defined in [@nativescript/core/application/application.d.ts:123:1](https://unpkg.com/browse/@nativescript/core//application/application.d.ts#L123)

Unregister a previously registered BroadcastReceiver.
For more information, please visit 'http://developer.android.com/reference/android/content/Context.html#unregisterReceiver(android.content.BroadcastReceiver)'

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `intentFilter` | `` | `string`<br>A string containing the intent filter with which the receiver was originally registered. |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/AndroidApplication#summary)
3. [Properties](https://docs.nativescript.org/api/class/AndroidApplication#properties)
01. [activityBackPressedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitybackpressedevent)
02. [activityCreatedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitycreatedevent)
03. [activityDestroyedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitydestroyedevent)
04. [activityNewIntentEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitynewintentevent)
05. [activityPausedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitypausedevent)
06. [activityRequestPermissionsEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityrequestpermissionsevent)
07. [activityResultEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresultevent)
08. [activityResumedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresumedevent)
09. [activityStartedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystartedevent)
10. [activityStoppedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystoppedevent)
11. [saveActivityStateEvent](https://docs.nativescript.org/api/class/AndroidApplication#saveactivitystateevent)
12. [activityBackPressedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitybackpressedevent-1)
13. [activityCreatedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitycreatedevent-1)
14. [activityDestroyedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitydestroyedevent-1)
15. [activityNewIntentEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitynewintentevent-1)
16. [activityPausedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitypausedevent-1)
17. [activityRequestPermissionsEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityrequestpermissionsevent-1)
18. [activityResultEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresultevent-1)
19. [activityResumedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activityresumedevent-1)
20. [activityStartedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystartedevent-1)
21. [activityStoppedEvent](https://docs.nativescript.org/api/class/AndroidApplication#activitystoppedevent-1)
22. [saveActivityStateEvent](https://docs.nativescript.org/api/class/AndroidApplication#saveactivitystateevent-1)
4. [Accessors](https://docs.nativescript.org/api/class/AndroidApplication#accessors)
1. [backgrounded](https://docs.nativescript.org/api/class/AndroidApplication#backgrounded)
2. [context](https://docs.nativescript.org/api/class/AndroidApplication#context)
3. [foregroundActivity](https://docs.nativescript.org/api/class/AndroidApplication#foregroundactivity)
4. [nativeApp](https://docs.nativescript.org/api/class/AndroidApplication#nativeapp)
5. [packageName](https://docs.nativescript.org/api/class/AndroidApplication#packagename)
6. [paused](https://docs.nativescript.org/api/class/AndroidApplication#paused)
7. [startActivity](https://docs.nativescript.org/api/class/AndroidApplication#startactivity)
5. [Methods](https://docs.nativescript.org/api/class/AndroidApplication#methods)
1. [getNativeApplication](https://docs.nativescript.org/api/class/AndroidApplication#getnativeapplication)
2. [getRegisteredBroadcastReceiver](https://docs.nativescript.org/api/class/AndroidApplication#getregisteredbroadcastreceiver)
3. [on](https://docs.nativescript.org/api/class/AndroidApplication#on)
4. [registerBroadcastReceiver](https://docs.nativescript.org/api/class/AndroidApplication#registerbroadcastreceiver)
5. [unregisterBroadcastReceiver](https://docs.nativescript.org/api/class/AndroidApplication#unregisterbroadcastreceiver)


## Image Asset Class




[Observable](https://docs.nativescript.org/api/class/Observable)

ImageAsset

Observable is used when you want to be notified when a change occurs. Use on/off methods to add/remove listener.
Please note that should you be using the `` `new Observable({})` `` constructor, it is \*\*obsolete\*\* since v3.0,
and you have to migrate to the "data/observable" `` `fromObject({})` `` or the `` `fromObjectRecursive({})` `` functions.

## Summary [​](https://docs.nativescript.org/api/class/ImageAsset\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ImageAsset#constructor)

#### Properties

[android](https://docs.nativescript.org/api/class/ImageAsset#android)[ios](https://docs.nativescript.org/api/class/ImageAsset#ios)[nativeImage](https://docs.nativescript.org/api/class/ImageAsset#nativeimage)[options](https://docs.nativescript.org/api/class/ImageAsset#options)

1 properties inherited from [Observable](https://docs.nativescript.org/api/class/Observable)

Click to expand

[propertyChangeEvent](https://docs.nativescript.org/api/class/Observable#propertychangeevent)

#### Methods

[getImageAsync](https://docs.nativescript.org/api/class/ImageAsset#getimageasync)

18 methods inherited from [Observable](https://docs.nativescript.org/api/class/Observable)

Click to expand

[\_createPropertyChangeData](https://docs.nativescript.org/api/class/Observable#createpropertychangedata)[\_emit](https://docs.nativescript.org/api/class/Observable#emit)[addEventListener](https://docs.nativescript.org/api/class/Observable#addeventlistener)[addEventListener](https://docs.nativescript.org/api/class/Observable#addeventlistener-2)[get](https://docs.nativescript.org/api/class/Observable#get)[hasListeners](https://docs.nativescript.org/api/class/Observable#haslisteners)[notify](https://docs.nativescript.org/api/class/Observable#notify)[notifyPropertyChange](https://docs.nativescript.org/api/class/Observable#notifypropertychange)[off](https://docs.nativescript.org/api/class/Observable#off)[off](https://docs.nativescript.org/api/class/Observable#off-2)[on](https://docs.nativescript.org/api/class/Observable#on)[on](https://docs.nativescript.org/api/class/Observable#on-2)[once](https://docs.nativescript.org/api/class/Observable#once)[once](https://docs.nativescript.org/api/class/Observable#once-2)[removeEventListener](https://docs.nativescript.org/api/class/Observable#removeeventlistener)[removeEventListener](https://docs.nativescript.org/api/class/Observable#removeeventlistener-2)[set](https://docs.nativescript.org/api/class/Observable#set)[setProperty](https://docs.nativescript.org/api/class/Observable#setproperty)

## Constructors [​](https://docs.nativescript.org/api/class/ImageAsset\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ImageAsset\#constructor)

```
new ImageAsset(asset: any): ImageAsset
```

defined in [@nativescript/core/image-asset/index.d.ts:4:1](https://unpkg.com/browse/@nativescript/core//image-asset/index.d.ts#L4)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `asset` | `` | `any` |

Returns _[ImageAsset](https://docs.nativescript.org/api/class/ImageAsset)_

## Properties [​](https://docs.nativescript.org/api/class/ImageAsset\#properties)

### android [​](https://docs.nativescript.org/api/class/ImageAsset\#android)

```
android: any
```

defined in [@nativescript/core/image-asset/index.d.ts:8:1](https://unpkg.com/browse/@nativescript/core//image-asset/index.d.ts#L8)

### ios [​](https://docs.nativescript.org/api/class/ImageAsset\#ios)

```
ios: any
```

defined in [@nativescript/core/image-asset/index.d.ts:6:1](https://unpkg.com/browse/@nativescript/core//image-asset/index.d.ts#L6)

### nativeImage [​](https://docs.nativescript.org/api/class/ImageAsset\#nativeimage)

```
nativeImage: any
```

defined in [@nativescript/core/image-asset/index.d.ts:7:1](https://unpkg.com/browse/@nativescript/core//image-asset/index.d.ts#L7)

### options [​](https://docs.nativescript.org/api/class/ImageAsset\#options)

```
options: ImageAssetOptions
```

defined in [@nativescript/core/image-asset/index.d.ts:9:1](https://unpkg.com/browse/@nativescript/core//image-asset/index.d.ts#L9)

## Methods [​](https://docs.nativescript.org/api/class/ImageAsset\#methods)

### getImageAsync [​](https://docs.nativescript.org/api/class/ImageAsset\#getimageasync)

```
getImageAsync(callback: (image: any, error: any) => void): any
```

defined in [@nativescript/core/image-asset/index.d.ts:5:1](https://unpkg.com/browse/@nativescript/core//image-asset/index.d.ts#L5)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `callback` | `` | `(image: any, error: any) => void` |

Returns _any_

2. [Summary](https://docs.nativescript.org/api/class/ImageAsset#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ImageAsset#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ImageAsset#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ImageAsset#properties)
1. [android](https://docs.nativescript.org/api/class/ImageAsset#android)
2. [ios](https://docs.nativescript.org/api/class/ImageAsset#ios)
3. [nativeImage](https://docs.nativescript.org/api/class/ImageAsset#nativeimage)
4. [options](https://docs.nativescript.org/api/class/ImageAsset#options)
5. [Methods](https://docs.nativescript.org/api/class/ImageAsset#methods)
1. [getImageAsync](https://docs.nativescript.org/api/class/ImageAsset#getimageasync)

## Shared Element Transitions




SharedTransition

Shared Element Transitions (preview)
Allows you to auto animate between shared elements on two different screesn to create smooth navigational experiences.
View components can define sharedTransitionTag="name" alone with a transition through this API.

## Summary [​](https://docs.nativescript.org/api/class/SharedTransition\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/SharedTransition#constructor)

#### Properties

[DEBUG](https://docs.nativescript.org/api/class/SharedTransition#debug)[finishedEvent](https://docs.nativescript.org/api/class/SharedTransition#finishedevent)[inProgress](https://docs.nativescript.org/api/class/SharedTransition#inprogress)[interactiveCancelledEvent](https://docs.nativescript.org/api/class/SharedTransition#interactivecancelledevent)[interactiveUpdateEvent](https://docs.nativescript.org/api/class/SharedTransition#interactiveupdateevent)[startedEvent](https://docs.nativescript.org/api/class/SharedTransition#startedevent)

#### Methods

[custom](https://docs.nativescript.org/api/class/SharedTransition#custom)[events](https://docs.nativescript.org/api/class/SharedTransition#events)[finishState](https://docs.nativescript.org/api/class/SharedTransition#finishstate)[getSharedElements](https://docs.nativescript.org/api/class/SharedTransition#getsharedelements)[getState](https://docs.nativescript.org/api/class/SharedTransition#getstate)[notifyEvent](https://docs.nativescript.org/api/class/SharedTransition#notifyevent)[updateState](https://docs.nativescript.org/api/class/SharedTransition#updatestate)

## Constructors [​](https://docs.nativescript.org/api/class/SharedTransition\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/SharedTransition\#constructor)

```
new SharedTransition(): SharedTransition
```

Returns _[SharedTransition](https://docs.nativescript.org/api/class/SharedTransition)_

## Properties [​](https://docs.nativescript.org/api/class/SharedTransition\#properties)

### DEBUG [​](https://docs.nativescript.org/api/class/SharedTransition\#debug)

Static

```
DEBUG: boolean
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:208:11](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L208)

Enable to see various console logging output of Shared Element Transition behavior.

### finishedEvent [​](https://docs.nativescript.org/api/class/SharedTransition\#finishedevent)

Static

```
finishedEvent: string
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:188:11](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L188)

When the transition finishes.

### inProgress [​](https://docs.nativescript.org/api/class/SharedTransition\#inprogress)

Static

```
inProgress: boolean
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:175:11](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L175)

Whether a transition is in progress or not.
Note: used internally however exposed in case custom state ordering is needed.
Updated when transitions start/end/cancel.

### interactiveCancelledEvent [​](https://docs.nativescript.org/api/class/SharedTransition\#interactivecancelledevent)

Static

```
interactiveCancelledEvent: string
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:192:11](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L192)

When the interactive transition cancels.

### interactiveUpdateEvent [​](https://docs.nativescript.org/api/class/SharedTransition\#interactiveupdateevent)

Static

```
interactiveUpdateEvent: string
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:196:11](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L196)

When the interactive transition updates with the percent value.

### startedEvent [​](https://docs.nativescript.org/api/class/SharedTransition\#startedevent)

Static

```
startedEvent: string
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:184:11](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L184)

When the transition starts.

## Methods [​](https://docs.nativescript.org/api/class/SharedTransition\#methods)

### custom [​](https://docs.nativescript.org/api/class/SharedTransition\#custom)

Static

```
custom(transition: Transition, options?: SharedTransitionConfig): {}
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:167:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L167)

Configure a custom transition with presentation/dismissal options.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `transition` | `` | `Transition`<br>The custom Transition instance. |
| `options` | `` | `SharedTransitionConfig` |

Returns _{}_

### events [​](https://docs.nativescript.org/api/class/SharedTransition\#events)

Static

```
events(): SharedTransitionObservable
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:180:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L180)

Listen to various shared element transition events.

Returns _SharedTransitionObservable_

### finishState [​](https://docs.nativescript.org/api/class/SharedTransition\#finishstate)

Static

```
finishState(id: number): void
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:224:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L224)

Finish transition state.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `id` | `` | `number`<br>Transition instance id |

Returns _void_

### getSharedElements [​](https://docs.nativescript.org/api/class/SharedTransition\#getsharedelements)

Static

```
getSharedElements(fromPage: ViewBase, toPage: ViewBase): {
presented: View[];
presenting: View[];
}
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:231:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L231)

Gather view collections based on sharedTransitionTag details.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `fromPage` | `` | `ViewBase`<br>Page moving away from |
| `toPage` | `` | `ViewBase`<br>Page moving to |

Returns _{_
_presented: [View](https://docs.nativescript.org/api/class/View)\[\];_
_presenting: [View](https://docs.nativescript.org/api/class/View)\[\];_
_}_

### getState [​](https://docs.nativescript.org/api/class/SharedTransition\#getstate)

Static

```
getState(id: number): SharedTransitionState
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:219:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L219)

Get current state for any transition.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `id` | `` | `number`<br>Transition instance id |

Returns _SharedTransitionState_

### notifyEvent [​](https://docs.nativescript.org/api/class/SharedTransition\#notifyevent)

Static

```
notifyEvent(eventName: string, data: SharedTransitionEventDataPayload): void
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:204:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L204)

Notify a Shared Transition event.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string`<br>Shared Transition event name |
| `data` | `` | `SharedTransitionEventDataPayload` |

Returns _void_

### updateState [​](https://docs.nativescript.org/api/class/SharedTransition\#updatestate)

Static

```
updateState(id: number, state: SharedTransitionState): void
```

defined in [@nativescript/core/ui/transition/shared-transition.d.ts:214:4](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition.d.ts#L214)

Update transition state.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `id` | `` | `number`<br>Transition instance id |
| `state` | `` | `SharedTransitionState`<br>SharedTransitionState |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/SharedTransition#summary)
3. [Constructors](https://docs.nativescript.org/api/class/SharedTransition#constructors)
1. [constructor](https://docs.nativescript.org/api/class/SharedTransition#constructor)
4. [Properties](https://docs.nativescript.org/api/class/SharedTransition#properties)
1. [DEBUG](https://docs.nativescript.org/api/class/SharedTransition#debug)
2. [finishedEvent](https://docs.nativescript.org/api/class/SharedTransition#finishedevent)
3. [inProgress](https://docs.nativescript.org/api/class/SharedTransition#inprogress)
4. [interactiveCancelledEvent](https://docs.nativescript.org/api/class/SharedTransition#interactivecancelledevent)
5. [interactiveUpdateEvent](https://docs.nativescript.org/api/class/SharedTransition#interactiveupdateevent)
6. [startedEvent](https://docs.nativescript.org/api/class/SharedTransition#startedevent)
5. [Methods](https://docs.nativescript.org/api/class/SharedTransition#methods)
1. [custom](https://docs.nativescript.org/api/class/SharedTransition#custom)
2. [events](https://docs.nativescript.org/api/class/SharedTransition#events)
3. [finishState](https://docs.nativescript.org/api/class/SharedTransition#finishstate)
4. [getSharedElements](https://docs.nativescript.org/api/class/SharedTransition#getsharedelements)
5. [getState](https://docs.nativescript.org/api/class/SharedTransition#getstate)
6. [notifyEvent](https://docs.nativescript.org/api/class/SharedTransition#notifyevent)
7. [updateState](https://docs.nativescript.org/api/class/SharedTransition#updatestate)


## Keyframe Animation Info




KeyframeAnimationInfo

Defines animation options for the View.animate method.

## Summary [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#constructor)

#### Properties

[curve](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#curve)[delay](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#delay)[duration](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#duration)[isForwards](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#isforwards)[isReverse](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#isreverse)[iterations](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#iterations)[keyframes](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#keyframes)[name](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#name)

## Constructors [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#constructor)

```
new KeyframeAnimationInfo(): KeyframeAnimationInfo
```

Returns _[KeyframeAnimationInfo](https://docs.nativescript.org/api/class/KeyframeAnimationInfo)_

## Properties [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#properties)

### curve [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#curve)

```
curve?: any
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:77:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L77)

An optional animation curve. Possible values are contained in the \[AnimationCurve enumeration\](../modules/\_ui\_enums\_.animationcurve.html).
Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.

### delay [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#delay)

```
delay?: number
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:64:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L64)

The amount of time, in milliseconds, to delay starting the animation.

### duration [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#duration)

```
duration?: number
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:59:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L59)

The length of the animation in milliseconds. The default duration is 300 milliseconds.

### isForwards [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#isforwards)

```
isForwards: boolean
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:82:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L82)

Determines whether the animation values will be applied on the animated object after the animation finishes.

### isReverse [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#isreverse)

```
isReverse?: boolean
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:87:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L87)

If true the animation will be played backwards.

### iterations [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#iterations)

```
iterations?: number
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:71:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L71)

Specifies how many times the animation should be played. Default is 1.
iOS animations support fractional iterations, i.e. 1.5.
To repeat an animation infinitely, use Number.POSITIVE\_INFINITY

### keyframes [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#keyframes)

```
keyframes: KeyframeInfo[]
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:49:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L49)

Return animation keyframes.

### name [​](https://docs.nativescript.org/api/class/KeyframeAnimationInfo\#name)

```
name?: string
```

defined in [@nativescript/core/ui/animation/keyframe-animation.d.ts:54:1](https://unpkg.com/browse/@nativescript/core//ui/animation/keyframe-animation.d.ts#L54)

The animation name.

2. [Summary](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#summary)
3. [Constructors](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#constructors)
1. [constructor](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#constructor)
4. [Properties](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#properties)
1. [curve](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#curve)
2. [delay](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#delay)
3. [duration](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#duration)
4. [isForwards](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#isforwards)
5. [isReverse](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#isreverse)
6. [iterations](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#iterations)
7. [keyframes](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#keyframes)
8. [name](https://docs.nativescript.org/api/class/KeyframeAnimationInfo#name)

# NativeScript UI ListView [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#nativescript-ui-listview)

Note

This documentation is a current WIP item being migrated from previous documentation. You can access the [documentation being migrated here](https://github.com/NativeScript/docs/tree/master/docs/ui/components/RadListView).

## Overview [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#overview)

The **NativeScript UI ListView** plugin is a virtualizing list component that provides the most popular features associated with scenarios where a list of items is used. All these features are embedded in one control with the idea to save developer time and provide better experience. The main features include:

- Item animations
- Different layouts and orientations
- Smart defaults for many gestures - select on long press, execution of special action on swipe, reorder of items on long press and drag, refreshing the list on swipe or loading more items only when needed.

![](https://docs.nativescript.org/assets/list-view-overview_1.fbfb5622.png)![](https://docs.nativescript.org/assets/list-view-overview_2.a43e6b2e.png)

## Installation [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#installation)

In Command prompt / Terminal navigate to your application root folder and run:

```bash
npm install nativescript-ui-listview
```

## Features [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#features)

Different Layouts RadListView supports three different item layout strategies that are commonly used on mobile apps:

list - items are stacked - either horizontally or vertically, depending on the scrolling orientation.

grid - items are arranged in columns or rows - depending on the scrolling orientation.

staggered grid - items are ordered in a staggered grid formation - either in rows or columns, depending on the scrolling orientation.

![](https://docs.nativescript.org/assets/list-view-overview_3.e78fd6c3.png)

All layouts are virtualized and optimized for mobile devices.

### Selection [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#selection)

RadListView for NativeScript exposes API allowing you to enable item selection and track selection changes.

When using the selection mechanism, two selection modes are available:

- Single selection
- Multiple selection

RadListView also exposes convenient API for programmatically selecting or deselecting items and acquiring the currently selected items. The following methods are exposed by RadListView to manage selection:

- `selectAll()` \- selects all available items in the data source
- `deselectAll()` \- deselects all currently selected items from the data source
- `selectItemAt(index)` \- selects the item at the specified index
- `deselectItemAt(index)` \- deselects the item at the specified index if selected
- `isItemSelected(item)` \- determines whether the provided item is selected
- `getSelectedItems()` \- returns an array of the items currently selected

#### Enabling Selection in RadListView [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#enabling-selection-in-radlistview)

The value of the `selectionBehavior` property determines how the item selection works. It accepts the values from the `ListViewSelectionBehavior` enumeration:

- ListViewSelectionBehavior.None - items cannot be selected
- ListViewSelectionBehavior.Press - items are selected by tapping on them
- ListViewSelectionBehavior.LongPress - items are selected by holding them

Additionally, the value of the `multipleSelection` property determines which selection mode will be used. The available options are:

- _multiple selection mode_ \- allows for selecting multiple items. `RadListView` keeps track of which items are selected and exposes them through a `getSelectedItems()` method. Multiple selection is enabled by setting the `multipleSelection` property to `true`.
- _single selection mode_ \- only one item can be selected at a time. This mode is enabled by setting the `multipleSelection` property to `false`.

#### Enabling multiple selection on RadListView in XML [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#enabling-multiple-selection-on-radlistview-in-xml)

#### Handling Selection Events [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#handling-selection-events)

To notify you when the selection state of an item is changed, RadListView exposes the following events:

- `itemSelecting` \- fired before an item is selected. Can be used to cancel the operation.
- `itemSelected` \- fired after an item is successfully selected. At this point the item is already in the selected items array returned by the `getSelectedItems()` method.
- `itemDeselecting` \- fired before an item is deselected. Can be used to cancel the operation.
- `itemDeselected` \- fired after an item has been successfully deselected. At this point the item is not part of the selected items array returned by the `getSelectedItems()` method.

#### Examples [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#examples)

#### Single Selection [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#single-selection)

/// flavor plain

```xml
<GridLayout orientation="vertical" rows="auto, *, auto">
  <lv:RadListView
    id="listView"
    items="{{ dataItems }}"
    row="1"
    selectionBehavior="Press"
    itemSelected="onItemSelected"
    itemDeselected="onItemDeselected"
  >
    <lv:RadListView.itemTemplate>
      <StackLayout orientation="vertical" paddingLeft="16">
        <Label fontSize="20" text="{{ itemName }}" />
        <Label fontSize="13" text="{{ itemEmail }}" />
      </StackLayout>
    </lv:RadListView.itemTemplate>
  </lv:RadListView>
  <Label id="txtSelection" textWrap="true" row="2" />
</GridLayout>
```

```ts
export function onItemSelected(args) {
  const selectedItems = listView.getSelectedItems()
  let selectedTitles = 'Selected items: '
  for (let i = 0; i < selectedItems.length; i++) {
    selectedTitles += selectedItems[i].itemName

    if (i < selectedItems.length - 1) {
      selectedTitles += ', '
    }
  }

  lblSelection.text = selectedTitles
}

export function onItemDeselected(args) {
  const selectedItems = listView.getSelectedItems()
  let selectedTitles = 'Selected items: '
  for (let i = 0; i < selectedItems.length; i++) {
    selectedTitles += selectedItems[i].itemName

    if (i < selectedItems.length - 1) {
      selectedTitles += ', '
    }
  }

  lblSelection.text = selectedTitles
}
```

///

#### Multiple Selection [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#multiple-selection)

/// flavor plain

```xml
<Page
  loaded="onPageLoaded"
  xmlns:lv="nativescript-ui-listview"
  xmlns="http://www.nativescript.org/tns.xsd"
>
  <lv:RadListView
    id="listView"
    items="{{ dataItems }}"
    row="1"
    selectionBehavior="Press"
    multipleSelection="true"
  >
    <lv:RadListView.itemTemplate>
      <StackLayout orientation="vertical" android:paddingLeft="16" ios:paddingLeft="50">
        <Label fontSize="20" text="{{ name }}" />
      </StackLayout>
    </lv:RadListView.itemTemplate>
  </lv:RadListView>
</Page>
```

///

#### Programmatic Selection [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#programmatic-selection)

/// flavor plain

```xml
<Page
  loaded="onPageLoaded"
  xmlns:lv="nativescript-ui-listview"
  xmlns="http://www.nativescript.org/tns.xsd"
>
  <GridLayout orientation="vertical" rows="auto, *">
    <lv:RadListView
      items="{{ dataItems }}"
      row="1"
      id="listView"
      multipleSelection="true"
      selectionBehavior="Press"
    >
      <lv:RadListView.itemTemplate>
        <StackLayout orientation="vertical" ios:paddingLeft="50" android:paddingLeft="16">
          <Label fontSize="20" text="{{ itemName }}" />
          <Label fontSize="14" text="{{ itemEmail }}" />
        </StackLayout>
      </lv:RadListView.itemTemplate>
    </lv:RadListView>
  </GridLayout>
</Page>
```

```ts
export function onPageLoaded(args) {
  const page = args.object
  listView = page.getViewById('listView')
}

export function onSelectItemAtTap(args) {
  listView.selectItemAt(Number(txtSelectItemIndex.text))
}

export function onDeselectItemAtTap(args) {
  listView.deselectItemAt(Number(txtDeselectItemIndex.text))
}

export function onSelectAllTap(args) {
  listView.selectAll()
}

export function onDeselectAllTap(args) {
  listView.deselectAll()
}
```

///

### First Visible Index [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#first-visible-index)

`getFirstVisiblePosition()` returns the first visible position the listview.

/// flavor plain

```ts
import { RadListView } from 'nativescript-ui-listview'

let myList: RadListView

export function onPageLoaded(args) {
  const page = args.object as Page
  myList = page.getViewById('myList') as RadListView
}

export function getTheFirstVisiblePositionOfTheList() {
  const firstVisibleIndex = myList.getFirstVisiblePosition()
  console.log('First visible index:', firstVisibleIndex)
}
```

///

### Horizontal Layout [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#horizontal-layout)

/// flavor plain

```xml
<lv:RadListView items="{{ dataItems }}" horizontalAlignement="center">
  <lv:RadListView.itemTemplate>
    <StackLayout orientation="vertical">
      <Label fontSize="20" text="{{ itemName }}" />
      <Label fontSize="14" text="{{ itemDescription }}" textWrap="true" />
    </StackLayout>
  </lv:RadListView.itemTemplate>
  <lv:RadListView.listViewLayout>
    <lv:ListViewLinearLayout scrollDirection="Horizontal" />
  </lv:RadListView.listViewLayout>
</lv:RadListView>
```

///

### Pull to Refresh [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#pull-to-refresh)

`pullToRefresh` \- set to `true` to enable pull to refresh functionality.

`pullToRefreshInitiated` \- event to initiate your data processing for updating the listview items.

/// flavor plain

```xml
<lv:RadListView
  items="{{ dataItems }}"
  pullToRefresh="true"
  pullToRefreshInitiated="{{ onPullToRefreshInitiated }}"
>
  <lv:RadListView.itemTemplate>
    <StackLayout
      orientation="vertical"
      padding="5 10 5 10"
      style="background-color: #7fff7f;"
    >
      <StackLayout
        orientation="horizontal"
        padding="10"
        style="background-color: #65a565;"
      >
        <img:Img height="100" width="80" src="{{ image }}" />
        <StackLayout orientation="vertical" marginLeft="15">
          <Label fontSize="20" text="{{ name }}" marginBottom="8" />
          <Label
            fontSize="14"
            text="{{ title }}"
            style="font-weight: bold;"
            textWrap="true"
          />
          <Label fontSize="12" text="{{ text }}" color="White" textWrap="true" />
        </StackLayout>
      </StackLayout>
    </StackLayout>
  </lv:RadListView.itemTemplate>
</lv:RadListView>
```

```ts
import { ListViewEventData } from 'nativescript-ui-listview'

async onPullToRefreshInitiated(args: ListViewEventData) {
    // some operation to fetch more data items from a backend service/API
    const data = await someHttpCall()
    if (data) {
        // add the data to your existing observable array bound to the RLV Items
        const listView = args.object;
        listView.notifyPullToRefreshFinished();
    }
}
```

///

## Documentation [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#documentation)

## API Reference [​](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view\#api-reference)

[Here](https://v7.docs.nativescript.org/ns-ui-api-reference/classes/radlistview) is the API Reference section.

2. [Overview](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#overview)
3. [Installation](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#installation)
4. [Features](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#features)
1. [Selection](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#selection)
2. [First Visible Index](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#first-visible-index)
3. [Horizontal Layout](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#horizontal-layout)
4. [Pull to Refresh](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#pull-to-refresh)
5. [Documentation](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#documentation)
6. [API Reference](https://docs.nativescript.org/plugins/nativescript-ui/rad-list-view#api-reference)

## Observable Class Overview


Observable

[ObservableArray](https://docs.nativescript.org/api/class/ObservableArray) [VirtualArray](https://docs.nativescript.org/api/class/VirtualArray) [ImageAsset](https://docs.nativescript.org/api/class/ImageAsset) [ViewBase](https://docs.nativescript.org/api/class/ViewBase) [ImageCache](https://docs.nativescript.org/api/class/ImageCache) [Style](https://docs.nativescript.org/api/class/Style)

Observable is used when you want to be notified when a change occurs. Use on/off methods to add/remove listener.
Please note that should you be using the `` `new Observable({})` `` constructor, it is \*\*obsolete\*\* since v3.0,
and you have to migrate to the "data/observable" `` `fromObject({})` `` or the `` `fromObjectRecursive({})` `` functions.

## Summary [​](https://docs.nativescript.org/api/class/Observable\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/Observable#constructor)

#### Properties

[propertyChangeEvent](https://docs.nativescript.org/api/class/Observable#propertychangeevent)

#### Methods

[\_createPropertyChangeData](https://docs.nativescript.org/api/class/Observable#createpropertychangedata)[\_emit](https://docs.nativescript.org/api/class/Observable#emit)[addEventListener](https://docs.nativescript.org/api/class/Observable#addeventlistener)[addEventListener](https://docs.nativescript.org/api/class/Observable#addeventlistener-2)[get](https://docs.nativescript.org/api/class/Observable#get)[hasListeners](https://docs.nativescript.org/api/class/Observable#haslisteners)[notify](https://docs.nativescript.org/api/class/Observable#notify)[notifyPropertyChange](https://docs.nativescript.org/api/class/Observable#notifypropertychange)[off](https://docs.nativescript.org/api/class/Observable#off)[off](https://docs.nativescript.org/api/class/Observable#off-2)[on](https://docs.nativescript.org/api/class/Observable#on)[on](https://docs.nativescript.org/api/class/Observable#on-2)[once](https://docs.nativescript.org/api/class/Observable#once)[once](https://docs.nativescript.org/api/class/Observable#once-2)[removeEventListener](https://docs.nativescript.org/api/class/Observable#removeeventlistener)[removeEventListener](https://docs.nativescript.org/api/class/Observable#removeeventlistener-2)[set](https://docs.nativescript.org/api/class/Observable#set)[setProperty](https://docs.nativescript.org/api/class/Observable#setproperty)

## Constructors [​](https://docs.nativescript.org/api/class/Observable\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/Observable\#constructor)

```
new Observable(): Observable
```

Returns _[Observable](https://docs.nativescript.org/api/class/Observable)_

## Properties [​](https://docs.nativescript.org/api/class/Observable\#properties)

### propertyChangeEvent [​](https://docs.nativescript.org/api/class/Observable\#propertychangeevent)

Static

```
propertyChangeEvent: string
```

defined in [@nativescript/core/data/observable/index.d.ts:74:11](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L74)

String value used when hooking to propertyChange event.

## Methods [​](https://docs.nativescript.org/api/class/Observable\#methods)

### \_createPropertyChangeData [​](https://docs.nativescript.org/api/class/Observable\#createpropertychangedata)

```
_createPropertyChangeData(propertyName: string, value: any, oldValue?: any): PropertyChangeData
```

defined in [@nativescript/core/data/observable/index.d.ts:154:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L154)

This method is intended to be overriden by inheritors to provide additional implementation.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `propertyName` | `` | `string` |
| `value` | `` | `any` |
| `oldValue` | `` | `any` |

Returns _[PropertyChangeData](https://docs.nativescript.org/api/interface/PropertyChangeData)_

### \_emit [​](https://docs.nativescript.org/api/class/Observable\#emit)

```
_emit(eventNames: string): void
```

defined in [@nativescript/core/data/observable/index.d.ts:155:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L155)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string` |

Returns _void_

### addEventListener [​](https://docs.nativescript.org/api/class/Observable\#addeventlistener)

```
addEventListener(eventNames: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:117:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L117)

Adds a listener for the specified event name.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string`<br>Comma delimited names of the events to attach the listener to. |
| `callback` | `` | `(data: EventData) => void`<br>A function to be called when some of the specified event(s) is raised. |
| `thisArg` | `` | `any`<br>An optional parameter which when set will be used as "this" in callback method call. |

Returns _void_

### get [​](https://docs.nativescript.org/api/class/Observable\#get)

```
get(name: string): any
```

defined in [@nativescript/core/data/observable/index.d.ts:84:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L84)

Gets the value of the specified property.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |

Returns _any_

### hasListeners [​](https://docs.nativescript.org/api/class/Observable\#haslisteners)

```
hasListeners(eventName: string): boolean
```

defined in [@nativescript/core/data/observable/index.d.ts:150:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L150)

Checks whether a listener is registered for the specified event name.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string`<br>The name of the event to check for. |

Returns _boolean_

### notify [​](https://docs.nativescript.org/api/class/Observable\#notify)

```
notify&lt;T&gt;(data: T): void
```

defined in [@nativescript/core/data/observable/index.d.ts:140:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L140)

Notify this Observable instance with some data. This causes all event
handlers on the Observable instance to be called, as well as any 'global'
event handlers set on the instance's class.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `data` | `` | `T`<br>an object that satisfies the EventData interface, though with<br>an optional 'object' property. If left undefined, the 'object' property<br>will implicitly be set as this Observable instance. |

Returns _void_

### notifyPropertyChange [​](https://docs.nativescript.org/api/class/Observable\#notifypropertychange)

```
notifyPropertyChange(name: string, value: any, oldValue?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:145:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L145)

Notifies all the registered listeners for the property change event.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |
| `value` | `` | `any` |
| `oldValue` | `` | `any` |

Returns _void_

### off [​](https://docs.nativescript.org/api/class/Observable\#off)

```
off(eventNames: string, callback?: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:110:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L110)

Shortcut alias to the removeEventListener method.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string` |
| `callback` | `` | `(data: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### on [​](https://docs.nativescript.org/api/class/Observable\#on)

```
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:99:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L99)

A basic method signature to hook an event listener (shortcut alias to the addEventListener method).

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string`<br>String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `` `,` `` (e.g. "propertyChange", "change"). |
| `callback` | `` | `(data: EventData) => void`<br>Callback function which will be executed when event is raised. |
| `thisArg` | `` | `any`<br>An optional parameter which will be used as `` `this` `` context for callback execution. |

Returns _void_

### once [​](https://docs.nativescript.org/api/class/Observable\#once)

```
once(event: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:106:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L106)

Adds one-time listener function for the event named `` `event` ``.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `string`<br>Name of the event to attach to. |
| `callback` | `` | `(data: EventData) => void`<br>A function to be called when the specified event is raised. |
| `thisArg` | `` | `any`<br>An optional parameter which when set will be used as "this" in callback method call. |

Returns _void_

### removeEventListener [​](https://docs.nativescript.org/api/class/Observable\#removeeventlistener)

```
removeEventListener(eventNames: string, callback?: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:124:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L124)

Removes listener(s) for the specified event name.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string`<br>Comma delimited names of the events the specified listener is associated with. |
| `callback` | `` | `(data: EventData) => void`<br>An optional parameter pointing to a specific listener. If not defined, all listeners for the event names will be removed. |
| `thisArg` | `` | `any`<br>An optional parameter which when set will be used to refine search of the correct callback which will be removed as event listener. |

Returns _void_

### set [​](https://docs.nativescript.org/api/class/Observable\#set)

```
set(name: string, value: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:88:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L88)

Updates the specified property with the provided value.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |
| `value` | `` | `any` |

Returns _void_

### setProperty [​](https://docs.nativescript.org/api/class/Observable\#setproperty)

```
setProperty(name: string, value: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:92:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L92)

Updates the specified property with the provided value and raises a property change event and a specific change event based on the property name.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |
| `value` | `` | `any` |

Returns _void_

### addEventListener [​](https://docs.nativescript.org/api/class/Observable\#addeventlistener-1)

Static

```
addEventListener(eventName: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:129:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L129)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string` |
| `callback` | `` | `(data: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### off [​](https://docs.nativescript.org/api/class/Observable\#off-1)

Static

```
off(eventName: string, callback?: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:127:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L127)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string` |
| `callback` | `` | `(data: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### on [​](https://docs.nativescript.org/api/class/Observable\#on-1)

Static

```
on(eventName: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:125:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L125)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string` |
| `callback` | `` | `(data: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### once [​](https://docs.nativescript.org/api/class/Observable\#once-1)

Static

```
once(eventName: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:126:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L126)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string` |
| `callback` | `` | `(data: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### removeEventListener [​](https://docs.nativescript.org/api/class/Observable\#removeeventlistener-1)

Static

```
removeEventListener(eventName: string, callback?: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/data/observable/index.d.ts:128:4](https://unpkg.com/browse/@nativescript/core//data/observable/index.d.ts#L128)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventName` | `` | `string` |
| `callback` | `` | `(data: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/Observable#summary)
3. [Constructors](https://docs.nativescript.org/api/class/Observable#constructors)
1. [constructor](https://docs.nativescript.org/api/class/Observable#constructor)
4. [Properties](https://docs.nativescript.org/api/class/Observable#properties)
1. [propertyChangeEvent](https://docs.nativescript.org/api/class/Observable#propertychangeevent)
5. [Methods](https://docs.nativescript.org/api/class/Observable#methods)
01. [\_createPropertyChangeData](https://docs.nativescript.org/api/class/Observable#createpropertychangedata)
02. [\_emit](https://docs.nativescript.org/api/class/Observable#emit)
03. [addEventListener](https://docs.nativescript.org/api/class/Observable#addeventlistener)
04. [get](https://docs.nativescript.org/api/class/Observable#get)
05. [hasListeners](https://docs.nativescript.org/api/class/Observable#haslisteners)
06. [notify](https://docs.nativescript.org/api/class/Observable#notify)
07. [notifyPropertyChange](https://docs.nativescript.org/api/class/Observable#notifypropertychange)
08. [off](https://docs.nativescript.org/api/class/Observable#off)
09. [on](https://docs.nativescript.org/api/class/Observable#on)
10. [once](https://docs.nativescript.org/api/class/Observable#once)
11. [removeEventListener](https://docs.nativescript.org/api/class/Observable#removeeventlistener)
12. [set](https://docs.nativescript.org/api/class/Observable#set)
13. [setProperty](https://docs.nativescript.org/api/class/Observable#setproperty)
14. [addEventListener](https://docs.nativescript.org/api/class/Observable#addeventlistener-1)
15. [off](https://docs.nativescript.org/api/class/Observable#off-1)
16. [on](https://docs.nativescript.org/api/class/Observable#on-1)
17. [once](https://docs.nativescript.org/api/class/Observable#once-1)
18. [removeEventListener](https://docs.nativescript.org/api/class/Observable#removeeventlistener-1)


## Parser Event Types




ParserEventType

Specifies the type of parser event.

## Summary [​](https://docs.nativescript.org/api/class/ParserEventType\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ParserEventType#constructor)

#### Properties

[CDATA](https://docs.nativescript.org/api/class/ParserEventType#cdata)[Comment](https://docs.nativescript.org/api/class/ParserEventType#comment)[EndElement](https://docs.nativescript.org/api/class/ParserEventType#endelement)[StartElement](https://docs.nativescript.org/api/class/ParserEventType#startelement)[Text](https://docs.nativescript.org/api/class/ParserEventType#text)

## Constructors [​](https://docs.nativescript.org/api/class/ParserEventType\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ParserEventType\#constructor)

```
new ParserEventType(): ParserEventType
```

Returns _[ParserEventType](https://docs.nativescript.org/api/class/ParserEventType)_

## Properties [​](https://docs.nativescript.org/api/class/ParserEventType\#properties)

### CDATA [​](https://docs.nativescript.org/api/class/ParserEventType\#cdata)

Static

```
CDATA: string
```

defined in [@nativescript/core/xml/index.d.ts:27:8](https://unpkg.com/browse/@nativescript/core//xml/index.d.ts#L27)

Specifies the CDATA event type.

### Comment [​](https://docs.nativescript.org/api/class/ParserEventType\#comment)

Static

```
Comment: string
```

defined in [@nativescript/core/xml/index.d.ts:32:8](https://unpkg.com/browse/@nativescript/core//xml/index.d.ts#L32)

Specifies the Comment event type.

### EndElement [​](https://docs.nativescript.org/api/class/ParserEventType\#endelement)

Static

```
EndElement: string
```

defined in [@nativescript/core/xml/index.d.ts:17:8](https://unpkg.com/browse/@nativescript/core//xml/index.d.ts#L17)

Specifies the EndElement event type.

### StartElement [​](https://docs.nativescript.org/api/class/ParserEventType\#startelement)

Static

```
StartElement: string
```

defined in [@nativescript/core/xml/index.d.ts:12:8](https://unpkg.com/browse/@nativescript/core//xml/index.d.ts#L12)

Specifies the StartElement event type.

### Text [​](https://docs.nativescript.org/api/class/ParserEventType\#text)

Static

```
Text: string
```

defined in [@nativescript/core/xml/index.d.ts:22:8](https://unpkg.com/browse/@nativescript/core//xml/index.d.ts#L22)

Specifies the Text event type.

2. [Summary](https://docs.nativescript.org/api/class/ParserEventType#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ParserEventType#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ParserEventType#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ParserEventType#properties)
1. [CDATA](https://docs.nativescript.org/api/class/ParserEventType#cdata)
2. [Comment](https://docs.nativescript.org/api/class/ParserEventType#comment)
3. [EndElement](https://docs.nativescript.org/api/class/ParserEventType#endelement)
4. [StartElement](https://docs.nativescript.org/api/class/ParserEventType#startelement)
5. [Text](https://docs.nativescript.org/api/class/ParserEventType#text)


## ClassInfo Overview




ClassInfo

A Class holding information about a class

## Summary [​](https://docs.nativescript.org/api/class/Utils-ClassInfo\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/Utils-ClassInfo#constructor)

#### Properties

[baseClassInfo](https://docs.nativescript.org/api/class/Utils-ClassInfo#baseclassinfo)[name](https://docs.nativescript.org/api/class/Utils-ClassInfo#name)

## Constructors [​](https://docs.nativescript.org/api/class/Utils-ClassInfo\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/Utils-ClassInfo\#constructor)

```
new ClassInfo(): ClassInfo
```

Returns _[ClassInfo](https://docs.nativescript.org/api/class/Utils-ClassInfo)_

## Properties [​](https://docs.nativescript.org/api/class/Utils-ClassInfo\#properties)

### baseClassInfo [​](https://docs.nativescript.org/api/class/Utils-ClassInfo\#baseclassinfo)

```
baseClassInfo: ClassInfo
```

defined in [@nativescript/core/utils/types.d.ts:109:1](https://unpkg.com/browse/@nativescript/core//utils/types.d.ts#L109)

Gets the ClassInfo for the base class of the current info.

### name [​](https://docs.nativescript.org/api/class/Utils-ClassInfo\#name)

```
name: string
```

defined in [@nativescript/core/utils/types.d.ts:104:1](https://unpkg.com/browse/@nativescript/core//utils/types.d.ts#L104)

Gets the name of the class.

Next [AccessibilityEvents→](https://docs.nativescript.org/api/namespace/AccessibilityEvents)

2. [Summary](https://docs.nativescript.org/api/class/Utils-ClassInfo#summary)
3. [Constructors](https://docs.nativescript.org/api/class/Utils-ClassInfo#constructors)
1. [constructor](https://docs.nativescript.org/api/class/Utils-ClassInfo#constructor)
4. [Properties](https://docs.nativescript.org/api/class/Utils-ClassInfo#properties)
1. [baseClassInfo](https://docs.nativescript.org/api/class/Utils-ClassInfo#baseclassinfo)
2. [name](https://docs.nativescript.org/api/class/Utils-ClassInfo#name)


## Navigation Context Interface




NavigationContext

```
interface NavigationContext {
  entry: BackstackEntry;
  isBackNavigation: boolean;
  navigationType: NavigationType;
}
```

Represents a context passed to navigation methods.

## Summary [​](https://docs.nativescript.org/api/interface/NavigationContext\#summary)

#### Properties

[entry](https://docs.nativescript.org/api/interface/NavigationContext#entry)[isBackNavigation](https://docs.nativescript.org/api/interface/NavigationContext#isbacknavigation)[navigationType](https://docs.nativescript.org/api/interface/NavigationContext#navigationtype)

## Properties [​](https://docs.nativescript.org/api/interface/NavigationContext\#properties)

### entry [​](https://docs.nativescript.org/api/interface/NavigationContext\#entry)

```
entry: BackstackEntry
```

defined in [@nativescript/core/ui/frame/index.d.ts:337:1](https://unpkg.com/browse/@nativescript/core//ui/frame/index.d.ts#L337)

### isBackNavigation [​](https://docs.nativescript.org/api/interface/NavigationContext\#isbacknavigation)

```
isBackNavigation: boolean
```

defined in [@nativescript/core/ui/frame/index.d.ts:338:1](https://unpkg.com/browse/@nativescript/core//ui/frame/index.d.ts#L338)

### navigationType [​](https://docs.nativescript.org/api/interface/NavigationContext\#navigationtype)

```
navigationType: NavigationType
```

defined in [@nativescript/core/ui/frame/index.d.ts:339:1](https://unpkg.com/browse/@nativescript/core//ui/frame/index.d.ts#L339)

2. [Summary](https://docs.nativescript.org/api/interface/NavigationContext#summary)
3. [Properties](https://docs.nativescript.org/api/interface/NavigationContext#properties)
1. [entry](https://docs.nativescript.org/api/interface/NavigationContext#entry)
2. [isBackNavigation](https://docs.nativescript.org/api/interface/NavigationContext#isbacknavigation)
3. [navigationType](https://docs.nativescript.org/api/interface/NavigationContext#navigationtype)


## Downloaded Data Interface




[EventData](https://docs.nativescript.org/api/interface/EventData)

DownloadedData

```
interface DownloadedData extends EventData {
  image: ImageSource;
  key: string;
}
```

Provides data for downloaded event.

## Summary [​](https://docs.nativescript.org/api/interface/DownloadedData\#summary)

#### Properties

[image](https://docs.nativescript.org/api/interface/DownloadedData#image)[key](https://docs.nativescript.org/api/interface/DownloadedData#key)

2 properties inherited from [EventData](https://docs.nativescript.org/api/interface/EventData)

Click to expand

[eventName](https://docs.nativescript.org/api/interface/EventData#eventname)[object](https://docs.nativescript.org/api/interface/EventData#object)

## Properties [​](https://docs.nativescript.org/api/interface/DownloadedData\#properties)

### image [​](https://docs.nativescript.org/api/interface/DownloadedData\#image)

```
image: ImageSource
```

defined in [@nativescript/core/ui/image-cache/index.d.ts:128:1](https://unpkg.com/browse/@nativescript/core//ui/image-cache/index.d.ts#L128)

Gets the cached image.

### key [​](https://docs.nativescript.org/api/interface/DownloadedData\#key)

```
key: string
```

defined in [@nativescript/core/ui/image-cache/index.d.ts:124:1](https://unpkg.com/browse/@nativescript/core//ui/image-cache/index.d.ts#L124)

A string indentifier of the cached image.

2. [Summary](https://docs.nativescript.org/api/interface/DownloadedData#summary)
3. [Properties](https://docs.nativescript.org/api/interface/DownloadedData#properties)
1. [image](https://docs.nativescript.org/api/interface/DownloadedData#image)
2. [key](https://docs.nativescript.org/api/interface/DownloadedData#key)


## Navigation Button




[ActionItem](https://docs.nativescript.org/api/class/ActionItem)

NavigationButton

Represents the navigation (a.k.a. "back") button.

## Summary [​](https://docs.nativescript.org/api/class/NavigationButton\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/NavigationButton#constructor)

## Constructors [​](https://docs.nativescript.org/api/class/NavigationButton\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/NavigationButton\#constructor)

```
new NavigationButton(): NavigationButton
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[NavigationButton](https://docs.nativescript.org/api/class/NavigationButton)_

2. [Summary](https://docs.nativescript.org/api/class/NavigationButton#summary)
3. [Constructors](https://docs.nativescript.org/api/class/NavigationButton#constructors)
1. [constructor](https://docs.nativescript.org/api/class/NavigationButton#constructor)


## ContainerView Class Overview




[View](https://docs.nativescript.org/api/class/View)

ContainerView

[CustomLayoutView](https://docs.nativescript.org/api/class/CustomLayoutView)

Base class for all UI components that are containers.

## Summary [​](https://docs.nativescript.org/api/class/ContainerView\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ContainerView#constructor)

#### Properties

[iosOverflowSafeArea](https://docs.nativescript.org/api/class/ContainerView#iosoverflowsafearea)

153 properties inherited from View

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeheighthorizontalAlignmentidignoreTouchAnimationiosiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftloadedEventmarginmarginBottommarginLeftmarginRightmarginTopminHeightminWidthmodalnativeViewProtectedopacityorderoriginXoriginYparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywidth

## Constructors [​](https://docs.nativescript.org/api/class/ContainerView\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ContainerView\#constructor)

```
new ContainerView(): ContainerView
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[ContainerView](https://docs.nativescript.org/api/class/ContainerView)_

## Properties [​](https://docs.nativescript.org/api/class/ContainerView\#properties)

### iosOverflowSafeArea [​](https://docs.nativescript.org/api/class/ContainerView\#iosoverflowsafearea)

```
iosOverflowSafeArea: boolean
```

defined in [@nativescript/core/ui/core/view/index.d.ts:910:8](https://unpkg.com/browse/@nativescript/core//ui/core/view/index.d.ts#L910)

Instruct container view to expand beyond the safe area. This property is iOS specific. Default value: true

2. [Summary](https://docs.nativescript.org/api/class/ContainerView#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ContainerView#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ContainerView#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ContainerView#properties)
1. [iosOverflowSafeArea](https://docs.nativescript.org/api/class/ContainerView#iosoverflowsafearea)


## UI Repeater Component




[CustomLayoutView](https://docs.nativescript.org/api/class/CustomLayoutView)

Repeater

Represents a UI Repeater component.

## Summary [​](https://docs.nativescript.org/api/class/Repeater\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/Repeater#constructor)

#### Properties

[android](https://docs.nativescript.org/api/class/Repeater#android)[ios](https://docs.nativescript.org/api/class/Repeater#ios)[items](https://docs.nativescript.org/api/class/Repeater#items)[itemsLayout](https://docs.nativescript.org/api/class/Repeater#itemslayout)[itemTemplate](https://docs.nativescript.org/api/class/Repeater#itemtemplate)[itemTemplates](https://docs.nativescript.org/api/class/Repeater#itemtemplates)[knownFunctions](https://docs.nativescript.org/api/class/Repeater#knownfunctions)

152 properties inherited from CustomLayoutView

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeheighthorizontalAlignmentidignoreTouchAnimationiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftloadedEventmarginmarginBottommarginLeftmarginRightmarginTopminHeightminWidthmodalnativeViewProtectedopacityorderoriginXoriginYparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywidth

#### Accessors

[\_childrenCount](https://docs.nativescript.org/api/class/Repeater#childrencount)[itemTemplateSelector](https://docs.nativescript.org/api/class/Repeater#itemtemplateselector)

11 accessors inherited from CustomLayoutView

Click to expand

backgroundPositionbackgroundRepeatbackgroundSizeclassisLoadednativeViewpageparentNodestyletextTransformtypeName

#### Methods

[\_getDefaultItemContent](https://docs.nativescript.org/api/class/Repeater#getdefaultitemcontent)[\_onItemsChanged](https://docs.nativescript.org/api/class/Repeater#onitemschanged)[\_requestRefresh](https://docs.nativescript.org/api/class/Repeater#requestrefresh)[eachChildView](https://docs.nativescript.org/api/class/Repeater#eachchildview)[onLayout](https://docs.nativescript.org/api/class/Repeater#onlayout)[onLoaded](https://docs.nativescript.org/api/class/Repeater#onloaded)[onMeasure](https://docs.nativescript.org/api/class/Repeater#onmeasure)[refresh](https://docs.nativescript.org/api/class/Repeater#refresh)

108 methods inherited from CustomLayoutView

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffonononBackPressedonceonceonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/Repeater\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/Repeater\#constructor)

```
new Repeater(): Repeater
```

defined in [@nativescript/core/ui/repeater/index.d.ts:19:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L19)

Returns _[Repeater](https://docs.nativescript.org/api/class/Repeater)_

## Properties [​](https://docs.nativescript.org/api/class/Repeater\#properties)

### android [​](https://docs.nativescript.org/api/class/Repeater\#android)

```
android: any
```

defined in [@nativescript/core/ui/repeater/index.d.ts:18:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L18)

### ios [​](https://docs.nativescript.org/api/class/Repeater\#ios)

```
ios: any
```

defined in [@nativescript/core/ui/repeater/index.d.ts:17:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L17)

### itemTemplate [​](https://docs.nativescript.org/api/class/Repeater\#itemtemplate)

```
itemTemplate: string | Template
```

defined in [@nativescript/core/ui/repeater/index.d.ts:29:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L29)

Gets or set the item template of the Repeater.

### itemTemplates [​](https://docs.nativescript.org/api/class/Repeater\#itemtemplates)

```
itemTemplates: string | KeyedTemplate[]
```

defined in [@nativescript/core/ui/repeater/index.d.ts:33:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L33)

Gets or set the item templates of the Repeater.

### items [​](https://docs.nativescript.org/api/class/Repeater\#items)

```
items: any[] | ItemsSource
```

defined in [@nativescript/core/ui/repeater/index.d.ts:25:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L25)

Gets or set the items collection of the Repeater.
The items property can be set to an array or an object defining length and getItem(index) method.

### itemsLayout [​](https://docs.nativescript.org/api/class/Repeater\#itemslayout)

```
itemsLayout: LayoutBase
```

defined in [@nativescript/core/ui/repeater/index.d.ts:37:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L37)

Gets or set the items layout of the Repeater. Default value is StackLayout with orientation="vertical".

### knownFunctions [​](https://docs.nativescript.org/api/class/Repeater\#knownfunctions)

Static

```
knownFunctions: string[]
```

defined in [@nativescript/core/ui/repeater/index.d.ts:13:11](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L13)

## Accessors [​](https://docs.nativescript.org/api/class/Repeater\#accessors)

### \_childrenCount [​](https://docs.nativescript.org/api/class/Repeater\#childrencount)

```
get _childrenCount(): number
```

defined in [@nativescript/core/ui/repeater/index.d.ts:48:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L48)

Returns _number_

### itemTemplateSelector [​](https://docs.nativescript.org/api/class/Repeater\#itemtemplateselector)

```
get itemTemplateSelector(): string | (item: any, index: number, items: any) => string
```

defined in [@nativescript/core/ui/repeater/index.d.ts:38:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L38)

Returns _string \| (item: any, index: number, items: any) => string_

## Methods [​](https://docs.nativescript.org/api/class/Repeater\#methods)

### \_getDefaultItemContent [​](https://docs.nativescript.org/api/class/Repeater\#getdefaultitemcontent)

```
_getDefaultItemContent(index: number): View
```

defined in [@nativescript/core/ui/repeater/index.d.ts:46:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L46)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `index` | `` | `number` |

Returns _[View](https://docs.nativescript.org/api/class/View)_

### \_onItemsChanged [​](https://docs.nativescript.org/api/class/Repeater\#onitemschanged)

```
_onItemsChanged(data: ChangedData<any>): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:45:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L45)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `data` | `` | `ChangedData<any>` |

Returns _void_

### \_requestRefresh [​](https://docs.nativescript.org/api/class/Repeater\#requestrefresh)

```
_requestRefresh(): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:40:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L40)

Returns _void_

### eachChildView [​](https://docs.nativescript.org/api/class/Repeater\#eachchildview)

```
eachChildView(callback: (child: View) => boolean): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:49:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L49)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `callback` | `` | `(child: View) => boolean` |

Returns _void_

### onLayout [​](https://docs.nativescript.org/api/class/Repeater\#onlayout)

```
onLayout(left: number, top: number, right: number, bottom: number): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:50:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L50)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `left` | `` | `number` |
| `top` | `` | `number` |
| `right` | `` | `number` |
| `bottom` | `` | `number` |

Returns _void_

### onLoaded [​](https://docs.nativescript.org/api/class/Repeater\#onloaded)

```
onLoaded(): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:20:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L20)

Returns _void_

### onMeasure [​](https://docs.nativescript.org/api/class/Repeater\#onmeasure)

```
onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:51:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L51)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `widthMeasureSpec` | `` | `number` |
| `heightMeasureSpec` | `` | `number` |

Returns _void_

### refresh [​](https://docs.nativescript.org/api/class/Repeater\#refresh)

```
refresh(): void
```

defined in [@nativescript/core/ui/repeater/index.d.ts:44:4](https://unpkg.com/browse/@nativescript/core//ui/repeater/index.d.ts#L44)

Forces the Repeater to reload all its items.

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/Repeater#summary)
3. [Constructors](https://docs.nativescript.org/api/class/Repeater#constructors)
1. [constructor](https://docs.nativescript.org/api/class/Repeater#constructor)
4. [Properties](https://docs.nativescript.org/api/class/Repeater#properties)
1. [android](https://docs.nativescript.org/api/class/Repeater#android)
2. [ios](https://docs.nativescript.org/api/class/Repeater#ios)
3. [itemTemplate](https://docs.nativescript.org/api/class/Repeater#itemtemplate)
4. [itemTemplates](https://docs.nativescript.org/api/class/Repeater#itemtemplates)
5. [items](https://docs.nativescript.org/api/class/Repeater#items)
6. [itemsLayout](https://docs.nativescript.org/api/class/Repeater#itemslayout)
7. [knownFunctions](https://docs.nativescript.org/api/class/Repeater#knownfunctions)
5. [Accessors](https://docs.nativescript.org/api/class/Repeater#accessors)
1. [\_childrenCount](https://docs.nativescript.org/api/class/Repeater#childrencount)
2. [itemTemplateSelector](https://docs.nativescript.org/api/class/Repeater#itemtemplateselector)
6. [Methods](https://docs.nativescript.org/api/class/Repeater#methods)
1. [\_getDefaultItemContent](https://docs.nativescript.org/api/class/Repeater#getdefaultitemcontent)
2. [\_onItemsChanged](https://docs.nativescript.org/api/class/Repeater#onitemschanged)
3. [\_requestRefresh](https://docs.nativescript.org/api/class/Repeater#requestrefresh)
4. [eachChildView](https://docs.nativescript.org/api/class/Repeater#eachchildview)
5. [onLayout](https://docs.nativescript.org/api/class/Repeater#onlayout)
6. [onLoaded](https://docs.nativescript.org/api/class/Repeater#onloaded)
7. [onMeasure](https://docs.nativescript.org/api/class/Repeater#onmeasure)
8. [refresh](https://docs.nativescript.org/api/class/Repeater#refresh)


## SegmentedBar UI Component




[View](https://docs.nativescript.org/api/class/View)

SegmentedBar

Represents a UI SegmentedBar component.

## Summary [​](https://docs.nativescript.org/api/class/SegmentedBar\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/SegmentedBar#constructor)

#### Properties

[items](https://docs.nativescript.org/api/class/SegmentedBar#items)[selectedBackgroundColor](https://docs.nativescript.org/api/class/SegmentedBar#selectedbackgroundcolor)[selectedIndex](https://docs.nativescript.org/api/class/SegmentedBar#selectedindex)[selectedIndexChangedEvent](https://docs.nativescript.org/api/class/SegmentedBar#selectedindexchangedevent)

154 properties inherited from View

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeheighthorizontalAlignmentidignoreTouchAnimationiosiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftloadedEventmarginmarginBottommarginLeftmarginRightmarginTopminHeightminWidthmodalnativeViewProtectedopacityorderoriginXoriginYparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywidth

#### Methods

[\_addArrayFromBuilder](https://docs.nativescript.org/api/class/SegmentedBar#addarrayfrombuilder)[\_addChildFromBuilder](https://docs.nativescript.org/api/class/SegmentedBar#addchildfrombuilder)[on](https://docs.nativescript.org/api/class/SegmentedBar#on)

111 methods inherited from View

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildeachChildViewensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/SegmentedBar\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/SegmentedBar\#constructor)

```
new SegmentedBar(): SegmentedBar
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[SegmentedBar](https://docs.nativescript.org/api/class/SegmentedBar)_

## Properties [​](https://docs.nativescript.org/api/class/SegmentedBar\#properties)

### items [​](https://docs.nativescript.org/api/class/SegmentedBar\#items)

```
items: SegmentedBarItem[]
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:50:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L50)

Gets or sets the items of the SegmentedBar.

### selectedBackgroundColor [​](https://docs.nativescript.org/api/class/SegmentedBar\#selectedbackgroundcolor)

```
selectedBackgroundColor: Color
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:45:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L45)

Gets or sets the selected background color of the SegmentedBar component.

### selectedIndex [​](https://docs.nativescript.org/api/class/SegmentedBar\#selectedindex)

```
selectedIndex: number
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:40:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L40)

Gets or sets the selected index of the SegmentedBar component.

### selectedIndexChangedEvent [​](https://docs.nativescript.org/api/class/SegmentedBar\#selectedindexchangedevent)

Static

```
selectedIndexChangedEvent: string
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:55:15](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L55)

String value used when hooking to the selectedIndexChanged event.

## Methods [​](https://docs.nativescript.org/api/class/SegmentedBar\#methods)

### \_addArrayFromBuilder [​](https://docs.nativescript.org/api/class/SegmentedBar\#addarrayfrombuilder)

```
_addArrayFromBuilder(name: string, value: any[]): void
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:76:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L76)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string` |
| `value` | `` | `any[]` |

Returns _void_

### \_addChildFromBuilder [​](https://docs.nativescript.org/api/class/SegmentedBar\#addchildfrombuilder)

```
_addChildFromBuilder(name: string, value: any): void
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:75:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L75)

Called for every child element declared in xml.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `name` | `` | `string`<br>Name of the element. |
| `value` | `` | `any`<br>Value of the element. |

Returns _void_

### on [​](https://docs.nativescript.org/api/class/SegmentedBar\#on)

```
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:63:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L63)

A basic method signature to hook an event listener (shortcut alias to the addEventListener method).

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string`<br>String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `` `,` `` (e.g. "propertyChange", "change"). |
| `callback` | `` | `(data: EventData) => void`<br>Callback function which will be executed when event is raised. |
| `thisArg` | `` | `any`<br>An optional parameter which will be used as `` `this` `` context for callback execution. |

Returns _void_

```
on(
  event: "selectedIndexChanged",
  callback: (args: SelectedIndexChangedEventData) => void,
  thisArg?: any
): void
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:68:1](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L68)

Raised when the selected index changes.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"selectedIndexChanged"` |
| `callback` | `` | `(args: SelectedIndexChangedEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/SegmentedBar#summary)
3. [Constructors](https://docs.nativescript.org/api/class/SegmentedBar#constructors)
1. [constructor](https://docs.nativescript.org/api/class/SegmentedBar#constructor)
4. [Properties](https://docs.nativescript.org/api/class/SegmentedBar#properties)
1. [items](https://docs.nativescript.org/api/class/SegmentedBar#items)
2. [selectedBackgroundColor](https://docs.nativescript.org/api/class/SegmentedBar#selectedbackgroundcolor)
3. [selectedIndex](https://docs.nativescript.org/api/class/SegmentedBar#selectedindex)
4. [selectedIndexChangedEvent](https://docs.nativescript.org/api/class/SegmentedBar#selectedindexchangedevent)
5. [Methods](https://docs.nativescript.org/api/class/SegmentedBar#methods)
1. [\_addArrayFromBuilder](https://docs.nativescript.org/api/class/SegmentedBar#addarrayfrombuilder)
2. [\_addChildFromBuilder](https://docs.nativescript.org/api/class/SegmentedBar#addchildfrombuilder)
3. [on](https://docs.nativescript.org/api/class/SegmentedBar#on)


## TypeScript Configuration Guide



Projects using TypeScript use the `tsconfig.json` to control the TypeScript compilation. Our templates ship with curated default values, however if you need to, you can fine-tune the [compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html).

For more information see the official [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

json

```
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitHelpers": true,
    "noEmitOnError": true,
    "skipLibCheck": true,
    "lib": ["ESNext", "dom"],
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"],
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "activity.android.ts", "application.android.ts"],
  "files": ["./references.d.ts"],
  "exclude": ["node_modules", "platforms"]
}
```

## WebView Load Event Data

[EventData](https://docs.nativescript.org/api/interface/EventData)

LoadEventData

```
interface LoadEventData extends EventData {
  error: string;
  navigationType: NavigationType;
  url: string;
}
```

Event data containing information for the loading events of a WebView.

## Summary [​](https://docs.nativescript.org/api/interface/LoadEventData\#summary)

#### Properties

[error](https://docs.nativescript.org/api/interface/LoadEventData#error)[navigationType](https://docs.nativescript.org/api/interface/LoadEventData#navigationtype)[url](https://docs.nativescript.org/api/interface/LoadEventData#url)

2 properties inherited from [EventData](https://docs.nativescript.org/api/interface/EventData)

Click to expand

[eventName](https://docs.nativescript.org/api/interface/EventData#eventname)[object](https://docs.nativescript.org/api/interface/EventData#object)

## Properties [​](https://docs.nativescript.org/api/interface/LoadEventData\#properties)

### error [​](https://docs.nativescript.org/api/interface/LoadEventData\#error)

```
error: string
```

defined in [@nativescript/core/ui/web-view/index.d.ts:125:1](https://unpkg.com/browse/@nativescript/core//ui/web-view/index.d.ts#L125)

Gets the error (if any).

### navigationType [​](https://docs.nativescript.org/api/interface/LoadEventData\#navigationtype)

```
navigationType: NavigationType
```

defined in [@nativescript/core/ui/web-view/index.d.ts:120:1](https://unpkg.com/browse/@nativescript/core//ui/web-view/index.d.ts#L120)

Gets the navigation type of the web-view.

### url [​](https://docs.nativescript.org/api/interface/LoadEventData\#url)

```
url: string
```

defined in [@nativescript/core/ui/web-view/index.d.ts:115:1](https://unpkg.com/browse/@nativescript/core//ui/web-view/index.d.ts#L115)

Gets the url of the web-view.

2. [Summary](https://docs.nativescript.org/api/interface/LoadEventData#summary)
3. [Properties](https://docs.nativescript.org/api/interface/LoadEventData#properties)
1. [error](https://docs.nativescript.org/api/interface/LoadEventData#error)
2. [navigationType](https://docs.nativescript.org/api/interface/LoadEventData#navigationtype)
3. [url](https://docs.nativescript.org/api/interface/LoadEventData#url)


## ListView Component

[View](https://docs.nativescript.org/api/class/View)

ListView

Represents a view that shows items in a vertically scrolling list.

## Summary [​](https://docs.nativescript.org/api/class/ListView\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ListView#constructor)

#### Properties

[android](https://docs.nativescript.org/api/class/ListView#android)[ios](https://docs.nativescript.org/api/class/ListView#ios)[iosEstimatedRowHeight](https://docs.nativescript.org/api/class/ListView#iosestimatedrowheight)[itemIdGenerator](https://docs.nativescript.org/api/class/ListView#itemidgenerator)[itemLoadingEvent](https://docs.nativescript.org/api/class/ListView#itemloadingevent)[items](https://docs.nativescript.org/api/class/ListView#items)[itemTapEvent](https://docs.nativescript.org/api/class/ListView#itemtapevent)[itemTemplate](https://docs.nativescript.org/api/class/ListView#itemtemplate)[itemTemplates](https://docs.nativescript.org/api/class/ListView#itemtemplates)[itemTemplateSelector](https://docs.nativescript.org/api/class/ListView#itemtemplateselector)[loadMoreItemsEvent](https://docs.nativescript.org/api/class/ListView#loadmoreitemsevent)[rowHeight](https://docs.nativescript.org/api/class/ListView#rowheight)[separatorColor](https://docs.nativescript.org/api/class/ListView#separatorcolor)

#### Methods

[isItemAtIndexVisible](https://docs.nativescript.org/api/class/ListView#isitematindexvisible)[on](https://docs.nativescript.org/api/class/ListView#on)[refresh](https://docs.nativescript.org/api/class/ListView#refresh)[scrollToIndex](https://docs.nativescript.org/api/class/ListView#scrolltoindex)[scrollToIndexAnimated](https://docs.nativescript.org/api/class/ListView#scrolltoindexanimated)

111 methods inherited from View

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildeachChildViewensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/ListView\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ListView\#constructor)

```
new ListView(): ListView
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[ListView](https://docs.nativescript.org/api/class/ListView)_

## Properties [​](https://docs.nativescript.org/api/class/ListView\#properties)

### android [​](https://docs.nativescript.org/api/class/ListView\#android)

```
android: any
```

defined in [@nativescript/core/ui/list-view/index.d.ts:29:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L29)

Gets the native \[android widget\](http://developer.android.com/reference/android/widget/ListView.html) that represents the user interface for this component. Valid only when running on Android OS.

### ios [​](https://docs.nativescript.org/api/class/ListView\#ios)

```
ios: any
```

defined in [@nativescript/core/ui/list-view/index.d.ts:34:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L34)

Gets the native \[iOS view\](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView\_Class/) that represents the user interface for this component. Valid only when running on iOS.

### iosEstimatedRowHeight [​](https://docs.nativescript.org/api/class/ListView\#iosestimatedrowheight)

```
iosEstimatedRowHeight: LengthType
```

defined in [@nativescript/core/ui/list-view/index.d.ts:76:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L76)

Gets or set the estimated height of rows in the ListView.
The default value is 44px.

### itemIdGenerator [​](https://docs.nativescript.org/api/class/ListView\#itemidgenerator)

```
itemIdGenerator: (item: any, index: number, items: any) => number
```

defined in [@nativescript/core/ui/list-view/index.d.ts:60:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L60)

### itemTemplate [​](https://docs.nativescript.org/api/class/ListView\#itemtemplate)

```
itemTemplate: string | Template
```

defined in [@nativescript/core/ui/list-view/index.d.ts:45:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L45)

Gets or set the item template of the ListView.

### itemTemplateSelector [​](https://docs.nativescript.org/api/class/ListView\#itemtemplateselector)

```
itemTemplateSelector: string | (item: any, index: number, items: any) => string
```

defined in [@nativescript/core/ui/list-view/index.d.ts:55:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L55)

A function that returns the appropriate ket template based on the data item.

### itemTemplates [​](https://docs.nativescript.org/api/class/ListView\#itemtemplates)

```
itemTemplates: string | KeyedTemplate[]
```

defined in [@nativescript/core/ui/list-view/index.d.ts:50:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L50)

Gets or set the list of item templates for the item template selector

### items [​](https://docs.nativescript.org/api/class/ListView\#items)

```
items: any[] | ItemsSource
```

defined in [@nativescript/core/ui/list-view/index.d.ts:40:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L40)

Gets or set the items collection of the ListView.
The items property can be set to an array or an object defining length and getItem(index) method.

### rowHeight [​](https://docs.nativescript.org/api/class/ListView\#rowheight)

```
rowHeight: LengthType
```

defined in [@nativescript/core/ui/list-view/index.d.ts:70:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L70)

Gets or set row height of the ListView.

### separatorColor [​](https://docs.nativescript.org/api/class/ListView\#separatorcolor)

```
separatorColor: Color
```

defined in [@nativescript/core/ui/list-view/index.d.ts:65:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L65)

Gets or set the items separator line color of the ListView.

### itemLoadingEvent [​](https://docs.nativescript.org/api/class/ListView\#itemloadingevent)

Static

```
itemLoadingEvent: string
```

defined in [@nativescript/core/ui/list-view/index.d.ts:16:15](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L16)

String value used when hooking to itemLoading event.

### itemTapEvent [​](https://docs.nativescript.org/api/class/ListView\#itemtapevent)

Static

```
itemTapEvent: string
```

defined in [@nativescript/core/ui/list-view/index.d.ts:20:15](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L20)

String value used when hooking to itemTap event.

### loadMoreItemsEvent [​](https://docs.nativescript.org/api/class/ListView\#loadmoreitemsevent)

Static

```
loadMoreItemsEvent: string
```

defined in [@nativescript/core/ui/list-view/index.d.ts:24:15](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L24)

String value used when hooking to loadMoreItems event.

## Methods [​](https://docs.nativescript.org/api/class/ListView\#methods)

### isItemAtIndexVisible [​](https://docs.nativescript.org/api/class/ListView\#isitematindexvisible)

```
isItemAtIndexVisible(index: number): boolean
```

defined in [@nativescript/core/ui/list-view/index.d.ts:103:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L103)

Checks if Specified item with index is visible.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `index` | `` | `number`<br>Item index. |

Returns _boolean_

### on [​](https://docs.nativescript.org/api/class/ListView\#on)

```
on(eventNames: string, callback: (data: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/ui/list-view/index.d.ts:111:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L111)

A basic method signature to hook an event listener (shortcut alias to the addEventListener method).

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `eventNames` | `` | `string`<br>String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `` `,` `` (e.g. "propertyChange", "change"). |
| `callback` | `` | `(data: EventData) => void`<br>Callback function which will be executed when event is raised. |
| `thisArg` | `` | `any`<br>An optional parameter which will be used as `` `this` `` context for callback execution. |

Returns _void_

```
on(event: "itemLoading", callback: (args: ItemEventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/ui/list-view/index.d.ts:119:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L119)

Raised when a View for the data at the specified index should be created.
The result should be returned trough the view property of the event data.
Note, that the view property of the event data can be pre-initialized with
an old instance of a view, so that it can be reused.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"itemLoading"` |
| `callback` | `` | `(args: ItemEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(event: "itemTap", callback: (args: ItemEventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/ui/list-view/index.d.ts:124:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L124)

Raised when an item inside the ListView is tapped.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"itemTap"` |
| `callback` | `` | `(args: ItemEventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

```
on(event: "loadMoreItems", callback: (args: EventData) => void, thisArg?: any): void
```

defined in [@nativescript/core/ui/list-view/index.d.ts:129:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L129)

Raised when the ListView is scrolled so that its last item is visible.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `event` | `` | `"loadMoreItems"` |
| `callback` | `` | `(args: EventData) => void` |
| `thisArg` | `` | `any` |

Returns _void_

### refresh [​](https://docs.nativescript.org/api/class/ListView\#refresh)

```
refresh(): any
```

defined in [@nativescript/core/ui/list-view/index.d.ts:81:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L81)

Forces the ListView to reload all its items.

Returns _any_

### scrollToIndex [​](https://docs.nativescript.org/api/class/ListView\#scrolltoindex)

```
scrollToIndex(index: number): any
```

defined in [@nativescript/core/ui/list-view/index.d.ts:89:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L89)

Scrolls the specified item with index into view.
\[iOS\](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UITableView\_Class/#//apple\_ref/occ/instm/UITableView/scrollToRowAtIndexPath:atScrollPosition:animated:)
\[Android\](http://developer.android.com/reference/android/widget/ListView.html#setSelection(int))

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `index` | `` | `number`<br>Item index. |

Returns _any_

### scrollToIndexAnimated [​](https://docs.nativescript.org/api/class/ListView\#scrolltoindexanimated)

```
scrollToIndexAnimated(index: number): any
```

defined in [@nativescript/core/ui/list-view/index.d.ts:97:1](https://unpkg.com/browse/@nativescript/core//ui/list-view/index.d.ts#L97)

Scrolls the specified item with index into view with animation.
\[iOS\](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UITableView\_Class/#//apple\_ref/occ/instm/UITableView/scrollToRowAtIndexPath:atScrollPosition:animated:)
\[Android\](https://developer.android.com/reference/android/widget/ListView.html#smoothScrollToPosition(int))

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `index` | `` | `number`<br>Item index. |

Returns _any_

2. [Summary](https://docs.nativescript.org/api/class/ListView#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ListView#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ListView#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ListView#properties)
01. [android](https://docs.nativescript.org/api/class/ListView#android)
02. [ios](https://docs.nativescript.org/api/class/ListView#ios)
03. [iosEstimatedRowHeight](https://docs.nativescript.org/api/class/ListView#iosestimatedrowheight)
04. [itemIdGenerator](https://docs.nativescript.org/api/class/ListView#itemidgenerator)
05. [itemTemplate](https://docs.nativescript.org/api/class/ListView#itemtemplate)
06. [itemTemplateSelector](https://docs.nativescript.org/api/class/ListView#itemtemplateselector)
07. [itemTemplates](https://docs.nativescript.org/api/class/ListView#itemtemplates)
08. [items](https://docs.nativescript.org/api/class/ListView#items)
09. [rowHeight](https://docs.nativescript.org/api/class/ListView#rowheight)
10. [separatorColor](https://docs.nativescript.org/api/class/ListView#separatorcolor)
11. [itemLoadingEvent](https://docs.nativescript.org/api/class/ListView#itemloadingevent)
12. [itemTapEvent](https://docs.nativescript.org/api/class/ListView#itemtapevent)
13. [loadMoreItemsEvent](https://docs.nativescript.org/api/class/ListView#loadmoreitemsevent)
5. [Methods](https://docs.nativescript.org/api/class/ListView#methods)
1. [isItemAtIndexVisible](https://docs.nativescript.org/api/class/ListView#isitematindexvisible)
2. [on](https://docs.nativescript.org/api/class/ListView#on)
3. [refresh](https://docs.nativescript.org/api/class/ListView#refresh)
4. [scrollToIndex](https://docs.nativescript.org/api/class/ListView#scrolltoindex)
5. [scrollToIndexAnimated](https://docs.nativescript.org/api/class/ListView#scrolltoindexanimated)


## SlideTransition Class




[Transition](https://docs.nativescript.org/api/class/Transition)

SlideTransition

## Summary [​](https://docs.nativescript.org/api/class/SlideTransition\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/SlideTransition#constructor)

## Constructors [​](https://docs.nativescript.org/api/class/SlideTransition\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/SlideTransition\#constructor)

```
new SlideTransition(direction: string, duration?: number, nativeCurve?: any): SlideTransition
```

defined in [@nativescript/core/ui/transition/slide-transition.d.ts:4:1](https://unpkg.com/browse/@nativescript/core//ui/transition/slide-transition.d.ts#L4)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `direction` | `` | `string` |
| `duration` | `` | `number` |
| `nativeCurve` | `` | `any` |

Returns _[SlideTransition](https://docs.nativescript.org/api/class/SlideTransition)_

2. [Summary](https://docs.nativescript.org/api/class/SlideTransition#summary)
3. [Constructors](https://docs.nativescript.org/api/class/SlideTransition#constructors)
1. [constructor](https://docs.nativescript.org/api/class/SlideTransition#constructor)


## NativeScriptError Interface




Error

NativeScriptError

```
interface NativeScriptError extends Error {
  nativeException: any;
  stack: string;
  stackTrace: string;
}
```

An extended JavaScript Error which will have the nativeError property initialized in case the error is caused by executing platform-specific code.

## Summary [​](https://docs.nativescript.org/api/interface/NativeScriptError\#summary)

#### Properties

[nativeException](https://docs.nativescript.org/api/interface/NativeScriptError#nativeexception)[stack](https://docs.nativescript.org/api/interface/NativeScriptError#stack)[stackTrace](https://docs.nativescript.org/api/interface/NativeScriptError#stacktrace)

2 properties inherited from Error

Click to expand

messagename

## Properties [​](https://docs.nativescript.org/api/interface/NativeScriptError\#properties)

### nativeException [​](https://docs.nativescript.org/api/interface/NativeScriptError\#nativeexception)

```
nativeException?: any
```

defined in [@nativescript/core/application/application-interfaces.d.ts:11:4](https://unpkg.com/browse/@nativescript/core//application/application-interfaces.d.ts#L11)

Represents the native error object.

### stack [​](https://docs.nativescript.org/api/interface/NativeScriptError\#stack)

```
stack?: string
```

defined in [@nativescript/core/application/application-interfaces.d.ts:19:4](https://unpkg.com/browse/@nativescript/core//application/application-interfaces.d.ts#L19)

Javascript portion of stack trace.

### stackTrace [​](https://docs.nativescript.org/api/interface/NativeScriptError\#stacktrace)

```
stackTrace?: string
```

defined in [@nativescript/core/application/application-interfaces.d.ts:15:4](https://unpkg.com/browse/@nativescript/core//application/application-interfaces.d.ts#L15)

The native stack trace.

2. [Summary](https://docs.nativescript.org/api/interface/NativeScriptError#summary)
3. [Properties](https://docs.nativescript.org/api/interface/NativeScriptError#properties)
1. [nativeException](https://docs.nativescript.org/api/interface/NativeScriptError#nativeexception)
2. [stack](https://docs.nativescript.org/api/interface/NativeScriptError#stack)
3. [stackTrace](https://docs.nativescript.org/api/interface/NativeScriptError#stacktrace)


## Editable Text Base




[TextBase](https://docs.nativescript.org/api/class/TextBase)

EditableTextBase

[TextField](https://docs.nativescript.org/api/class/TextField) [TextView](https://docs.nativescript.org/api/class/TextView)

Represents the base class for all editable text views.

## Summary [​](https://docs.nativescript.org/api/class/EditableTextBase\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/EditableTextBase#constructor)

#### Properties

[autocapitalizationType](https://docs.nativescript.org/api/class/EditableTextBase#autocapitalizationtype)[autocorrect](https://docs.nativescript.org/api/class/EditableTextBase#autocorrect)[autofillType](https://docs.nativescript.org/api/class/EditableTextBase#autofilltype)[blurEvent](https://docs.nativescript.org/api/class/EditableTextBase#blurevent)[editable](https://docs.nativescript.org/api/class/EditableTextBase#editable)[focusEvent](https://docs.nativescript.org/api/class/EditableTextBase#focusevent)[hint](https://docs.nativescript.org/api/class/EditableTextBase#hint)[keyboardType](https://docs.nativescript.org/api/class/EditableTextBase#keyboardtype)[maxLength](https://docs.nativescript.org/api/class/EditableTextBase#maxlength)[returnKeyType](https://docs.nativescript.org/api/class/EditableTextBase#returnkeytype)[textChangeEvent](https://docs.nativescript.org/api/class/EditableTextBase#textchangeevent)[updateTextTrigger](https://docs.nativescript.org/api/class/EditableTextBase#updatetexttrigger)[valueFormatter](https://docs.nativescript.org/api/class/EditableTextBase#valueformatter)

171 properties inherited from TextBase

Click to expand

\_androidContentDescriptionUpdated\_automaticallyAdjustsScrollViewInsets\_closeModalCallback\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isLayoutValid\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountaccessibilityBlurEventaccessibilityFocusChangedEventaccessibilityFocusEventaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityLabelaccessibilityLanguageaccessibilityLiveRegionaccessibilityMediaSessionaccessibilityPerformEscapeEventaccessibilityRoleaccessibilityStateaccessibilityValueaccessiblealignSelfandroidandroidDynamicElevationOffsetandroidElevationautomationTextbackgroundbackgroundColorbackgroundImagebindingContextborderBottomColorborderBottomLeftRadiusborderBottomRightRadiusborderBottomWidthborderColorborderLeftColorborderLeftWidthborderRadiusborderRightColorborderRightWidthborderTopColorborderTopLeftRadiusborderTopRightRadiusborderTopWidthborderWidthboxShadowclassNamecolcolorcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassescssTypedisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforefontSizeformattedTextheighthorizontalAlignmentidignoreTouchAnimationiosiosAccessibilityAdjustsFontSizeiosAccessibilityMaxFontScaleiosAccessibilityMinFontScaleiosIgnoreSafeAreaiosOverflowSafeAreaiosOverflowSafeAreaEnabledisCollapsedisEnabledisLayoutValidisUserInteractionEnabledlayoutChangedEventleftletterSpacinglineHeightloadedEventmarginmarginBottommarginLeftmarginRightmarginTopmaxLinesminHeightminWidthmodalnativeTextViewProtectednativeViewProtectedopacityorderoriginXoriginYpaddingpaddingBottompaddingLeftpaddingRightpaddingTopparentperspectivepropertyChangeEventrecycleNativeViewreusablerotaterotateXrotateYrowrowSpanscaleXscaleYsharedTransitionIgnoresharedTransitionTagshowingModallyEventshownModallyEventtestIDtexttextAlignmenttextDecorationtextShadowtextTransformtoptouchAnimationtouchDelaytransitionIdtranslateXtranslateYunloadedEventverticalAlignmentviewControllervisibilitywhiteSpacewidth

#### Methods

[dismissSoftInput](https://docs.nativescript.org/api/class/EditableTextBase#dismisssoftinput)[setSelection](https://docs.nativescript.org/api/class/EditableTextBase#setselection)

112 methods inherited from TextBase

Click to expand

\_addView\_addViewCore\_addViewToNativeVisualTree\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_eachLayoutView\_emit\_getNativeViewsCount\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_parentChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_removeViewFromNativeVisualTree\_resumeNativeUpdates\_setupAsRootView\_setupUI\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_tearDownUI\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationcreateNativeViewdeletePseudoClassdestroyNodedisposeNativeVieweachChildeachChildViewensureDomNodefocusgetgetActualSizegetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffonononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/EditableTextBase\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/EditableTextBase\#constructor)

```
new EditableTextBase(): EditableTextBase
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[EditableTextBase](https://docs.nativescript.org/api/class/EditableTextBase)_

## Properties [​](https://docs.nativescript.org/api/class/EditableTextBase\#properties)

### autocapitalizationType [​](https://docs.nativescript.org/api/class/EditableTextBase\#autocapitalizationtype)

```
autocapitalizationType: AutocapitalizationInputType
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:34:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L34)

Gets or sets the autocapitalization type.

### autocorrect [​](https://docs.nativescript.org/api/class/EditableTextBase\#autocorrect)

```
autocorrect: boolean
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:49:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L49)

Enables or disables autocorrection.

### autofillType [​](https://docs.nativescript.org/api/class/EditableTextBase\#autofilltype)

```
autofillType: string
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:39:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L39)

Gets or sets the autofill type.

### editable [​](https://docs.nativescript.org/api/class/EditableTextBase\#editable)

```
editable: boolean
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:44:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L44)

Gets or sets whether the instance is editable.

### hint [​](https://docs.nativescript.org/api/class/EditableTextBase\#hint)

```
hint: string
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:54:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L54)

Gets or sets the placeholder text.

### keyboardType [​](https://docs.nativescript.org/api/class/EditableTextBase\#keyboardtype)

```
keyboardType: KeyboardInputType
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:19:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L19)

Gets or sets the soft keyboard type.

### maxLength [​](https://docs.nativescript.org/api/class/EditableTextBase\#maxlength)

```
maxLength: number
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:59:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L59)

Limits input to a certain number of characters.

### returnKeyType [​](https://docs.nativescript.org/api/class/EditableTextBase\#returnkeytype)

```
returnKeyType: ReturnKeyButtonType
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:24:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L24)

Gets or sets the soft keyboard return key flavor.

### updateTextTrigger [​](https://docs.nativescript.org/api/class/EditableTextBase\#updatetexttrigger)

```
updateTextTrigger: UpdateTextTriggerType
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:29:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L29)

Gets or sets a value indicating when the text property will be updated.

### valueFormatter [​](https://docs.nativescript.org/api/class/EditableTextBase\#valueformatter)

```
valueFormatter: (value: string) => string
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:65:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L65)

### blurEvent [​](https://docs.nativescript.org/api/class/EditableTextBase\#blurevent)

Static

```
blurEvent: string
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:12:15](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L12)

### focusEvent [​](https://docs.nativescript.org/api/class/EditableTextBase\#focusevent)

Static

```
focusEvent: string
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:13:15](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L13)

### textChangeEvent [​](https://docs.nativescript.org/api/class/EditableTextBase\#textchangeevent)

Static

```
textChangeEvent: string
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:14:15](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L14)

## Methods [​](https://docs.nativescript.org/api/class/EditableTextBase\#methods)

### dismissSoftInput [​](https://docs.nativescript.org/api/class/EditableTextBase\#dismisssoftinput)

```
dismissSoftInput(): void
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:70:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L70)

Hides the soft input method, ususally a soft keyboard.

Returns _void_

### setSelection [​](https://docs.nativescript.org/api/class/EditableTextBase\#setselection)

```
setSelection(start: number, stop?: number): any
```

defined in [@nativescript/core/ui/editable-text-base/index.d.ts:82:1](https://unpkg.com/browse/@nativescript/core//ui/editable-text-base/index.d.ts#L82)

Set the selection anchor to start and the selection edge to stop

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `start` | `` | `number` |
| `stop` | `` | `number` |

Returns _any_

2. [Summary](https://docs.nativescript.org/api/class/EditableTextBase#summary)
3. [Constructors](https://docs.nativescript.org/api/class/EditableTextBase#constructors)
1. [constructor](https://docs.nativescript.org/api/class/EditableTextBase#constructor)
4. [Properties](https://docs.nativescript.org/api/class/EditableTextBase#properties)
01. [autocapitalizationType](https://docs.nativescript.org/api/class/EditableTextBase#autocapitalizationtype)
02. [autocorrect](https://docs.nativescript.org/api/class/EditableTextBase#autocorrect)
03. [autofillType](https://docs.nativescript.org/api/class/EditableTextBase#autofilltype)
04. [editable](https://docs.nativescript.org/api/class/EditableTextBase#editable)
05. [hint](https://docs.nativescript.org/api/class/EditableTextBase#hint)
06. [keyboardType](https://docs.nativescript.org/api/class/EditableTextBase#keyboardtype)
07. [maxLength](https://docs.nativescript.org/api/class/EditableTextBase#maxlength)
08. [returnKeyType](https://docs.nativescript.org/api/class/EditableTextBase#returnkeytype)
09. [updateTextTrigger](https://docs.nativescript.org/api/class/EditableTextBase#updatetexttrigger)
10. [valueFormatter](https://docs.nativescript.org/api/class/EditableTextBase#valueformatter)
11. [blurEvent](https://docs.nativescript.org/api/class/EditableTextBase#blurevent)
12. [focusEvent](https://docs.nativescript.org/api/class/EditableTextBase#focusevent)
13. [textChangeEvent](https://docs.nativescript.org/api/class/EditableTextBase#textchangeevent)
5. [Methods](https://docs.nativescript.org/api/class/EditableTextBase#methods)
1. [dismissSoftInput](https://docs.nativescript.org/api/class/EditableTextBase#dismisssoftinput)
2. [setSelection](https://docs.nativescript.org/api/class/EditableTextBase#setselection)


## NativeScript Configuration




NativeScriptConfig

```
interface NativeScriptConfig {
  android: IConfigAndroid;
  appPath: string;
  appResourcesPath: string;
  cli: IConfigCLI;
  cssParser: "rework" | "nativescript" | "css-tree";
  hooks: IConfigHook[];
  id: string;
  ignoredNativeDependencies: string[];
  ios: IConfigIOS;
  main: string;
  overridePods: string;
  previewAppSchema: string;
  profiling: InstrumentationMode;
  shared: boolean;
  webpackConfigPath: string;
}
```

## Summary [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#summary)

#### Properties

[android](https://docs.nativescript.org/api/interface/NativeScriptConfig#android)[appPath](https://docs.nativescript.org/api/interface/NativeScriptConfig#apppath)[appResourcesPath](https://docs.nativescript.org/api/interface/NativeScriptConfig#appresourcespath)[cli](https://docs.nativescript.org/api/interface/NativeScriptConfig#cli)[cssParser](https://docs.nativescript.org/api/interface/NativeScriptConfig#cssparser)[hooks](https://docs.nativescript.org/api/interface/NativeScriptConfig#hooks)[id](https://docs.nativescript.org/api/interface/NativeScriptConfig#id)[ignoredNativeDependencies](https://docs.nativescript.org/api/interface/NativeScriptConfig#ignorednativedependencies)[ios](https://docs.nativescript.org/api/interface/NativeScriptConfig#ios)[main](https://docs.nativescript.org/api/interface/NativeScriptConfig#main)[overridePods](https://docs.nativescript.org/api/interface/NativeScriptConfig#overridepods)[previewAppSchema](https://docs.nativescript.org/api/interface/NativeScriptConfig#previewappschema)[profiling](https://docs.nativescript.org/api/interface/NativeScriptConfig#profiling)[shared](https://docs.nativescript.org/api/interface/NativeScriptConfig#shared)[webpackConfigPath](https://docs.nativescript.org/api/interface/NativeScriptConfig#webpackconfigpath)

## Properties [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#properties)

### android [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#android)

```
android?: IConfigAndroid
```

defined in [@nativescript/core/config/config.interface.d.ts:167:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L167)

Android specific configurations
Various Android specific configurations including Android runtime flags.

### appPath [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#apppath)

```
appPath?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:144:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L144)

Path to the app source directory
This is often the `` `src` `` or `` `app` `` directory however can be changed.

### appResourcesPath [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#appresourcespath)

```
appResourcesPath?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:149:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L149)

App\_Resources path
This is often at the root or inside `` `src` `` or `` `app` `` directory however can be anywhere.

### cli [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#cli)

```
cli?: IConfigCLI
```

defined in [@nativescript/core/config/config.interface.d.ts:185:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L185)

Set cli options

### cssParser [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#cssparser)

```
cssParser?: "rework" | "nativescript" | "css-tree"
```

defined in [@nativescript/core/config/config.interface.d.ts:177:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L177)

Set the default CSS parser that NativeScript will use.
Default: css-tree

### hooks [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#hooks)

```
hooks?: IConfigHook[]
```

defined in [@nativescript/core/config/config.interface.d.ts:189:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L189)

Set project persistent hooks to run

### id [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#id)

```
id?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:135:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L135)

App's bundle id
Used for both iOS and Android if they use the same bundle id. You can override per platform in the respective platform specific configurations.

### ignoredNativeDependencies [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#ignorednativedependencies)

```
ignoredNativeDependencies?: string[]
```

defined in [@nativescript/core/config/config.interface.d.ts:181:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L181)

Optionally specify a list of npm package names for which you would like the NativeScript CLI to ignore when attaching native dependencies to the build

### ios [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#ios)

```
ios?: IConfigIOS
```

defined in [@nativescript/core/config/config.interface.d.ts:162:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L162)

iOS specific configurations
Various iOS specific configurations including iOS runtime flags.

### main [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#main)

```
main?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:139:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L139)

App's main entry file - this setting overrides the value set in package.json

### overridePods [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#overridepods)

```
overridePods?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:152:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L152)

### previewAppSchema [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#previewappschema)

```
previewAppSchema?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:151:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L151)

### profiling [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#profiling)

```
profiling?: InstrumentationMode
```

defined in [@nativescript/core/config/config.interface.d.ts:172:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L172)

Enable profiling for the application. Default: no profiling
In most cases when profiling, you will want to use "timeline"

### shared [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#shared)

```
shared?: boolean
```

defined in [@nativescript/core/config/config.interface.d.ts:150:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L150)

### webpackConfigPath [​](https://docs.nativescript.org/api/interface/NativeScriptConfig\#webpackconfigpath)

```
webpackConfigPath?: string
```

defined in [@nativescript/core/config/config.interface.d.ts:157:4](https://unpkg.com/browse/@nativescript/core//config/config.interface.d.ts#L157)

Custom webpack config path
The default is `` `webpack.config.js` `` in the root however you can use a custom name and place elsewhere.

2. [Summary](https://docs.nativescript.org/api/interface/NativeScriptConfig#summary)
3. [Properties](https://docs.nativescript.org/api/interface/NativeScriptConfig#properties)
01. [android](https://docs.nativescript.org/api/interface/NativeScriptConfig#android)
02. [appPath](https://docs.nativescript.org/api/interface/NativeScriptConfig#apppath)
03. [appResourcesPath](https://docs.nativescript.org/api/interface/NativeScriptConfig#appresourcespath)
04. [cli](https://docs.nativescript.org/api/interface/NativeScriptConfig#cli)
05. [cssParser](https://docs.nativescript.org/api/interface/NativeScriptConfig#cssparser)
06. [hooks](https://docs.nativescript.org/api/interface/NativeScriptConfig#hooks)
07. [id](https://docs.nativescript.org/api/interface/NativeScriptConfig#id)
08. [ignoredNativeDependencies](https://docs.nativescript.org/api/interface/NativeScriptConfig#ignorednativedependencies)
09. [ios](https://docs.nativescript.org/api/interface/NativeScriptConfig#ios)
10. [main](https://docs.nativescript.org/api/interface/NativeScriptConfig#main)
11. [overridePods](https://docs.nativescript.org/api/interface/NativeScriptConfig#overridepods)
12. [previewAppSchema](https://docs.nativescript.org/api/interface/NativeScriptConfig#previewappschema)
13. [profiling](https://docs.nativescript.org/api/interface/NativeScriptConfig#profiling)
14. [shared](https://docs.nativescript.org/api/interface/NativeScriptConfig#shared)
15. [webpackConfigPath](https://docs.nativescript.org/api/interface/NativeScriptConfig#webpackconfigpath)


## ShorthandProperty Class




ShorthandProperty

## Summary [​](https://docs.nativescript.org/api/class/ShorthandProperty\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ShorthandProperty#constructor)

#### Properties

[cssLocalName](https://docs.nativescript.org/api/class/ShorthandProperty#csslocalname)[cssName](https://docs.nativescript.org/api/class/ShorthandProperty#cssname)[cssValueDescriptor](https://docs.nativescript.org/api/class/ShorthandProperty#cssvaluedescriptor)[key](https://docs.nativescript.org/api/class/ShorthandProperty#key)[localValueDescriptor](https://docs.nativescript.org/api/class/ShorthandProperty#localvaluedescriptor)[name](https://docs.nativescript.org/api/class/ShorthandProperty#name)[propertyBagDescriptor](https://docs.nativescript.org/api/class/ShorthandProperty#propertybagdescriptor)[sourceKey](https://docs.nativescript.org/api/class/ShorthandProperty#sourcekey)

#### Methods

[register](https://docs.nativescript.org/api/class/ShorthandProperty#register)

## Constructors [​](https://docs.nativescript.org/api/class/ShorthandProperty\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ShorthandProperty\#constructor)

```
new ShorthandProperty<T, P>(options: ShorthandPropertyOptions<P>): ShorthandProperty<T, P>
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:131:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L131)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `ShorthandPropertyOptions<P>` |

Returns _[ShorthandProperty](https://docs.nativescript.org/api/class/ShorthandProperty) <T, P>_

## Properties [​](https://docs.nativescript.org/api/class/ShorthandProperty\#properties)

### cssLocalName [​](https://docs.nativescript.org/api/class/ShorthandProperty\#csslocalname)

Readonly

```
cssLocalName: string
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:126:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L126)

### cssName [​](https://docs.nativescript.org/api/class/ShorthandProperty\#cssname)

Readonly

```
cssName: string
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:125:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L125)

### cssValueDescriptor [​](https://docs.nativescript.org/api/class/ShorthandProperty\#cssvaluedescriptor)

ProtectedReadonly

```
cssValueDescriptor: PropertyDescriptor
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:127:23](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L127)

### key [​](https://docs.nativescript.org/api/class/ShorthandProperty\#key)

Readonly

```
key: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:123:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L123)

### localValueDescriptor [​](https://docs.nativescript.org/api/class/ShorthandProperty\#localvaluedescriptor)

ProtectedReadonly

```
localValueDescriptor: PropertyDescriptor
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:128:23](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L128)

### name [​](https://docs.nativescript.org/api/class/ShorthandProperty\#name)

Readonly

```
name: string
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:124:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L124)

### propertyBagDescriptor [​](https://docs.nativescript.org/api/class/ShorthandProperty\#propertybagdescriptor)

ProtectedReadonly

```
propertyBagDescriptor: PropertyDescriptor
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:129:23](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L129)

### sourceKey [​](https://docs.nativescript.org/api/class/ShorthandProperty\#sourcekey)

Readonly

```
sourceKey: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:130:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L130)

## Methods [​](https://docs.nativescript.org/api/class/ShorthandProperty\#methods)

### register [​](https://docs.nativescript.org/api/class/ShorthandProperty\#register)

```
register(cls: typeof Style): void
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:132:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L132)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `cls` | `` | `typeof Style` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/ShorthandProperty#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ShorthandProperty#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ShorthandProperty#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ShorthandProperty#properties)
1. [cssLocalName](https://docs.nativescript.org/api/class/ShorthandProperty#csslocalname)
2. [cssName](https://docs.nativescript.org/api/class/ShorthandProperty#cssname)
3. [cssValueDescriptor](https://docs.nativescript.org/api/class/ShorthandProperty#cssvaluedescriptor)
4. [key](https://docs.nativescript.org/api/class/ShorthandProperty#key)
5. [localValueDescriptor](https://docs.nativescript.org/api/class/ShorthandProperty#localvaluedescriptor)
6. [name](https://docs.nativescript.org/api/class/ShorthandProperty#name)
7. [propertyBagDescriptor](https://docs.nativescript.org/api/class/ShorthandProperty#propertybagdescriptor)
8. [sourceKey](https://docs.nativescript.org/api/class/ShorthandProperty#sourcekey)
5. [Methods](https://docs.nativescript.org/api/class/ShorthandProperty#methods)
1. [register](https://docs.nativescript.org/api/class/ShorthandProperty#register)


## Root View Controller




RootViewControllerImpl

```
interface RootViewControllerImpl {
  /** @deprecated */  contentController: any;
}
```

## Summary [​](https://docs.nativescript.org/api/interface/RootViewControllerImpl\#summary)

#### Properties

[contentController](https://docs.nativescript.org/api/interface/RootViewControllerImpl#contentcontroller)

## Properties [​](https://docs.nativescript.org/api/interface/RootViewControllerImpl\#properties)

### contentController [​](https://docs.nativescript.org/api/interface/RootViewControllerImpl\#contentcontroller)

```
contentController: any
```

defined in [@nativescript/core/application/application-interfaces.d.ts:181:4](https://unpkg.com/browse/@nativescript/core//application/application-interfaces.d.ts#L181)

Next [AccessibilityEvents→](https://docs.nativescript.org/api/namespace/AccessibilityEvents)

2. [Summary](https://docs.nativescript.org/api/interface/RootViewControllerImpl#summary)
3. [Properties](https://docs.nativescript.org/api/interface/RootViewControllerImpl#properties)
1. [contentController](https://docs.nativescript.org/api/interface/RootViewControllerImpl#contentcontroller)


## HttpContent Interface




HttpContent

```
interface HttpContent {
  raw: any;
  toArrayBuffer: () => ArrayBuffer;
  toFile: (destinationFilePath?: string) => File;
  toImage: () => Promise<ImageSource>;
  toJSON: (encoding?: HttpResponseEncoding) => any;
  toString: (encoding?: HttpResponseEncoding) => string;
}
```

Encapsulates the content of an HttpResponse.

## Summary [​](https://docs.nativescript.org/api/interface/HttpContent\#summary)

#### Properties

[raw](https://docs.nativescript.org/api/interface/HttpContent#raw)[toArrayBuffer](https://docs.nativescript.org/api/interface/HttpContent#toarraybuffer)[toFile](https://docs.nativescript.org/api/interface/HttpContent#tofile)[toImage](https://docs.nativescript.org/api/interface/HttpContent#toimage)[toJSON](https://docs.nativescript.org/api/interface/HttpContent#tojson)[toString](https://docs.nativescript.org/api/interface/HttpContent#tostring)

## Properties [​](https://docs.nativescript.org/api/interface/HttpContent\#properties)

### raw [​](https://docs.nativescript.org/api/interface/HttpContent\#raw)

```
raw: any
```

defined in [@nativescript/core/http/index.d.ts:140:1](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L140)

Gets the response body as raw data.

### toArrayBuffer [​](https://docs.nativescript.org/api/interface/HttpContent\#toarraybuffer)

```
toArrayBuffer: () => ArrayBuffer
```

defined in [@nativescript/core/http/index.d.ts:145:1](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L145)

### toFile [​](https://docs.nativescript.org/api/interface/HttpContent\#tofile)

```
toFile: (destinationFilePath?: string) => File
```

defined in [@nativescript/core/http/index.d.ts:165:1](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L165)

### toImage [​](https://docs.nativescript.org/api/interface/HttpContent\#toimage)

```
toImage: () => Promise<ImageSource>
```

defined in [@nativescript/core/http/index.d.ts:160:1](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L160)

### toJSON [​](https://docs.nativescript.org/api/interface/HttpContent\#tojson)

```
toJSON: (encoding?: HttpResponseEncoding) => any
```

defined in [@nativescript/core/http/index.d.ts:155:1](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L155)

### toString [​](https://docs.nativescript.org/api/interface/HttpContent\#tostring)

```
toString: (encoding?: HttpResponseEncoding) => string
```

defined in [@nativescript/core/http/index.d.ts:150:1](https://unpkg.com/browse/@nativescript/core//http/index.d.ts#L150)

2. [Summary](https://docs.nativescript.org/api/interface/HttpContent#summary)
3. [Properties](https://docs.nativescript.org/api/interface/HttpContent#properties)
1. [raw](https://docs.nativescript.org/api/interface/HttpContent#raw)
2. [toArrayBuffer](https://docs.nativescript.org/api/interface/HttpContent#toarraybuffer)
3. [toFile](https://docs.nativescript.org/api/interface/HttpContent#tofile)
4. [toImage](https://docs.nativescript.org/api/interface/HttpContent#toimage)
5. [toJSON](https://docs.nativescript.org/api/interface/HttpContent#tojson)
6. [toString](https://docs.nativescript.org/api/interface/HttpContent#tostring)


## Proxy View Container




[LayoutBase](https://docs.nativescript.org/api/class/LayoutBase)

ProxyViewContainer

Proxy view container that adds all its native children directly to the parent.
To be used as a logical grouping container of views.

## Summary [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ProxyViewContainer#constructor)

#### Accessors

[android](https://docs.nativescript.org/api/class/ProxyViewContainer#android)[ios](https://docs.nativescript.org/api/class/ProxyViewContainer#ios)[isLayoutRequested](https://docs.nativescript.org/api/class/ProxyViewContainer#islayoutrequested)

11 accessors inherited from LayoutBase

Click to expand

backgroundPositionbackgroundRepeatbackgroundSizeclassisLoadednativeViewpageparentNodestyletextTransformtypeName

#### Methods

[\_addViewToNativeVisualTree](https://docs.nativescript.org/api/class/ProxyViewContainer#addviewtonativevisualtree)[\_changedLayoutProperty](https://docs.nativescript.org/api/class/ProxyViewContainer#changedlayoutproperty)[\_eachLayoutView](https://docs.nativescript.org/api/class/ProxyViewContainer#eachlayoutview)[\_getNativeViewsCount](https://docs.nativescript.org/api/class/ProxyViewContainer#getnativeviewscount)[\_parentChanged](https://docs.nativescript.org/api/class/ProxyViewContainer#parentchanged)[\_registerLayoutChild](https://docs.nativescript.org/api/class/ProxyViewContainer#registerlayoutchild)[\_removeViewFromNativeVisualTree](https://docs.nativescript.org/api/class/ProxyViewContainer#removeviewfromnativevisualtree)[\_setupUI](https://docs.nativescript.org/api/class/ProxyViewContainer#setupui)[\_tearDownUI](https://docs.nativescript.org/api/class/ProxyViewContainer#teardownui)[\_unregisterLayoutChild](https://docs.nativescript.org/api/class/ProxyViewContainer#unregisterlayoutchild)[createNativeView](https://docs.nativescript.org/api/class/ProxyViewContainer#createnativeview)

112 methods inherited from LayoutBase

Click to expand

\_addView\_addViewCore\_applyXmlAttribute\_batchUpdate\_childIndexToNativeChildIndex\_closeAllModalViewsInternal\_createPropertyChangeData\_dialogClosed\_emit\_getRootModalViews\_getValue\_handleLivesync\_hasAncestorView\_hideNativeModalView\_inheritStyleScope\_layoutParent\_observe\_onAttachedToWindow\_onDetachedFromWindow\_onRootViewReset\_onSizeChanged\_raiseLayoutChangedEvent\_raiseShowingModallyEvent\_raiseShownModallyEvent\_removeView\_removeViewCore\_resumeNativeUpdates\_setupAsRootView\_setValue\_shouldDelayLayout\_showNativeModalView\_suspendNativeUpdates\_updateStyleScopeaccessibilityAnnouncementaccessibilityScreenChangedaddChildaddEventListeneraddEventListeneraddPseudoClassanimatebindcallLoadedcallUnloadedcloseModalcombineMeasuredStatescreateAnimationdeletePseudoClassdestroyNodedisposeNativeVieweachChildeachChildVieweachLayoutChildensureDomNodefocusgetgetActualSizegetChildAtgetChildIndexgetChildrenCountgetGestureObserversgetLocationInWindowgetLocationOnScreengetLocationRelativeTogetMeasuredHeightgetMeasuredStategetMeasuredWidthgetSafeAreaInsetsgetViewByDomIdgetViewByIdhasGestureObservershasListenersinitNativeViewinsertChildlayoutlayoutChildlayoutNativeViewloadViewmeasuremeasureChildnotifynotifyPropertyChangeoffoffonononBackPressedonceonceonLayoutonLoadedonMeasureonResumeNativeUpdatesonUnloadedremoveChildremoveChildrenremoveEventListenerremoveEventListenerrequestLayoutresetNativeViewresolveSizeAndStatesendAccessibilityEventsetsetInlineStylesetMeasuredDimensionsetNativeViewsetOnTouchListenersetPropertysetTestIDshowModaltoStringunbindunloadView

## Constructors [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#constructor)

```
new ProxyViewContainer(): ProxyViewContainer
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:9:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L9)

Returns _[ProxyViewContainer](https://docs.nativescript.org/api/class/ProxyViewContainer)_

## Accessors [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#accessors)

### android [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#android)

```
get android(): any
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:11:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L11)

Returns _any_

### ios [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#ios)

```
get ios(): any
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:10:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L10)

Returns _any_

### isLayoutRequested [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#islayoutrequested)

```
get isLayoutRequested(): boolean
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:12:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L12)

Returns _boolean_

## Methods [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#methods)

### \_addViewToNativeVisualTree [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#addviewtonativevisualtree)

```
_addViewToNativeVisualTree(child: View, atIndex?: number): boolean
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:18:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L18)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |
| `atIndex` | `` | `number` |

Returns _boolean_

### \_changedLayoutProperty [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#changedlayoutproperty)

```
_changedLayoutProperty(propName: string, value: string): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:26:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L26)

Layout property changed, proxy the new value to the child view(s)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `propName` | `` | `string` |
| `value` | `` | `string` |

Returns _void_

### \_eachLayoutView [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#eachlayoutview)

```
_eachLayoutView(callback: (View: any) => void): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:15:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L15)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `callback` | `` | `(View: any) => void` |

Returns _void_

### \_getNativeViewsCount [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#getnativeviewscount)

```
_getNativeViewsCount(): number
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:14:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L14)

Returns _number_

### \_parentChanged [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#parentchanged)

```
_parentChanged(oldParent: View): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:22:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L22)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `oldParent` | `` | `View` |

Returns _void_

### \_registerLayoutChild [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#registerlayoutchild)

```
_registerLayoutChild(child: View): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:20:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L20)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |

Returns _void_

### \_removeViewFromNativeVisualTree [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#removeviewfromnativevisualtree)

```
_removeViewFromNativeVisualTree(child: View): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:19:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L19)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |

Returns _void_

### \_setupUI [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#setupui)

```
_setupUI(context: any, atIndex?: number, parentIsLoaded?: boolean): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:16:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L16)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `context` | `` | `any` |
| `atIndex` | `` | `number` |
| `parentIsLoaded` | `` | `boolean` |

Returns _void_

### \_tearDownUI [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#teardownui)

```
_tearDownUI(force?: boolean): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:17:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L17)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `force` | `` | `boolean` |

Returns _void_

### \_unregisterLayoutChild [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#unregisterlayoutchild)

```
_unregisterLayoutChild(child: View): void
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:21:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L21)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `child` | `` | `View` |

Returns _void_

### createNativeView [​](https://docs.nativescript.org/api/class/ProxyViewContainer\#createnativeview)

```
createNativeView(): any
```

defined in [@nativescript/core/ui/proxy-view-container/index.d.ts:13:4](https://unpkg.com/browse/@nativescript/core//ui/proxy-view-container/index.d.ts#L13)

Returns _any_

2. [Summary](https://docs.nativescript.org/api/class/ProxyViewContainer#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ProxyViewContainer#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ProxyViewContainer#constructor)
4. [Accessors](https://docs.nativescript.org/api/class/ProxyViewContainer#accessors)
1. [android](https://docs.nativescript.org/api/class/ProxyViewContainer#android)
2. [ios](https://docs.nativescript.org/api/class/ProxyViewContainer#ios)
3. [isLayoutRequested](https://docs.nativescript.org/api/class/ProxyViewContainer#islayoutrequested)
5. [Methods](https://docs.nativescript.org/api/class/ProxyViewContainer#methods)
01. [\_addViewToNativeVisualTree](https://docs.nativescript.org/api/class/ProxyViewContainer#addviewtonativevisualtree)
02. [\_changedLayoutProperty](https://docs.nativescript.org/api/class/ProxyViewContainer#changedlayoutproperty)
03. [\_eachLayoutView](https://docs.nativescript.org/api/class/ProxyViewContainer#eachlayoutview)
04. [\_getNativeViewsCount](https://docs.nativescript.org/api/class/ProxyViewContainer#getnativeviewscount)
05. [\_parentChanged](https://docs.nativescript.org/api/class/ProxyViewContainer#parentchanged)
06. [\_registerLayoutChild](https://docs.nativescript.org/api/class/ProxyViewContainer#registerlayoutchild)
07. [\_removeViewFromNativeVisualTree](https://docs.nativescript.org/api/class/ProxyViewContainer#removeviewfromnativevisualtree)
08. [\_setupUI](https://docs.nativescript.org/api/class/ProxyViewContainer#setupui)
09. [\_tearDownUI](https://docs.nativescript.org/api/class/ProxyViewContainer#teardownui)
10. [\_unregisterLayoutChild](https://docs.nativescript.org/api/class/ProxyViewContainer#unregisterlayoutchild)
11. [createNativeView](https://docs.nativescript.org/api/class/ProxyViewContainer#createnativeview)


## ListPicker Component




[View](https://docs.nativescript.org/api/class/View)

ListPicker

Represents an list picker.

## Summary [​](https://docs.nativescript.org/api/class/ListPicker\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ListPicker#constructor)

#### Properties

[android](https://docs.nativescript.org/api/class/ListPicker#android)[ios](https://docs.nativescript.org/api/class/ListPicker#ios)[items](https://docs.nativescript.org/api/class/ListPicker#items)[selectedIndex](https://docs.nativescript.org/api/class/ListPicker#selectedindex)

## Constructors [​](https://docs.nativescript.org/api/class/ListPicker\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ListPicker\#constructor)

```
new ListPicker(): ListPicker
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[ListPicker](https://docs.nativescript.org/api/class/ListPicker)_

## Properties [​](https://docs.nativescript.org/api/class/ListPicker\#properties)

### android [​](https://docs.nativescript.org/api/class/ListPicker\#android)

```
android: any
```

defined in [@nativescript/core/ui/list-picker/index.d.ts:12:1](https://unpkg.com/browse/@nativescript/core//ui/list-picker/index.d.ts#L12)

Gets the native \[android.widget.NumberPicker\](http://developer.android.com/reference/android/widget/NumberPicker.html) that represents the user interface for this component. Valid only when running on Android OS.

### ios [​](https://docs.nativescript.org/api/class/ListPicker\#ios)

```
ios: any
```

defined in [@nativescript/core/ui/list-picker/index.d.ts:17:1](https://unpkg.com/browse/@nativescript/core//ui/list-picker/index.d.ts#L17)

Gets the native iOS \[UIPickerView\](http://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIDatePicker\_Class/index.html) that represents the user interface for this component. Valid only when running on iOS.

### items [​](https://docs.nativescript.org/api/class/ListPicker\#items)

```
items: any
```

defined in [@nativescript/core/ui/list-picker/index.d.ts:28:1](https://unpkg.com/browse/@nativescript/core//ui/list-picker/index.d.ts#L28)

Gets or set the items collection of the ListPicker.
The items property can be set to an array or an object defining length and getItem(index) method.

### selectedIndex [​](https://docs.nativescript.org/api/class/ListPicker\#selectedindex)

```
selectedIndex: number
```

defined in [@nativescript/core/ui/list-picker/index.d.ts:22:1](https://unpkg.com/browse/@nativescript/core//ui/list-picker/index.d.ts#L22)

Gets or sets the selected index.

2. [Summary](https://docs.nativescript.org/api/class/ListPicker#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ListPicker#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ListPicker#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ListPicker#properties)
1. [android](https://docs.nativescript.org/api/class/ListPicker#android)
2. [ios](https://docs.nativescript.org/api/class/ListPicker#ios)
3. [items](https://docs.nativescript.org/api/class/ListPicker#items)
4. [selectedIndex](https://docs.nativescript.org/api/class/ListPicker#selectedindex)


## InheritedProperty Class




[Property<T, U>](https://docs.nativescript.org/api/class/Property)

InheritedProperty

## Summary [​](https://docs.nativescript.org/api/class/InheritedProperty\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/InheritedProperty#constructor)

#### Properties

[setInheritedValue](https://docs.nativescript.org/api/class/InheritedProperty#setinheritedvalue)[sourceKey](https://docs.nativescript.org/api/class/InheritedProperty#sourcekey)

13 properties inherited from Property

Click to expand

configurabledefaultValuedefaultValueKeyenumerablegetgetDefaultisStylePropertykeynamenativeValueChangeoverrideHandlerssetsetNative

## Constructors [​](https://docs.nativescript.org/api/class/InheritedProperty\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/InheritedProperty\#constructor)

```
new InheritedProperty<T, U>(options: PropertyOptions<T, U>): InheritedProperty<T, U>
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:71:4](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L71)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `options` | `` | `PropertyOptions<T, U>` |

Returns _[InheritedProperty](https://docs.nativescript.org/api/class/InheritedProperty) <T, U>_

## Properties [​](https://docs.nativescript.org/api/class/InheritedProperty\#properties)

### setInheritedValue [​](https://docs.nativescript.org/api/class/InheritedProperty\#setinheritedvalue)

Readonly

```
setInheritedValue: (value: U) => void
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:70:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L70)

### sourceKey [​](https://docs.nativescript.org/api/class/InheritedProperty\#sourcekey)

Readonly

```
sourceKey: symbol
```

defined in [@nativescript/core/ui/core/properties/index.d.ts:69:13](https://unpkg.com/browse/@nativescript/core//ui/core/properties/index.d.ts#L69)

2. [Summary](https://docs.nativescript.org/api/class/InheritedProperty#summary)
3. [Constructors](https://docs.nativescript.org/api/class/InheritedProperty#constructors)
1. [constructor](https://docs.nativescript.org/api/class/InheritedProperty#constructor)
4. [Properties](https://docs.nativescript.org/api/class/InheritedProperty#properties)
1. [setInheritedValue](https://docs.nativescript.org/api/class/InheritedProperty#setinheritedvalue)
2. [sourceKey](https://docs.nativescript.org/api/class/InheritedProperty#sourcekey)


## Accessibility Roles Overview

## Summary [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#summary)

#### Enumeration Members

[Adjustable](https://docs.nativescript.org/api/enum/AccessibilityRole#adjustable)[Button](https://docs.nativescript.org/api/enum/AccessibilityRole#button)[Checkbox](https://docs.nativescript.org/api/enum/AccessibilityRole#checkbox)[Header](https://docs.nativescript.org/api/enum/AccessibilityRole#header)[Image](https://docs.nativescript.org/api/enum/AccessibilityRole#image)[ImageButton](https://docs.nativescript.org/api/enum/AccessibilityRole#imagebutton)[KeyboardKey](https://docs.nativescript.org/api/enum/AccessibilityRole#keyboardkey)[Link](https://docs.nativescript.org/api/enum/AccessibilityRole#link)[None](https://docs.nativescript.org/api/enum/AccessibilityRole#none)[PlaysSound](https://docs.nativescript.org/api/enum/AccessibilityRole#playssound)[ProgressBar](https://docs.nativescript.org/api/enum/AccessibilityRole#progressbar)[RadioButton](https://docs.nativescript.org/api/enum/AccessibilityRole#radiobutton)[Search](https://docs.nativescript.org/api/enum/AccessibilityRole#search)[SpinButton](https://docs.nativescript.org/api/enum/AccessibilityRole#spinbutton)[StartsMediaSession](https://docs.nativescript.org/api/enum/AccessibilityRole#startsmediasession)[StaticText](https://docs.nativescript.org/api/enum/AccessibilityRole#statictext)[Summary](https://docs.nativescript.org/api/enum/AccessibilityRole#summary)[Switch](https://docs.nativescript.org/api/enum/AccessibilityRole#switch)

## Enumeration Members [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#enumeration-members)

### Adjustable [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#adjustable)

```
Adjustable: "adjustable"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:29:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L29)

The element allows continuous adjustment through a range of values.

### Button [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#button)

```
Button: "button"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:33:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L33)

The element should be treated as a button.

### Checkbox [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#checkbox)

```
Checkbox: "checkbox"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:37:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L37)

The element behaves like a Checkbox

```
Header: "header"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:41:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L41)

The element is a header that divides content into sections, such as the title of a navigation bar.

### Image [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#image)

```
Image: "image"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:45:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L45)

The element should be treated as an image.

### ImageButton [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#imagebutton)

```
ImageButton: "imageButton"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:49:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L49)

The element should be treated as a image button.

### KeyboardKey [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#keyboardkey)

```
KeyboardKey: "keyboardKey"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:53:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L53)

The element behaves as a keyboard key.

### Link [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#link)

```
Link: "link"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:57:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L57)

The element should be treated as a link.

### None [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#none)

```
None: "none"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:61:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L61)

The element has no traits.

### PlaysSound [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#playssound)

```
PlaysSound: "plays"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:65:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L65)

The element plays its own sound when activated.

### ProgressBar [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#progressbar)

```
ProgressBar: "progressBar"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:69:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L69)

The element behaves like a ProgressBar

### RadioButton [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#radiobutton)

```
RadioButton: "radioButton"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:73:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L73)

The element behaves like a RadioButton

### Search [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#search)

```
Search: "search"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:77:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L77)

The element should be treated as a search field.

### SpinButton [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#spinbutton)

```
SpinButton: "spinButton"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:81:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L81)

The element behaves like a SpinButton

### StartsMediaSession [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#startsmediasession)

```
StartsMediaSession: "startsMedia"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:85:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L85)

The element starts a media session when it is activated.

### StaticText [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#statictext)

```
StaticText: "text"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:89:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L89)

The element should be treated as static text that cannot change.

### Summary [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#summary-1)

```
Summary: "summary"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:93:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L93)

The element provides summary information when the application starts.

### Switch [​](https://docs.nativescript.org/api/enum/AccessibilityRole\#switch)

```
Switch: "switch"
```

defined in [@nativescript/core/accessibility/accessibility-types.d.ts:97:4](https://unpkg.com/browse/@nativescript/core//accessibility/accessibility-types.d.ts#L97)

The element behaves like a switch

2. [Summary](https://docs.nativescript.org/api/enum/AccessibilityRole#summary)
3. [Enumeration Members](https://docs.nativescript.org/api/enum/AccessibilityRole#enumeration-members)
01. [Adjustable](https://docs.nativescript.org/api/enum/AccessibilityRole#adjustable)
02. [Button](https://docs.nativescript.org/api/enum/AccessibilityRole#button)
03. [Checkbox](https://docs.nativescript.org/api/enum/AccessibilityRole#checkbox)
04. [Header](https://docs.nativescript.org/api/enum/AccessibilityRole#header)
05. [Image](https://docs.nativescript.org/api/enum/AccessibilityRole#image)
06. [ImageButton](https://docs.nativescript.org/api/enum/AccessibilityRole#imagebutton)
07. [KeyboardKey](https://docs.nativescript.org/api/enum/AccessibilityRole#keyboardkey)
08. [Link](https://docs.nativescript.org/api/enum/AccessibilityRole#link)
09. [None](https://docs.nativescript.org/api/enum/AccessibilityRole#none)
10. [PlaysSound](https://docs.nativescript.org/api/enum/AccessibilityRole#playssound)
11. [ProgressBar](https://docs.nativescript.org/api/enum/AccessibilityRole#progressbar)
12. [RadioButton](https://docs.nativescript.org/api/enum/AccessibilityRole#radiobutton)
13. [Search](https://docs.nativescript.org/api/enum/AccessibilityRole#search)
14. [SpinButton](https://docs.nativescript.org/api/enum/AccessibilityRole#spinbutton)
15. [StartsMediaSession](https://docs.nativescript.org/api/enum/AccessibilityRole#startsmediasession)
16. [StaticText](https://docs.nativescript.org/api/enum/AccessibilityRole#statictext)
17. [Summary](https://docs.nativescript.org/api/enum/AccessibilityRole#summary-1)
18. [Switch](https://docs.nativescript.org/api/enum/AccessibilityRole#switch)


## SegmentedBarItem Class




[ViewBase](https://docs.nativescript.org/api/class/ViewBase)

SegmentedBarItem

Represents a SegmentedBar item.

## Summary [​](https://docs.nativescript.org/api/class/SegmentedBarItem\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/SegmentedBarItem#constructor)

#### Properties

[title](https://docs.nativescript.org/api/class/SegmentedBarItem#title)

69 properties inherited from ViewBase

Click to expand

\_automaticallyAdjustsScrollViewInsets\_context\_cssState\_defaultPaddingBottom\_defaultPaddingLeft\_defaultPaddingRight\_defaultPaddingTop\_domId\_ignoreFlexMinWidthHeightReset\_isAddedToNativeVisualTree\_isPaddingRelative\_isStyleScopeHost\_oldBottom\_oldLeft\_oldRight\_oldTop\_styleScope\_suspendNativeUpdatesCountalignSelfbindingContextclassNamecolcolSpancolumncolumnSpancreatedEventcssClassescssPseudoClassesdisposeNativeViewEventdockdomNodeeffectiveBorderBottomWidtheffectiveBorderLeftWidtheffectiveBorderRightWidtheffectiveBorderTopWidtheffectiveHeighteffectiveLefteffectiveMarginBottomeffectiveMarginLefteffectiveMarginRighteffectiveMarginTopeffectiveMinHeighteffectiveMinWidtheffectivePaddingBottomeffectivePaddingLefteffectivePaddingRighteffectivePaddingTopeffectiveTopeffectiveWidthflexGrowflexShrinkflexWrapBeforeidisCollapsedleftloadedEventnativeViewProtectedorderparentpropertyChangeEventrecycleNativeViewreusablerowrowSpansharedTransitionIgnoresharedTransitionTagtopunloadedEventviewController

## Constructors [​](https://docs.nativescript.org/api/class/SegmentedBarItem\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/SegmentedBarItem\#constructor)

```
new SegmentedBarItem(): SegmentedBarItem
```

inherited from

defined in [@nativescript/core/ui/core/view-base/index.d.ts:263:4](https://unpkg.com/browse/@nativescript/core//ui/core/view-base/index.d.ts#L263)

Returns _[SegmentedBarItem](https://docs.nativescript.org/api/class/SegmentedBarItem)_

## Properties [​](https://docs.nativescript.org/api/class/SegmentedBarItem\#properties)

### title [​](https://docs.nativescript.org/api/class/SegmentedBarItem\#title)

```
title: string
```

defined in [@nativescript/core/ui/segmented-bar/index.d.ts:15:8](https://unpkg.com/browse/@nativescript/core//ui/segmented-bar/index.d.ts#L15)

Gets or sets the title of the SegmentedBarItem.

2. [Summary](https://docs.nativescript.org/api/class/SegmentedBarItem#summary)
3. [Constructors](https://docs.nativescript.org/api/class/SegmentedBarItem#constructors)
1. [constructor](https://docs.nativescript.org/api/class/SegmentedBarItem#constructor)
4. [Properties](https://docs.nativescript.org/api/class/SegmentedBarItem#properties)
1. [title](https://docs.nativescript.org/api/class/SegmentedBarItem#title)

## Pan Gesture Data




[GestureEventDataWithState](https://docs.nativescript.org/api/interface/GestureEventDataWithState)

PanGestureEventData

```
interface PanGestureEventData extends GestureEventDataWithState {
  deltaX: number;
  deltaY: number;
}
```

Provides gesture event data for pan gesture.

## Summary [​](https://docs.nativescript.org/api/interface/PanGestureEventData\#summary)

#### Properties

[deltaX](https://docs.nativescript.org/api/interface/PanGestureEventData#deltax)[deltaY](https://docs.nativescript.org/api/interface/PanGestureEventData#deltay)

4 properties inherited from [GestureEventData](https://docs.nativescript.org/api/interface/GestureEventData)

Click to expand

[android](https://docs.nativescript.org/api/interface/GestureEventData#android)[ios](https://docs.nativescript.org/api/interface/GestureEventData#ios)[type](https://docs.nativescript.org/api/interface/GestureEventData#type)[view](https://docs.nativescript.org/api/interface/GestureEventData#view)

2 properties inherited from [EventData](https://docs.nativescript.org/api/interface/EventData)

Click to expand

[eventName](https://docs.nativescript.org/api/interface/EventData#eventname)[object](https://docs.nativescript.org/api/interface/EventData#object)

1 properties inherited from [GestureEventDataWithState](https://docs.nativescript.org/api/interface/GestureEventDataWithState)

Click to expand

[state](https://docs.nativescript.org/api/interface/GestureEventDataWithState#state)

## Properties [​](https://docs.nativescript.org/api/interface/PanGestureEventData\#properties)

### deltaX [​](https://docs.nativescript.org/api/interface/PanGestureEventData\#deltax)

```
deltaX: number
```

defined in [@nativescript/core/ui/gestures/index.d.ts:269:1](https://unpkg.com/browse/@nativescript/core//ui/gestures/index.d.ts#L269)

### deltaY [​](https://docs.nativescript.org/api/interface/PanGestureEventData\#deltay)

```
deltaY: number
```

defined in [@nativescript/core/ui/gestures/index.d.ts:270:1](https://unpkg.com/browse/@nativescript/core//ui/gestures/index.d.ts#L270)

2. [Summary](https://docs.nativescript.org/api/interface/PanGestureEventData#summary)
3. [Properties](https://docs.nativescript.org/api/interface/PanGestureEventData#properties)
1. [deltaX](https://docs.nativescript.org/api/interface/PanGestureEventData#deltax)
2. [deltaY](https://docs.nativescript.org/api/interface/PanGestureEventData#deltay)


## Android Directory Enum




## Summary [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#summary)

#### Enumeration Members

[ALARMS](https://docs.nativescript.org/api/enum/AndroidDirectory#alarms)[AUDIOBOOKS](https://docs.nativescript.org/api/enum/AndroidDirectory#audiobooks)[DCIM](https://docs.nativescript.org/api/enum/AndroidDirectory#dcim)[DOCUMENTS](https://docs.nativescript.org/api/enum/AndroidDirectory#documents)[DOWNLOADS](https://docs.nativescript.org/api/enum/AndroidDirectory#downloads)[MOVIES](https://docs.nativescript.org/api/enum/AndroidDirectory#movies)[MUSIC](https://docs.nativescript.org/api/enum/AndroidDirectory#music)[NOTIFICATIONS](https://docs.nativescript.org/api/enum/AndroidDirectory#notifications)[PICTURES](https://docs.nativescript.org/api/enum/AndroidDirectory#pictures)[PODCASTS](https://docs.nativescript.org/api/enum/AndroidDirectory#podcasts)[RINGTONES](https://docs.nativescript.org/api/enum/AndroidDirectory#ringtones)[SCREENSHOTS](https://docs.nativescript.org/api/enum/AndroidDirectory#screenshots)

## Enumeration Members [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#enumeration-members)

### ALARMS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#alarms)

```
ALARMS: number
```

defined in [@nativescript/core/file-system/index.d.ts:4:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L4)

### AUDIOBOOKS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#audiobooks)

```
AUDIOBOOKS: number
```

defined in [@nativescript/core/file-system/index.d.ts:5:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L5)

### DCIM [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#dcim)

```
DCIM: number
```

defined in [@nativescript/core/file-system/index.d.ts:6:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L6)

### DOCUMENTS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#documents)

```
DOCUMENTS: number
```

defined in [@nativescript/core/file-system/index.d.ts:7:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L7)

### DOWNLOADS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#downloads)

```
DOWNLOADS: number
```

defined in [@nativescript/core/file-system/index.d.ts:8:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L8)

### MOVIES [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#movies)

```
MOVIES: number
```

defined in [@nativescript/core/file-system/index.d.ts:9:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L9)

### MUSIC [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#music)

```
MUSIC: number
```

defined in [@nativescript/core/file-system/index.d.ts:10:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L10)

### NOTIFICATIONS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#notifications)

```
NOTIFICATIONS: number
```

defined in [@nativescript/core/file-system/index.d.ts:11:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L11)

### PICTURES [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#pictures)

```
PICTURES: number
```

defined in [@nativescript/core/file-system/index.d.ts:12:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L12)

### PODCASTS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#podcasts)

```
PODCASTS: number
```

defined in [@nativescript/core/file-system/index.d.ts:13:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L13)

### RINGTONES [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#ringtones)

```
RINGTONES: number
```

defined in [@nativescript/core/file-system/index.d.ts:14:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L14)

### SCREENSHOTS [​](https://docs.nativescript.org/api/enum/AndroidDirectory\#screenshots)

```
SCREENSHOTS: number
```

defined in [@nativescript/core/file-system/index.d.ts:15:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L15)

2. [Summary](https://docs.nativescript.org/api/enum/AndroidDirectory#summary)
3. [Enumeration Members](https://docs.nativescript.org/api/enum/AndroidDirectory#enumeration-members)
01. [ALARMS](https://docs.nativescript.org/api/enum/AndroidDirectory#alarms)
02. [AUDIOBOOKS](https://docs.nativescript.org/api/enum/AndroidDirectory#audiobooks)
03. [DCIM](https://docs.nativescript.org/api/enum/AndroidDirectory#dcim)
04. [DOCUMENTS](https://docs.nativescript.org/api/enum/AndroidDirectory#documents)
05. [DOWNLOADS](https://docs.nativescript.org/api/enum/AndroidDirectory#downloads)
06. [MOVIES](https://docs.nativescript.org/api/enum/AndroidDirectory#movies)
07. [MUSIC](https://docs.nativescript.org/api/enum/AndroidDirectory#music)
08. [NOTIFICATIONS](https://docs.nativescript.org/api/enum/AndroidDirectory#notifications)
09. [PICTURES](https://docs.nativescript.org/api/enum/AndroidDirectory#pictures)
10. [PODCASTS](https://docs.nativescript.org/api/enum/AndroidDirectory#podcasts)
11. [RINGTONES](https://docs.nativescript.org/api/enum/AndroidDirectory#ringtones)
12. [SCREENSHOTS](https://docs.nativescript.org/api/enum/AndroidDirectory#screenshots)


## Android Back Pressed Event




[AndroidActivityEventData](https://docs.nativescript.org/api/interface/AndroidActivityEventData)

AndroidActivityBackPressedEventData

```
interface AndroidActivityBackPressedEventData extends AndroidActivityEventData {
  cancel: boolean;
}
```

Data for the Android activity back pressed event.

## Summary [​](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData\#summary)

#### Properties

[cancel](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData#cancel)

3 properties inherited from [AndroidActivityEventData](https://docs.nativescript.org/api/interface/AndroidActivityEventData)

Click to expand

[activity](https://docs.nativescript.org/api/interface/AndroidActivityEventData#activity)[eventName](https://docs.nativescript.org/api/interface/AndroidActivityEventData#eventname)[object](https://docs.nativescript.org/api/interface/AndroidActivityEventData#object)

## Properties [​](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData\#properties)

### cancel [​](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData\#cancel)

```
cancel: boolean
```

defined in [@nativescript/core/application/application-interfaces.d.ts:180:4](https://unpkg.com/browse/@nativescript/core//application/application-interfaces.d.ts#L180)

In the event handler, set this value to true if you want to cancel the back navigation and do something else instead.

2. [Summary](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData#summary)
3. [Properties](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData#properties)
1. [cancel](https://docs.nativescript.org/api/interface/AndroidActivityBackPressedEventData#cancel)


## PageTransition Class Overview




[Transition](https://docs.nativescript.org/api/class/Transition)

PageTransition

## Summary [​](https://docs.nativescript.org/api/class/PageTransition\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/PageTransition#constructor)

## Constructors [​](https://docs.nativescript.org/api/class/PageTransition\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/PageTransition\#constructor)

```
new PageTransition(duration?: number, nativeCurve?: any): PageTransition
```

inherited from [constructor](https://docs.nativescript.org/api/class/Transition#constructor)

defined in [@nativescript/core/ui/transition/index.d.ts:39:1](https://unpkg.com/browse/@nativescript/core//ui/transition/index.d.ts#L39)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `duration` | `` | `number` |
| `nativeCurve` | `` | `any` |

Returns _[PageTransition](https://docs.nativescript.org/api/class/PageTransition)_

2. [Summary](https://docs.nativescript.org/api/class/PageTransition#summary)
3. [Constructors](https://docs.nativescript.org/api/class/PageTransition#constructors)
1. [constructor](https://docs.nativescript.org/api/class/PageTransition#constructor)


## Font Scale Categories




## Summary [​](https://docs.nativescript.org/api/enum/FontScaleCategory\#summary)

#### Enumeration Members

[ExtraLarge](https://docs.nativescript.org/api/enum/FontScaleCategory#extralarge)[ExtraSmall](https://docs.nativescript.org/api/enum/FontScaleCategory#extrasmall)[Medium](https://docs.nativescript.org/api/enum/FontScaleCategory#medium)

## Enumeration Members [​](https://docs.nativescript.org/api/enum/FontScaleCategory\#enumeration-members)

### ExtraLarge [​](https://docs.nativescript.org/api/enum/FontScaleCategory\#extralarge)

```
ExtraLarge: "extra-large"
```

defined in [@nativescript/core/accessibility/font-scale.d.ts:6:1](https://unpkg.com/browse/@nativescript/core//accessibility/font-scale.d.ts#L6)

### ExtraSmall [​](https://docs.nativescript.org/api/enum/FontScaleCategory\#extrasmall)

```
ExtraSmall: "extra-small"
```

defined in [@nativescript/core/accessibility/font-scale.d.ts:4:1](https://unpkg.com/browse/@nativescript/core//accessibility/font-scale.d.ts#L4)

### Medium [​](https://docs.nativescript.org/api/enum/FontScaleCategory\#medium)

```
Medium: "medium"
```

defined in [@nativescript/core/accessibility/font-scale.d.ts:5:1](https://unpkg.com/browse/@nativescript/core//accessibility/font-scale.d.ts#L5)

2. [Summary](https://docs.nativescript.org/api/enum/FontScaleCategory#summary)
3. [Enumeration Members](https://docs.nativescript.org/api/enum/FontScaleCategory#enumeration-members)
1. [ExtraLarge](https://docs.nativescript.org/api/enum/FontScaleCategory#extralarge)
2. [ExtraSmall](https://docs.nativescript.org/api/enum/FontScaleCategory#extrasmall)
3. [Medium](https://docs.nativescript.org/api/enum/FontScaleCategory#medium)


## File System Entity

FileSystemEntity

[File](https://docs.nativescript.org/api/class/File) [Folder](https://docs.nativescript.org/api/class/Folder)

Represents a single entity on the file system.

## Summary [​](https://docs.nativescript.org/api/class/FileSystemEntity\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/FileSystemEntity#constructor)

#### Properties

[lastModified](https://docs.nativescript.org/api/class/FileSystemEntity#lastmodified)[name](https://docs.nativescript.org/api/class/FileSystemEntity#name)[parent](https://docs.nativescript.org/api/class/FileSystemEntity#parent)[path](https://docs.nativescript.org/api/class/FileSystemEntity#path)

#### Methods

[remove](https://docs.nativescript.org/api/class/FileSystemEntity#remove)[removeSync](https://docs.nativescript.org/api/class/FileSystemEntity#removesync)[rename](https://docs.nativescript.org/api/class/FileSystemEntity#rename)[renameSync](https://docs.nativescript.org/api/class/FileSystemEntity#renamesync)

## Constructors [​](https://docs.nativescript.org/api/class/FileSystemEntity\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/FileSystemEntity\#constructor)

```
new FileSystemEntity(): FileSystemEntity
```

Returns _[FileSystemEntity](https://docs.nativescript.org/api/class/FileSystemEntity)_

## Properties [​](https://docs.nativescript.org/api/class/FileSystemEntity\#properties)

### lastModified [​](https://docs.nativescript.org/api/class/FileSystemEntity\#lastmodified)

```
lastModified: Date
```

defined in [@nativescript/core/file-system/index.d.ts:31:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L31)

Gets the Date object specifying the last time this entity was modified.

### name [​](https://docs.nativescript.org/api/class/FileSystemEntity\#name)

```
name: string
```

defined in [@nativescript/core/file-system/index.d.ts:36:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L36)

Gets the name of the entity.

### parent [​](https://docs.nativescript.org/api/class/FileSystemEntity\#parent)

```
parent: Folder
```

defined in [@nativescript/core/file-system/index.d.ts:48:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L48)

Gets the Folder object representing the parent of this entity.
Will be null for a root folder like Documents or Temporary.
This property is readonly.

### path [​](https://docs.nativescript.org/api/class/FileSystemEntity\#path)

```
path: string
```

defined in [@nativescript/core/file-system/index.d.ts:41:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L41)

Gets the fully-qualified path (including the extension for a File) of the entity.

## Methods [​](https://docs.nativescript.org/api/class/FileSystemEntity\#methods)

### remove [​](https://docs.nativescript.org/api/class/FileSystemEntity\#remove)

```
remove(): Promise&lt;any&gt;
```

defined in [@nativescript/core/file-system/index.d.ts:53:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L53)

Removes (deletes) the current Entity from the file system.

Returns _Promise<any>_

### removeSync [​](https://docs.nativescript.org/api/class/FileSystemEntity\#removesync)

```
removeSync(onError?: (error: any) => any): void
```

defined in [@nativescript/core/file-system/index.d.ts:58:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L58)

Removes (deletes) the current Entity from the file system synchronously.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `onError` | `` | `(error: any) => any` |

Returns _void_

### rename [​](https://docs.nativescript.org/api/class/FileSystemEntity\#rename)

```
rename(newName: string): Promise&lt;any&gt;
```

defined in [@nativescript/core/file-system/index.d.ts:64:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L64)

Renames the current entity using the specified name.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `newName` | `` | `string`<br>The new name to be applied to the entity. |

Returns _Promise<any>_

### renameSync [​](https://docs.nativescript.org/api/class/FileSystemEntity\#renamesync)

```
renameSync(newName: string, onError?: (error: any) => any): void
```

defined in [@nativescript/core/file-system/index.d.ts:70:1](https://unpkg.com/browse/@nativescript/core//file-system/index.d.ts#L70)

Renames the current entity synchronously, using the specified name.

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `newName` | `` | `string`<br>The new name to be applied to the entity. |
| `onError` | `` | `(error: any) => any` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/FileSystemEntity#summary)
3. [Constructors](https://docs.nativescript.org/api/class/FileSystemEntity#constructors)
1. [constructor](https://docs.nativescript.org/api/class/FileSystemEntity#constructor)
4. [Properties](https://docs.nativescript.org/api/class/FileSystemEntity#properties)
1. [lastModified](https://docs.nativescript.org/api/class/FileSystemEntity#lastmodified)
2. [name](https://docs.nativescript.org/api/class/FileSystemEntity#name)
3. [parent](https://docs.nativescript.org/api/class/FileSystemEntity#parent)
4. [path](https://docs.nativescript.org/api/class/FileSystemEntity#path)
5. [Methods](https://docs.nativescript.org/api/class/FileSystemEntity#methods)
1. [remove](https://docs.nativescript.org/api/class/FileSystemEntity#remove)
2. [removeSync](https://docs.nativescript.org/api/class/FileSystemEntity#removesync)
3. [rename](https://docs.nativescript.org/api/class/FileSystemEntity#rename)
4. [renameSync](https://docs.nativescript.org/api/class/FileSystemEntity#renamesync)


## Gesture Events Overview




Events emitted during gesture lifecycle

## Summary [​](https://docs.nativescript.org/api/enum/GestureEvents\#summary)

#### Enumeration Members

[gestureAttached](https://docs.nativescript.org/api/enum/GestureEvents#gestureattached)[touchDown](https://docs.nativescript.org/api/enum/GestureEvents#touchdown)[touchUp](https://docs.nativescript.org/api/enum/GestureEvents#touchup)

## Enumeration Members [​](https://docs.nativescript.org/api/enum/GestureEvents\#enumeration-members)

### gestureAttached [​](https://docs.nativescript.org/api/enum/GestureEvents\#gestureattached)

```
gestureAttached: "gestureAttached"
```

defined in [@nativescript/core/ui/gestures/index.d.ts:14:1](https://unpkg.com/browse/@nativescript/core//ui/gestures/index.d.ts#L14)

When the gesture is attached to the view
Provides access to the native gesture recognizer for further customization

### touchDown [​](https://docs.nativescript.org/api/enum/GestureEvents\#touchdown)

```
touchDown: "touchDown"
```

defined in [@nativescript/core/ui/gestures/index.d.ts:18:1](https://unpkg.com/browse/@nativescript/core//ui/gestures/index.d.ts#L18)

When a touch down was detected

### touchUp [​](https://docs.nativescript.org/api/enum/GestureEvents\#touchup)

```
touchUp: "touchUp"
```

defined in [@nativescript/core/ui/gestures/index.d.ts:22:1](https://unpkg.com/browse/@nativescript/core//ui/gestures/index.d.ts#L22)

When a touch up was detected

2. [Summary](https://docs.nativescript.org/api/enum/GestureEvents#summary)
3. [Enumeration Members](https://docs.nativescript.org/api/enum/GestureEvents#enumeration-members)
1. [gestureAttached](https://docs.nativescript.org/api/enum/GestureEvents#gestureattached)
2. [touchDown](https://docs.nativescript.org/api/enum/GestureEvents#touchdown)
3. [touchUp](https://docs.nativescript.org/api/enum/GestureEvents#touchup)


## ChangeType Class Overview




ChangeType

## Summary [​](https://docs.nativescript.org/api/class/ChangeType\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/ChangeType#constructor)

#### Properties

[Add](https://docs.nativescript.org/api/class/ChangeType#add)[Change](https://docs.nativescript.org/api/class/ChangeType#change)[Delete](https://docs.nativescript.org/api/class/ChangeType#delete)[Splice](https://docs.nativescript.org/api/class/ChangeType#splice)[Update](https://docs.nativescript.org/api/class/ChangeType#update)

## Constructors [​](https://docs.nativescript.org/api/class/ChangeType\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/ChangeType\#constructor)

```
new ChangeType(): ChangeType
```

Returns _[ChangeType](https://docs.nativescript.org/api/class/ChangeType)_

## Properties [​](https://docs.nativescript.org/api/class/ChangeType\#properties)

### Add [​](https://docs.nativescript.org/api/class/ChangeType\#add)

Static

```
Add: string
```

defined in [@nativescript/core/data/observable-array/index.d.ts:3:11](https://unpkg.com/browse/@nativescript/core//data/observable-array/index.d.ts#L3)

### Change [​](https://docs.nativescript.org/api/class/ChangeType\#change)

Static

```
Change: string
```

defined in [@nativescript/core/data/observable-array/index.d.ts:7:11](https://unpkg.com/browse/@nativescript/core//data/observable-array/index.d.ts#L7)

### Delete [​](https://docs.nativescript.org/api/class/ChangeType\#delete)

Static

```
Delete: string
```

defined in [@nativescript/core/data/observable-array/index.d.ts:4:11](https://unpkg.com/browse/@nativescript/core//data/observable-array/index.d.ts#L4)

### Splice [​](https://docs.nativescript.org/api/class/ChangeType\#splice)

Static

```
Splice: string
```

defined in [@nativescript/core/data/observable-array/index.d.ts:6:11](https://unpkg.com/browse/@nativescript/core//data/observable-array/index.d.ts#L6)

### Update [​](https://docs.nativescript.org/api/class/ChangeType\#update)

Static

```
Update: string
```

defined in [@nativescript/core/data/observable-array/index.d.ts:5:11](https://unpkg.com/browse/@nativescript/core//data/observable-array/index.d.ts#L5)

2. [Summary](https://docs.nativescript.org/api/class/ChangeType#summary)
3. [Constructors](https://docs.nativescript.org/api/class/ChangeType#constructors)
1. [constructor](https://docs.nativescript.org/api/class/ChangeType#constructor)
4. [Properties](https://docs.nativescript.org/api/class/ChangeType#properties)
1. [Add](https://docs.nativescript.org/api/class/ChangeType#add)
2. [Change](https://docs.nativescript.org/api/class/ChangeType#change)
3. [Delete](https://docs.nativescript.org/api/class/ChangeType#delete)
4. [Splice](https://docs.nativescript.org/api/class/ChangeType#splice)
5. [Update](https://docs.nativescript.org/api/class/ChangeType#update)


## Shared Transition Helper

SharedTransitionHelper

Platform helper to aid in creating your own custom Shared Element Transition classes.
(iOS Only)

## Summary [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#summary)

#### Constructors

[constructor](https://docs.nativescript.org/api/class/SharedTransitionHelper#constructor)

#### Methods

[animate](https://docs.nativescript.org/api/class/SharedTransitionHelper#animate)[interactiveCancel](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactivecancel)[interactiveFinish](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactivefinish)[interactiveStart](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactivestart)[interactiveUpdate](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactiveupdate)

## Constructors [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#constructors)

### constructor [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#constructor)

```
new SharedTransitionHelper(): SharedTransitionHelper
```

Returns _[SharedTransitionHelper](https://docs.nativescript.org/api/class/SharedTransitionHelper)_

## Methods [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#methods)

### animate [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#animate)

Static

```
animate(
  state: SharedTransitionState,
  transitionContext: any,
  type: TransitionNavigationType
): void
```

defined in [@nativescript/core/ui/transition/shared-transition-helper.d.ts:9:1](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition-helper.d.ts#L9)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `state` | `` | `SharedTransitionState` |
| `transitionContext` | `` | `any` |
| `type` | `` | `TransitionNavigationType` |

Returns _void_

### interactiveCancel [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#interactivecancel)

Static

```
interactiveCancel(
  state: SharedTransitionState,
  interactiveState: TransitionInteractiveState,
  type: TransitionNavigationType
): void
```

defined in [@nativescript/core/ui/transition/shared-transition-helper.d.ts:12:1](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition-helper.d.ts#L12)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `state` | `` | `SharedTransitionState` |
| `interactiveState` | `` | `TransitionInteractiveState` |
| `type` | `` | `TransitionNavigationType` |

Returns _void_

### interactiveFinish [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#interactivefinish)

Static

```
interactiveFinish(
  state: SharedTransitionState,
  interactiveState: TransitionInteractiveState,
  type: TransitionNavigationType
): void
```

defined in [@nativescript/core/ui/transition/shared-transition-helper.d.ts:13:1](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition-helper.d.ts#L13)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `state` | `` | `SharedTransitionState` |
| `interactiveState` | `` | `TransitionInteractiveState` |
| `type` | `` | `TransitionNavigationType` |

Returns _void_

### interactiveStart [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#interactivestart)

Static

```
interactiveStart(
  state: SharedTransitionState,
  interactiveState: TransitionInteractiveState,
  type: TransitionNavigationType
): void
```

defined in [@nativescript/core/ui/transition/shared-transition-helper.d.ts:10:1](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition-helper.d.ts#L10)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `state` | `` | `SharedTransitionState` |
| `interactiveState` | `` | `TransitionInteractiveState` |
| `type` | `` | `TransitionNavigationType` |

Returns _void_

### interactiveUpdate [​](https://docs.nativescript.org/api/class/SharedTransitionHelper\#interactiveupdate)

Static

```
interactiveUpdate(
  state: SharedTransitionState,
  interactiveState: TransitionInteractiveState,
  type: TransitionNavigationType,
  percent: number
): void
```

defined in [@nativescript/core/ui/transition/shared-transition-helper.d.ts:11:1](https://unpkg.com/browse/@nativescript/core//ui/transition/shared-transition-helper.d.ts#L11)

|     |     |     |
| --- | --- | --- |
| Parameter | Default | Description |
| `state` | `` | `SharedTransitionState` |
| `interactiveState` | `` | `TransitionInteractiveState` |
| `type` | `` | `TransitionNavigationType` |
| `percent` | `` | `number` |

Returns _void_

2. [Summary](https://docs.nativescript.org/api/class/SharedTransitionHelper#summary)
3. [Constructors](https://docs.nativescript.org/api/class/SharedTransitionHelper#constructors)
1. [constructor](https://docs.nativescript.org/api/class/SharedTransitionHelper#constructor)
4. [Methods](https://docs.nativescript.org/api/class/SharedTransitionHelper#methods)
1. [animate](https://docs.nativescript.org/api/class/SharedTransitionHelper#animate)
2. [interactiveCancel](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactivecancel)
3. [interactiveFinish](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactivefinish)
4. [interactiveStart](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactivestart)
5. [interactiveUpdate](https://docs.nativescript.org/api/class/SharedTransitionHelper#interactiveupdate)


## Download Error Interface


[EventData](https://docs.nativescript.org/api/interface/EventData)

DownloadError

```
interface DownloadError extends EventData {
  error: Error;
  key: string;
}
```

Provides data for download error.

## Summary [​](https://docs.nativescript.org/api/interface/DownloadError\#summary)

#### Properties

[error](https://docs.nativescript.org/api/interface/DownloadError#error)[key](https://docs.nativescript.org/api/interface/DownloadError#key)

2 properties inherited from [EventData](https://docs.nativescript.org/api/interface/EventData)

Click to expand

[eventName](https://docs.nativescript.org/api/interface/EventData#eventname)[object](https://docs.nativescript.org/api/interface/EventData#object)

## Properties [​](https://docs.nativescript.org/api/interface/DownloadError\#properties)

### error [​](https://docs.nativescript.org/api/interface/DownloadError\#error)

```
error: Error
```

defined in [@nativescript/core/ui/image-cache/index.d.ts:142:1](https://unpkg.com/browse/@nativescript/core//ui/image-cache/index.d.ts#L142)

Gets the error.

### key [​](https://docs.nativescript.org/api/interface/DownloadError\#key)

```
key: string
```

defined in [@nativescript/core/ui/image-cache/index.d.ts:138:1](https://unpkg.com/browse/@nativescript/core//ui/image-cache/index.d.ts#L138)

A string indentifier of the cached image.

2. [Summary](https://docs.nativescript.org/api/interface/DownloadError#summary)
3. [Properties](https://docs.nativescript.org/api/interface/DownloadError#properties)
1. [error](https://docs.nativescript.org/api/interface/DownloadError#error)
2. [key](https://docs.nativescript.org/api/interface/DownloadError#key)