Skip to content

Commit 1443bd9

Browse files
kkafarkkafar
authored
refactor(iOS): rename label -> title in context of header items API (#3318)
## Description This PR intends to align back prop naming with the [platform](https://developer.apple.com/documentation/uikit/uibaritem/title?language=objc) nomenclature. The header item API is iOS specific and there is really no reason to obfuscate in any way what we expose. ## Changes Renamed `label` -> `title` & `labelStyle` -> `titleStyle`. I recognize that technically this is a breaking change, however since react-navigation has not published the API yet, and we're in coordination, API end-users won't be affected. ## Test code and steps to reproduce `BarButtonItems` example should work the same. ## Checklist - [ ] Ensured that CI passes
1 parent 4eeae14 commit 1443bd9

File tree

7 files changed

+72
-78
lines changed

7 files changed

+72
-78
lines changed

‎apps/src/screens/BarButtonItems.tsx‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const demoScreens = [
1515
{ name: 'DisabledButtonDemo', title: 'Disabled Button' },
1616
{ name: 'CustomColorButtonDemo', title: 'Custom Color Button' },
1717
{ name: 'ProminentStyleButtonDemo', title: 'Prominent Style Button' },
18-
{ name: 'LabelStyleButtonDemo', title: 'Label Style Button' },
18+
{ name: 'TitleStyleButtonDemo', title: 'Title Style Button' },
1919
{ name: 'IconSharesBgButtonDemo', title: 'Icon SharesBackground' },
2020
{ name: 'TextButtonWithWidthDemo', title: 'Text Button With Width' },
2121
{ name: 'IconButtonsWithSpacingDemo', title: 'Icon Buttons With Spacing' },
@@ -59,7 +59,7 @@ const BadgeButtonDemo = DemoScreenContent;
5959
const DisabledButtonDemo = DemoScreenContent;
6060
const CustomColorButtonDemo = DemoScreenContent;
6161
const ProminentStyleButtonDemo = DemoScreenContent;
62-
const LabelStyleButtonDemo = DemoScreenContent;
62+
const TitleStyleButtonDemo = DemoScreenContent;
6363
const IconSharesBgButtonDemo = DemoScreenContent;
6464
const TextButtonWithWidthDemo = DemoScreenContent;
6565
const IconButtonsWithSpacingDemo = DemoScreenContent;
@@ -90,7 +90,7 @@ export default function BarButtonItemsExample() {
9090
headerRightItems: () => [
9191
{
9292
type: "button",
93-
label: 'Info',
93+
title: 'Info',
9494
onPress: () => Alert.alert('Info pressed'),
9595
},
9696
],
@@ -108,7 +108,7 @@ export default function BarButtonItemsExample() {
108108
type: "imageSource",
109109
imageSource: require('../../assets/search_black.png')
110110
},
111-
label: "Label",
111+
title: "Title",
112112
onPress: () => Alert.alert('Icon pressed'),
113113
},
114114
],
@@ -126,7 +126,7 @@ export default function BarButtonItemsExample() {
126126
type: "sfSymbol",
127127
name: "square.and.arrow.up"
128128
},
129-
label: "Label",
129+
title: "Title",
130130
onPress: () => Alert.alert('Icon pressed'),
131131
},
132132
],
@@ -140,16 +140,16 @@ export default function BarButtonItemsExample() {
140140
headerRightItems: () => [
141141
{
142142
type: "menu",
143-
label: 'Menu',
143+
title: 'Menu',
144144
menu: {
145145
items: [
146146
{
147-
label: 'Option 1',
147+
title: 'Option 1',
148148
type: "action",
149149
onPress: () => Alert.alert('Option 1 pressed'),
150150
},
151151
{
152-
label: 'Option 2',
152+
title: 'Option 2',
153153
type: "action",
154154
onPress: () => Alert.alert('Option 2 pressed'),
155155
},
@@ -167,7 +167,7 @@ export default function BarButtonItemsExample() {
167167
headerRightItems: () => [
168168
{
169169
type: "button",
170-
label: 'Badge',
170+
title: 'Badge',
171171
badge: {
172172
value: '3',
173173
style: {
@@ -188,7 +188,7 @@ export default function BarButtonItemsExample() {
188188
headerRightItems: () => [
189189
{
190190
type: "button",
191-
label: 'Disabled',
191+
title: 'Disabled',
192192
disabled: true,
193193
onPress: () => Alert.alert('Should not fire'),
194194
},
@@ -203,7 +203,7 @@ export default function BarButtonItemsExample() {
203203
headerRightItems: () => [
204204
{
205205
type: "button",
206-
label: 'Purple',
206+
title: 'Purple',
207207
tintColor: 'purple',
208208
onPress: () => Alert.alert('Purple pressed'),
209209
},
@@ -218,7 +218,7 @@ export default function BarButtonItemsExample() {
218218
headerRightItems: () => [
219219
{
220220
type: "button",
221-
label: 'Prominent',
221+
title: 'Prominent',
222222
variant: 'prominent',
223223
tintColor: 'green',
224224
onPress: () => Alert.alert('Prominent pressed'),
@@ -227,15 +227,15 @@ export default function BarButtonItemsExample() {
227227
}}
228228
/>
229229
<Stack.Screen
230-
name="LabelStyleButtonDemo"
231-
component={LabelStyleButtonDemo}
230+
name="TitleStyleButtonDemo"
231+
component={TitleStyleButtonDemo}
232232
options={{
233-
title: 'Label Style Button',
233+
title: 'Title Style Button',
234234
headerRightItems: () => [
235235
{
236236
type: "button",
237-
label: 'Styled',
238-
labelStyle: {
237+
title: 'Styled',
238+
titleStyle: {
239239
fontFamily: 'Georgia',
240240
fontSize: 18,
241241
fontWeight: 'bold',
@@ -254,28 +254,28 @@ export default function BarButtonItemsExample() {
254254
headerRightItems: () => [
255255
{
256256
type: "button",
257-
label: "Label",
257+
title: "Title",
258258
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
259259
onPress: () => Alert.alert('Icon with sharesBackground pressed'),
260260
sharesBackground: true,
261261
},
262262
{
263263
type: "button",
264-
label: "Label",
264+
title: "Title",
265265
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
266266
onPress: () => Alert.alert('Icon with sharesBackground pressed'),
267267
sharesBackground: true,
268268
},
269269
{
270270
type: "button",
271-
label: "Label",
271+
title: "Title",
272272
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
273273
onPress: () => Alert.alert('Icon with sharesBackground pressed'),
274274
sharesBackground: false,
275275
},
276276
{
277277
type: "button",
278-
label: "Label",
278+
title: "Title",
279279
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
280280
hidesSharedBackground: true,
281281
onPress: () => Alert.alert('Icon with sharesBackground false pressed'),
@@ -291,7 +291,7 @@ export default function BarButtonItemsExample() {
291291
headerRightItems: () => [
292292
{
293293
type: "button",
294-
label: 'Wide',
294+
title: 'Wide',
295295
width: 100,
296296
onPress: () => Alert.alert('Wide text button pressed'),
297297
},
@@ -306,7 +306,7 @@ export default function BarButtonItemsExample() {
306306
headerRightItems: () => [
307307
{
308308
type: "button",
309-
label: "Label",
309+
title: "Title",
310310
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
311311
onPress: () => Alert.alert('First icon pressed'),
312312
},
@@ -316,7 +316,7 @@ export default function BarButtonItemsExample() {
316316
},
317317
{
318318
type: "button",
319-
label: "Label",
319+
title: "Title",
320320
icon: { type: "imageSource", imageSource: require('../../assets/search_white.png') },
321321
onPress: () => Alert.alert('Second icon pressed'),
322322
},
@@ -332,12 +332,12 @@ export default function BarButtonItemsExample() {
332332
headerRightItems: () => [
333333
{
334334
type: "button",
335-
label: 'Tinted',
335+
title: 'Tinted',
336336
onPress: () => Alert.alert('Tinted pressed'),
337337
},
338338
{
339339
type: "button",
340-
label: "Label",
340+
title: "Title",
341341
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
342342
onPress: () => Alert.alert('Tinted icon pressed'),
343343
},
@@ -352,13 +352,13 @@ export default function BarButtonItemsExample() {
352352
headerRightItems: () => [
353353
{
354354
type: "button",
355-
label: 'Done',
355+
title: 'Done',
356356
variant: 'done',
357357
onPress: () => Alert.alert('Done text pressed'),
358358
},
359359
{
360360
type: "button",
361-
label: "DoneIcon",
361+
title: "DoneIcon",
362362
icon: { type: "imageSource", imageSource: require('../../assets/search_black.png') },
363363
variant: 'done',
364364
onPress: () => Alert.alert('Done icon pressed'),
@@ -374,12 +374,12 @@ export default function BarButtonItemsExample() {
374374
headerRightItems: () => [
375375
{
376376
type: "menu",
377-
label: 'Menu',
377+
title: 'Menu',
378378
menu: {
379-
label: 'Context menu',
379+
title: 'Context menu',
380380
items: [
381381
{
382-
label: 'Action 1',
382+
title: 'Action 1',
383383
icon: { type: "sfSymbol", name: 'star' },
384384
type: "action",
385385
state: 'on',
@@ -388,7 +388,7 @@ export default function BarButtonItemsExample() {
388388
onPress: () => Alert.alert('Action 1 pressed'),
389389
},
390390
{
391-
label: 'Action 2',
391+
title: 'Action 2',
392392
icon: { type: "sfSymbol", name: 'square.and.arrow.up' },
393393
type: "action",
394394
state: 'off',
@@ -397,12 +397,12 @@ export default function BarButtonItemsExample() {
397397
onPress: () => Alert.alert('Action 2 pressed'),
398398
},
399399
{
400-
label: 'Submenu',
400+
title: 'Submenu',
401401
icon: { type: "sfSymbol", name: "star" },
402402
type: 'submenu',
403403
items: [
404404
{
405-
label: 'Sub Action 1',
405+
title: 'Sub Action 1',
406406
state: 'mixed',
407407
type: 'action',
408408
onPress: () => Alert.alert('Sub Action 1 pressed'),
@@ -411,7 +411,7 @@ export default function BarButtonItemsExample() {
411411
discoverabilityLabel: 'Sub Action 1',
412412
},
413413
{
414-
label: 'Sub Action 2',
414+
title: 'Sub Action 2',
415415
type: 'action',
416416
onPress: () => Alert.alert('Sub Action 2 pressed'),
417417
},
@@ -438,7 +438,7 @@ export default function BarButtonItemsExample() {
438438
},
439439
{
440440
type: "button",
441-
label: "Native",
441+
title: "Native",
442442
onPress: () => Alert.alert('Native button pressed'),
443443
sharesBackground: true,
444444
},
@@ -464,7 +464,7 @@ export default function BarButtonItemsExample() {
464464
},
465465
{
466466
type: "button",
467-
label: "Native",
467+
title: "Native",
468468
onPress: () => Alert.alert('Native button pressed'),
469469
},
470470
],
@@ -476,7 +476,7 @@ export default function BarButtonItemsExample() {
476476
headerRightItems: () => [
477477
{
478478
type: "button",
479-
label: 'Button',
479+
title: 'Button',
480480
onPress: () => {
481481
navigation.navigate('IdentifierExample2');
482482
},
@@ -491,7 +491,7 @@ export default function BarButtonItemsExample() {
491491
headerRightItems: () => [
492492
{
493493
type: "button",
494-
label: 'Btn',
494+
title: 'Btn',
495495
onPress: () => Alert.alert('Button 1 pressed'),
496496
},
497497
],
@@ -503,22 +503,22 @@ export default function BarButtonItemsExample() {
503503
headerRightItems: () => [
504504
{
505505
type: "button",
506-
label: "Button 1",
506+
title: "Button 1",
507507
onPress: () => Alert.alert('Button 1 pressed'),
508508
},
509509
{
510510
type: "button",
511-
label: "Button 2",
511+
title: "Button 2",
512512
onPress: () => Alert.alert('Button 2 pressed'),
513513
},
514514
{
515515
type: "button",
516-
label: "Button 3",
516+
title: "Button 3",
517517
onPress: () => Alert.alert('Button 3 pressed'),
518518
},
519519
{
520520
type: "button",
521-
label: "Button 4",
521+
title: "Button 4",
522522
onPress: () => Alert.alert('Button 4 pressed'),
523523
},
524524
]

‎guides/GUIDE_FOR_LIBRARY_AUTHORS.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -577,9 +577,9 @@ An array of objects describing native bar button items to display on the left or
577577

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

580-
`label: string` — Label of the button.
580+
`title: string` — Title of the button.
581581

582-
`labelStyle?: { fontFamily?: string; fontSize?: number; fontWeight?: string; color?: ColorValue; }` — Style for the button label.
582+
`titleStyle?: { fontFamily?: string; fontSize?: number; fontWeight?: string; color?: ColorValue; }` — Style for the button title.
583583

584584
`icon?: PlatformIconIOS` — Icon for the item.
585585

0 commit comments

Comments
 (0)