ActionItem · React NativeScript

<actionItem> is a UI component that lets you add action buttons to the <actionBar> component.

Introduction to Node Roles

An ActionItem is a child of the ActionBar, which is a complex component that can contain child components serving different roles (e.g. navigation button, title view, or action item). React NativeScript provides a nodeRole property so that you can make it explicit what role each given child serves.

Take care not to miss the nodeRole property that we set in the following examples, to see which children (and grandchildren) require which roles.

See: Node Roles

Basic use

import * as React from "react";

<actionBar title="My App">
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapShare}
    ios={{
      systemIcon: 9,
      position: "left" as const
    }}
    android={{
      systemIcon: "ic_menu_share" as const,
      position: "actionBar" as const
    }}
  />
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapDelete}
    ios={{
      systemIcon: 16,
      position: "right" as const
    }}
    android={{
      position: "popup" as const
    }}
    text="delete"
  />
</actionBar>

Using custom icons as well as platform-specific positioning

Specify the systemIcon as undefined. I know, it's weird; it's behaviour that's inherited from NativeScript Core.

import * as React from "react";

<actionBar title="My App">
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapShare}
    ios={{
      systemIcon: undefined,
      position: "left" as const
    }}
    android={{
      systemIcon: undefined,
      position: "actionBar" as const
    }}
  />
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapDelete}
    ios={{
      systemIcon: undefined,
      position: "right" as const
    }}
    android={{
      systemIcon: undefined,
      position: "popup" as const
    }}
    text="delete"
  />
</actionBar>

Conditionally showing action items

You can use the visibility prop (inherited from View) to show <actionItem> components based on a condition.

import * as React from "react";

<actionBar title="My App">
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapEdit}
    visibility={isEditing ? "hidden" : "visible"}
    ios={{
      systemIcon: 2,
      position: "right" as const
    }}
    android={{
      systemIcon: "ic_menu_edit"
    }}
  />
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapSave}
    visibility={isEditing ? "visible" : "hidden"}
    ios={{
      systemIcon: 3,
      position: "right" as const
    }}
    android={{
      systemIcon: "ic_menu_save"
    }} />
  <actionItem
    nodeRole={"actionItems"}
    onTap={onTapCancel}
    visibility={isEditing ? "visible" : "hidden"}
    ios={{
      systemIcon: 1,
      position: "ic_menu_close_clear_cancel" as const
    }}
  />
</actionBar>

Props

Name	Type	Description
`ios.systemIcon`	`number`	Sets the icon of the `ActionItem` for iOS. The value must be a number from the `UIBarButtonSystemItem` enumeration.
`android.systemIcon`	`string`	Sets the icon of the `ActionItem` for Android. The value must be the name of a drawable resource.
`ios.position`	`string`	Sets the position of the `ActionItem` within the `ActionBar` for iOS. Valid values: `left` or `right`. Default value is `left`.
`android.position`	`string`	Sets the position of the `ActionItem` within the `ActionBar` for Android. Valid values: `actionBar` (places the item in the ActionBar) `popup` (places the item in the options menu; renders items as text) `actionBarIfRoom` (places the item in the `ActionBar` if there is enough room for it there; otherwise, placess it in the options menu) Default value is `actionBar`.
`onTap`	`(args:EventData) => void`	Emitted when the `ActionItem` is tapped.

Native component

Android	iOS
`android.widget.Toolbar`	`UINavigationItem`