Skip to content

refactor(iOS): add type to header bar button items #3306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 21, 2025
Merged

refactor(iOS): add type to header bar button items #3306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6909d3
update BarButtonItems example to match new react-navigation API
johankasperi Oct 20, 2025
89505f9
add type to header items
johankasperi Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 66 additions & 26 deletions apps/src/screens/BarButtonItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,9 @@ export default function BarButtonItemsExample() {
component={PlainButtonDemo}
options={{
title: 'Plain Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Info',
onPress: () => Alert.alert('Info pressed'),
},
Expand All @@ -100,12 +101,14 @@ export default function BarButtonItemsExample() {
component={IconButtonDemo}
options={{
title: 'Icon Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
icon: {
type: "imageSource",
imageSource: require('../../assets/search_black.png')
},
label: "Label",
onPress: () => Alert.alert('Icon pressed'),
},
],
Expand All @@ -116,12 +119,14 @@ export default function BarButtonItemsExample() {
component={IconButtonDemo}
options={{
title: 'System image Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
icon: {
type: "sfSymbol",
name: "square.and.arrow.up"
},
label: "Label",
onPress: () => Alert.alert('Icon pressed'),
},
],
Expand All @@ -132,8 +137,9 @@ export default function BarButtonItemsExample() {
component={MenuButtonDemo}
options={{
title: 'Menu Button',
headerRightItems: [
headerRightItems: () => [
{
type: "menu",
label: 'Menu',
menu: {
items: [
Expand All @@ -158,8 +164,9 @@ export default function BarButtonItemsExample() {
component={BadgeButtonDemo}
options={{
title: 'Badge Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Badge',
badge: {
value: '3',
Expand All @@ -178,8 +185,9 @@ export default function BarButtonItemsExample() {
component={DisabledButtonDemo}
options={{
title: 'Disabled Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Disabled',
disabled: true,
onPress: () => Alert.alert('Should not fire'),
Expand All @@ -192,8 +200,9 @@ export default function BarButtonItemsExample() {
component={CustomColorButtonDemo}
options={{
title: 'Custom Color Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Purple',
tintColor: 'purple',
onPress: () => Alert.alert('Purple pressed'),
Expand All @@ -206,8 +215,9 @@ export default function BarButtonItemsExample() {
component={ProminentStyleButtonDemo}
options={{
title: 'Prominent Style Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Prominent',
variant: 'prominent',
tintColor: 'green',
Expand All @@ -221,8 +231,9 @@ export default function BarButtonItemsExample() {
component={LabelStyleButtonDemo}
options={{
title: 'Label Style Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Styled',
labelStyle: {
fontFamily: 'Georgia',
Expand All @@ -240,23 +251,31 @@ export default function BarButtonItemsExample() {
component={IconSharesBgButtonDemo}
options={{
title: 'Icon SharesBackground',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
onPress: () => Alert.alert('Icon with sharesBackground pressed'),
sharesBackground: true,
},
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
onPress: () => Alert.alert('Icon with sharesBackground pressed'),
sharesBackground: true,
},
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
onPress: () => Alert.alert('Icon with sharesBackground pressed'),
sharesBackground: false,
},
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
hidesSharedBackground: true,
onPress: () => Alert.alert('Icon with sharesBackground false pressed'),
Expand All @@ -269,8 +288,9 @@ export default function BarButtonItemsExample() {
component={TextButtonWithWidthDemo}
options={{
title: 'Text Button With Width',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Wide',
width: 100,
onPress: () => Alert.alert('Wide text button pressed'),
Expand All @@ -283,15 +303,20 @@ export default function BarButtonItemsExample() {
component={IconButtonsWithSpacingDemo}
options={{
title: 'Icon Buttons With Spacing',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
onPress: () => Alert.alert('First icon pressed'),
},
{
type: "spacing",
spacing: 100,
},
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_white.png') },
onPress: () => Alert.alert('Second icon pressed'),
},
Expand All @@ -304,12 +329,15 @@ export default function BarButtonItemsExample() {
options={{
title: 'Header Tint Color',
headerTintColor: 'red',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Tinted',
onPress: () => Alert.alert('Tinted pressed'),
},
{
type: "button",
label: "Label",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
onPress: () => Alert.alert('Tinted icon pressed'),
},
Expand All @@ -321,13 +349,16 @@ export default function BarButtonItemsExample() {
component={DoneStyleButtonDemo}
options={{
title: 'Done Style Button',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Done',
variant: 'done',
onPress: () => Alert.alert('Done text pressed'),
},
{
type: "button",
label: "DoneIcon",
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
variant: 'done',
onPress: () => Alert.alert('Done icon pressed'),
Expand All @@ -340,8 +371,9 @@ export default function BarButtonItemsExample() {
component={AdvancedMenuButtonDemo}
options={{
title: 'Advanced Menu Button',
headerRightItems: [
headerRightItems: () => [
{
type: "menu",
label: 'Menu',
menu: {
label: 'Context menu',
Expand Down Expand Up @@ -395,22 +427,23 @@ export default function BarButtonItemsExample() {
options={{
title: 'React Node Button',
headerBackVisible: true,
headerRightItems: [
headerRightItems: () => [
{
// eslint-disable-next-line react/no-unstable-nested-components
customView: () => <TouchableOpacity onPress={() => Alert.alert('React Node 1 pressed')}>
type: "custom",
element: <TouchableOpacity onPress={() => Alert.alert('React Node 1 pressed')}>
<Text style={{ color: 'blue' }}>React Node 1</Text>
</TouchableOpacity>,
hidesSharedBackground: true
},
{
type: "button",
label: "Native",
onPress: () => Alert.alert('Native button pressed'),
sharesBackground: true,
},
{
// eslint-disable-next-line react/no-unstable-nested-components
customView: () => <TouchableOpacity onPress={() => Alert.alert('React Node 2 pressed')}>
type: "custom",
element: <TouchableOpacity onPress={() => Alert.alert('React Node 2 pressed')}>
<Text style={{ color: 'red' }}>React Node 2</Text>
</TouchableOpacity>
},
Expand All @@ -421,14 +454,15 @@ export default function BarButtonItemsExample() {
options={{
title: 'Back Button Visible',
headerBackVisible: true,
headerLeftItems: [
headerLeftItems: () => [
{
// eslint-disable-next-line react/no-unstable-nested-components
customView: () => <TouchableOpacity onPress={() => Alert.alert('Left React Node')}>
type: "custom",
element: <TouchableOpacity onPress={() => Alert.alert('Left React Node')}>
<Text style={{ color: 'blue' }}>React Node</Text>
</TouchableOpacity>
},
{
type: "button",
label: "Native",
onPress: () => Alert.alert('Native button pressed'),
},
Expand All @@ -438,8 +472,9 @@ export default function BarButtonItemsExample() {
component={IdentifierExample}
options={({ navigation }) => ({
title: 'Identifier Example',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Button',
onPress: () => {
navigation.navigate('IdentifierExample2');
Expand All @@ -452,8 +487,9 @@ export default function BarButtonItemsExample() {
component={IdentifierExample2}
options={{
title: 'Identifier Example 2',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: 'Btn',
onPress: () => Alert.alert('Button 1 pressed'),
},
Expand All @@ -463,20 +499,24 @@ export default function BarButtonItemsExample() {
component={ExessiveItemsExample}
options={{
title: 'Exessive Items Example',
headerRightItems: [
headerRightItems: () => [
{
type: "button",
label: "Button 1",
onPress: () => Alert.alert('Button 1 pressed'),
},
{
type: "button",
label: "Button 2",
onPress: () => Alert.alert('Button 2 pressed'),
},
{
type: "button",
label: "Button 3",
onPress: () => Alert.alert('Button 3 pressed'),
},
{
type: "button",
label: "Button 4",
onPress: () => Alert.alert('Button 4 pressed'),
},
Expand Down
10 changes: 10 additions & 0 deletions guides/GUIDE_FOR_LIBRARY_AUTHORS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -575,6 +575,8 @@ An array of objects describing native bar button items to display on the left or

#### The button and menu items support:

`type: 'button' | 'menu'` — Type of the item.

`label: string` — Label of the button.

`labelStyle?: { fontFamily?: string; fontSize?: number; fontWeight?: string; color?: ColorValue; }` — Style for the button label.
Expand Down Expand Up @@ -607,6 +609,7 @@ An array of objects describing native bar button items to display on the left or

```
menu?: {
type: 'menu';
label?: string;
items: Array<
| {
Expand All @@ -629,6 +632,7 @@ menu?: {

#### The spacing item supports:

`type: 'spacing'` — Type of the item.
`spacing?: number` — Fixed space between items. The numeric value is only supported on iOS 18-

#### Example configuration:
Expand All @@ -638,18 +642,22 @@ menu?: {
options={{
headerRightItems: [
{
type: 'button',
label: 'Text button',
onPress: () => Alert.alert('Text pressed'),
},
{
type: 'button',
image: require('../../assets/search_black.png'),
onPress: () => Alert.alert('Icon pressed'),
},
{
type: 'button',
sfSymbolName: "square.and.arrow.up",
onPress: () => Alert.alert('SF symbol pressed'),
},
{
type: 'menu',
label: 'Menu',
menu: {
items: [
Expand All @@ -667,6 +675,7 @@ menu?: {
},
},
{
type: 'button',
label: 'Badge',
badge: {
value: '3',
Expand All @@ -676,6 +685,7 @@ menu?: {
onPress: () => Alert.alert('Badge pressed'),
},
{
type: 'button',
label: 'Prominent',
variant: 'prominent',
tintColor: 'green',
Expand Down
Loading