Edit

NavigationButton

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

Extends <actionItem>.

See also:

• Official top-level documentation
• Detailed API specification
• <actionBar>
• <actionItem>

---

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">
  <navigationButton
    nodeRole={"navigationButton"}
    text="Go back"
    android={{
      position: undefined,
      systemIcon: "ic_menu_back"
    }}
    onTap={goBack}
  />
</actionBar>

Props

Name	Type	Description
text	string	(iOS-only) Sets the text of the button.
android.systemIcon	string	(Android-only) 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 class.
onTap	(args:EventData) => void	Emitted when the NavigationButton is tapped.

Native component

Android	iOS
android.widget.Toolbar	UINavigationItem