ActionBar · React NativeScript

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

Introduction to Node Roles

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

Using a title

import * as React from "react";

<actionBar title="MyApp" />

Using a custom title view

import * as React from "react";

<actionBar>
  <stackLayout nodeRole={"titleView"} 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.

import * as React from "react";

<actionBar title="My App" flat={true} />

Adding buttons

import * as React from "react";

<actionBar>
  <label nodeRole={"titleView"}>Hello Title View</label>
  <actionItem nodeRole={"actionItems"}>
    <button nodeRole={"actionView"}>One</button>
  </actionItem>
  <actionItem nodeRole={"actionItems"}>
    <button nodeRole={"actionView"}>Two</button>
  </actionItem>
  <actionItem nodeRole={"actionItems"}>
    <button nodeRole={"actionView"}>Three</button>
  </actionItem>
</actionBar>

Setting an app icon for Android

import * as React from "react";

<actionBar title="My App" android={{ icon: "res://icon", iconVisibility: "always" }} />

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`