HeaderWithBackButton — composition over configuration

[mountiny]

Problem

HeaderWithBackButton has ~50 props (11 shouldShow* / shouldDisplay* flags) and is used on 500+ screens. Each right-side action is a visibility flag + handler + icon; the center is mutually exclusive (title / progress bar / report avatar). Same compound-component opportunity as Button, Table, and in-progress MenuItem.

Proposed solution

Granular compound API + a few presets. ~90% of call sites are back button + title only.

// Preset — default screen header
<Header.Screen title={title} />
<Header.Screen title={title} onBack={onBack} />

// Preset — wizard / onboarding
<Header.Wizard title={title} progress={percentage} stepCounter={step} />

// Granular — attachment viewer, etc.
<Header>
  <Header.Left><Header.BackButton /></Header.Left>
  <Header.Center><Header.Title>{title}</Header.Title></Header.Center>
  <Header.Right>
    <Header.DownloadButton onPress={download} isLoading={isDownloading} />
    <Header.RotateButton onPress={rotate} />
    <Header.ThreeDotsMenu items={menuItems} />
    <Header.CloseButton />
  </Header.Right>
  <Header.HelpButton />
</Header>

Presets: Header.Screen (bulk migration), Header.Wizard, plus granular blocks for the rest.

Backwards compatibility: existing <HeaderWithBackButton … /> API unchanged; migrate incrementally via deprecation.

Benefits: no new prop per customization; fewer rerenders; clearer complex headers.

Scope

• src/components/HeaderWithBackButton/
• ~525 files / ~542 usages
• Namespace for composed export TBD (@components/Header is already the title/subtitle primitive)

Related

• Button - Composition over Configuration #83762, MenuItem — composition over configuration #96202

Issue Owner

Current Issue Owner: @gijoe0295