Button Options

const options = {
topBar: {
leftButtons: [
{
id: 'id',
text: 'Button',
},
],
},
};

allCaps

This option will set whether characters are all capitalized or not.

TypeRequiredPlatformDefault
booleanNoAndroidtrue

fontSize

If the button has text, this option is used to set font size in DP.

TypeRequiredPlatform
numberNoBoth

id

Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.

TypeRequiredPlatform
stringYesBoth

icon

Button icon. If the button is pushed to the overflow menu, the button text is used instead.

TypeRequiredPlatform
numberNoBoth

text

Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.

TypeRequiredPlatform
stringNoBoth

showAsAction

TypeRequiredPlatform
enum('always', 'never', 'withText', 'ifRoom')NoAndroid
  • ifRoom - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
  • never - Never place this button in the TopBar. Instead, list the button in the overflow menu.
  • always - Always place this button in the app bar.

component

Set a react component as this button's view which will be displayed instead of the regular view.

TypeRequiredPlatform
ComponentNoBoth

iconInsets

IconInsets are applied to the icon to translate its original position on the screen.

TypeRequiredPlatform
IconInsetsNoiOS

systemItem

System icon; ignored if an icon is specified. For more information, see apple's guidelines.

TypeRequiredPlatform
enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo')NoiOS