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
Section titled “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.
Style Properties
Section titled “Style Properties”| Property | Description |
|---|---|
| Text & Icon | Sets the color of the left Header Label and Icon |
Configuration Properties
Section titled “Configuration Properties”| Property | Description |
|---|---|
| Icon | The icon to display next to the label in the Header. |
| Label | The label to display next to the icon in the Header. Optional |
Triggers
Section titled “Triggers”| Name | Description |
|---|---|
| On Left Icon Press | Runs the Action workflow when pressed |
Right Area
Section titled “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
Section titled “Style Properties”| Property | Description |
|---|---|
| Text & Icon | Sets the color of the right Header Label and Icon |
Configuration Properties
Section titled “Configuration Properties”| Property | Description |
|---|---|
| Icon | The icon to display next to the label in the Header. |
| Label | The label to display next to the icon in the Header. Optional |
Triggers
Section titled “Triggers”| Name | Description |
|---|---|
| On Right Icon Press | Runs the Action workflow when pressed |
Back Area
Section titled “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.
Style Properties
Section titled “Style Properties”| Property | Description |
|---|---|
| Icon | Sets the color of the back Icon |
Configuration Properties
Section titled “Configuration Properties”| Property | Description |
|---|---|
| Icon | The icon to display next to the label in the Header. |
| Label | The label to display next to the icon in the Header. Optional |
Triggers
Section titled “Triggers”| Name | Description |
|---|---|
| On Back Icon Press | Runs the Action workflow when pressed |