ActionBar

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

Views also part of the ActionBar abstraction:

• ActionItem
• NavigationButton

<ActionBar title="MyApp" />

<ActionBar title="ActionBar Title">
  <ActionItem (tap)="goBack()">
    <label text="<< Back      "></label>
  </ActionItem>
</ActionBar>

router = inject(RouterExtensions);

goBack() {
  this.router.back();
}

<actionBar title="ActionBar" onTap={() => Frame.goBack()}></actionBar>

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

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

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

ActionBar with a custom title view ​

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

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

Customizing the ActionBar ​

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

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":

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

<ActionBar title="MyApp" iosShadow="false" />

Props ​

title ​

title: string

Gets or sets the ActionBar title.

<ActionBar title="MyApp" iosLargeTitle="true" />

titleView ​

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.

flat ​

flat: boolean

Removes the border on Android and the translucency on iOS.

Defaults to false.

navigationButton ​

navigationButton: NavigationButton

Gets or sets the navigation button (back button).

See NavigationButton.

actionItems ​

actionItems: ActionItems

Gets or sets the ActionItems.

See ActionItem.

iosIconRenderingMode ​

actionBar.iosIconRenderingMode

Gets or set the UIImage.RenderingMode of the ActionBar icons in iOS.

Available values:

• automatic
• alwaysTemplate
• alwaysOriginal

Defaults to alwaysOriginal.

ActionItem ​

<ActionItem> is a UI component for adding action buttons to the ActionBar.

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

text ​

text: string

Gets or sets the text of the ActionItem.

icon ​

icon: string

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

ios.position ​

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 ​

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 ​

ios.systemIcon: string

Sets the icon of the ActionItem using a UIBarButton.SystemIcon. iOS only.

android.systemIcon ​

android.systemIcon: string

Sets the icon of the ActionItem. For a list of system icons, refer to R.drawable. Android only.

See R.drawable.

actionBar ​

actionBar: ActionBar

Gets the ActionBar that contains the ActionItem.

NavigationButton ​

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

<ActionBar title="MyApp">
  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" />
</ActionBar>

NavigationButton Props ​

text ​

text: string

Sets the text of the back button. iOS only.

android.systemIcon ​

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

Native component ​

ActionBar ​

• Android: android.widget.Toolbar
• iOS: UINavigationBar

ActionItem ​

• Android: android.widget.Toolbar
• iOS: UINavigationItem

NavigationButton ​

• Android: android.widget.Toolbar
• iOS: UINavigationItem