ActionBar

The ActionBar is NativeScript’s abstraction over the Android ActionBar and iOS NavigationBar. 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.

Simple ActionBar with title #

<ActionBar title="ActionBar Title" />

ActionBar with custom title component #

<ActionBar>
  <StackLayout orientation="horizontal">
    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
    <Label text="ActionBar Title" fontSize="24" verticalAlignment="center" />
  </StackLayout>
</ActionBar>

ActionBar with ActionItem #

The <ActionItem> component supports the platform-specific position and systemIcon for iOS and Android.

Positioning ActionItem #

• Android sets position via android.position:

  • 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.

• iOS sets position via ios.position:

  • left: Puts the item on the left side of the ActionBar.
  • right: Puts the item on the right side of the ActionBar.

<ActionBar title="ActionBar Title">
  <ActionItem
    tap="onShare()"
    ios.systemIcon="9"
    ios.position="left"
    android.systemIcon="ic_menu_share"
    android.position="actionBar"
  >
  </ActionItem>
  <ActionItem
    text="delete"
    tap="onDelete()"
    ios.systemIcon="16"
    ios.position="right"
    android.position="popup"
  >
  </ActionItem>
</ActionBar>

ActionBar with NavigationButton #

<NavigationButton> is a UI component that provides an abstraction for the Android navigation button and the iOS back button.

<ActionBar title="ActionBar Title">
  <NavigationButton
    text="Go back"
    android.systemIcon="ic_menu_back"
    tap="goBack"
  />
</ActionBar>

Setting an app icon for Android in ActionBar #

<ActionBar
  title="ActionBar Title"
  android.icon="res://icon"
  android.iconVisibility="always"
/>

Styling ActionBar #

To style the <ActionBar>, you can use only background-color and color properties. Alternatively, you can use @nativescript/tailwind and use the default styles for each different theme. The icon property of ActionItem can use Icon Fonts with the font:// prefix. By setting up this prefix, a new image will be generated, which will be set as an <ActionItem>'s icon resource. While using this functionality, we need to specify the font-size, which will calculate the size of the generated image base on the device's dpi.

<!-- The default background-color and color of ActionBar & ActionItem are set through nativescript-theme (if used)-->
<ActionBar title="ActionBar Title">
  <!-- Explicitly hiding the NavigationBar to prevent the default one on iOS-->
  <NavigationButton visibility="collapsed" />

  <!-- Using the icon property and Icon Fonts -->
  <ActionItem
    position="left"
    icon="font://&#xf0a8;"
    class="far text-xl"
    backgroundColor="red"
    tap="goBack"
  />

  <!-- Creating custom views for ActionItem-->
  <ActionItem ios.position="right">
    <GridLayout width="100">
      <button text="Theme" class="rounded-full text-white bg-purple-700 m-2" />
    </GridLayout>
  </ActionItem>
</ActionBar>

Removing the border from ActionBar #

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.

<ActionBar title="ActionBar Title" flat="true" />

Props #

title #

actionBar.title = 'About'

Gets or sets the action bar title.

titleView #

actionBar.titleView = customView

Replaces the title property with the custom View instance.

flat #

<ActionBar title="My App" flat="true" />

actionBar.flat = true
//or
isFlat: boolean = actionBar.flat

Removes the border on Android and the translucency on iOS. Default value is false.

navigationButton #

navigationButton: NavigationButton = actionBar.navigationButton
//or
navigationButton = new NavigationButton()
actionBar.navigationButton = navigationButton

Gets or sets the navigation button (back button).

actionItems #

actionItems: ActionItems = actionBar.actionItems

Gets the collection of action items.

iosIconRenderingMode #

actionBar.iosIconRenderingMode

Gets or set the UIImage.RenderingMode of the action bar icons in iOS. Defaults to alwaysOriginal. Available values:

• automatic
• alwaysTemplate
• automatic

ActionItem Properties #

text #

<ActionItem text="John Doe"/>

Gets or sets the text of the action item.

icon #

<ActionItem icon="~/assets/images/cat.jpeg"/>

Gets or sets the icon of the action item. Supports local images (~/), resources (res://) and fonts icons (fonts://)

ios.position #

<ActionItem ios.position="right">

Sets the position of the item. Avaibable values: left or right. Defaults to left.

android.position #

<ActionItem android.position="popup">

Sets the position of the item. Avaibable values: ``enum: actionBar, popup, actionBarIfRoom. Defaults to actionBar`.

ios.systemIcon #

<ActionItem ios.systemIcon="4">

Sets the icon of the action item while using UIBarButton.SystemIcon enumeration.

android.systemIcon #

<ActionItem android.systemIcon="btn_plus">

Sets a path to a resource icon ( see the list of Android system drawables)

actionBar #

actionBar: ActionBar = actionItem.actionBar

Gets the action bar that contains the action item.

NavigationButton Props #

text #

<NavigationButton text="Back" />

Gets or sets the text of the button.

icon #

<NavigationButton icon="~/assets/go-back-left-arrow-64x64.png"/>

navigationButton.icon = '~/assets/go-back-left-arrow-64x64.png'
//or
iconFile: string = navigationButton.icon

Gets or sets the icon of the action item.

Events #

API #

Native Component #