ActionBar
<actionBar>
is a UI component that provides a toolbar at the top of the activity window.
This component is the NativeScript abstraction for the Android app bar and the iOS navigation bar.
See also:
Using a title
/** @jsx createElement */
<actionBar title="MyApp" />
Using a custom title view
/** @jsx createElement */
<actionBar>
<stackLayout orientation="horizontal">
<image src="res://icon" width={40} height={40} verticalAlignment="center" />
<label text="NativeScript" fontSize={24} verticalAlignment="center" />
</stackLayout>
</actionBar>
#### Removing the border
By default, a border is drawn at the bottom of the `<actionBar>`. In addition to the border, on iOS devices a translucency filter is also applied over the `<actionBar>`.
To remove this styling from your app, you can set the `flat` property to `true`.
```tsx
/** @jsx createElement */
<actionBar title="My App" flat={true} />
Props
Name | Type | Description |
---|---|---|
title | string | Sets the title shown in the bar. |
flat | boolean | Removes the border on Android and the translucency on iOS. Default value is false . |
Native component
Android | iOS |
---|---|
android.widget.Toolbar | UINavigationBar |