# 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