Header Buttons

You can add buttons to the left and right side of the top Navigation Header displayed by default in Stack Navigators which lets you add interactivity to your app's Header.

You can add Header buttons to individual Screens and also set Header buttons on the Stack Navigator in which case the icon and label will be displayed on every Screen in the navigator.

Once you've set an icon and/or label for a side of the Header, you can assign Actions to the corresponding Trigger from the Interactions tab.

To customize the Header buttons in your app, switch to Navigate mode, select a Screen or Stack Navigator on the left, and switch to the Configs tab in the right panel of the Builder.

Left Area

To set an Icon and Label for the left side of the Header, switch to Navigate mode, select a Screen or Stack Navigator on the left, and switch to the Configs tab tab in the right panel of the Builder.

Then switch to the Interactions tab and select the On Left Icon Press Trigger to run Actions.

⚠️

The Left Area Icon and Label are not displayed when a Back behavior is available.

Style Properties

Configuration Properties

Triggers

Right Area

To set an Icon and Label for the right side of the Header, switch to Navigate mode, select a Screen or Stack Navigator on the left, and switch to the Configs tab tab in the right panel of the Builder.

Then switch to the Interactions tab and select the On Right Icon Press Trigger to run Actions.

Style Properties

Configuration Properties

Triggers

Back Area

The back button will be displayed automatically in a Stack Navigator whenever it is possible for the user to go back from their current Screen.

On iOS this includes a label next to the button, which shows the title of the previous screen when the title fits in the available space, otherwise it says "Back".

Usually, this is what you want. But it's possible that in some circumstances you may want to customize the back button, in which case you can set the Icon and Label for the back area.

To set a custom Icon and Label for the back area of the Header, switch to Navigate mode, select a Screen or Stack Navigator on the left, and switch to the Configs tab tab in the right panel of the Builder.

Then switch to the Interactions tab and select the On Back Icon Press Trigger to run Actions.

⚠️

If you set an Icon for the back area, you'll need to handle back behavior yourself using the Navigate Back Action.

Style Properties

Configuration Properties

Triggers