callstack / callstack/react-native-paper
feat: modernize App bar to MD3
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
The goal is to modernize the current App bar implementation according to the latest MD3 specs. Reuse the already existing theme tokens (typography, colors etc).
# Current state
## Appbar
**MD3 spec:** App bars (Top app bar)
**Specs link:** https://m3.material.io/components/app-bars/specs
### Color tokens
- Container background `surface` (flat) ✅
- `surfaceContainer` when `elevated` prop is set ✅
- Leading icon `onSurface` ✅
- Trailing icons `onSurfaceVariant` ✅
- Headline `onSurface` ✅
### Spacing / sizing
- Small height 64dp ✅
- Baseline medium height 112dp ✅
- Baseline large height 152dp ✅
- Typography per mode (`titleLarge` / `headlineSmall` / `headlineMedium`) ✅
### Behavior
- [ ] Medium flexible and Large flexible variants not implemented. Both are part of the M3 Expressive spec (Search app bar is covered by the separate `Searchbar` component)
- [ ] `medium` and `large` modes implement the baseline variants, which are explicitly not recommended in M3 Expressive. Flexible counterparts should be added and baselines deprecated
- [ ] `center-aligned` is a separate `mode` value. M3 Expressive merges it into `small` as a text-alignment configuration
- [ ] `elevated` is a static boolean. MD3 specifies the container color transitions reactively on scroll (`surface` to `surfaceContainer`); no scroll-reactive API is provided
- [ ] Subtitle support is `@deprecated` in v5. M3 Expressive medium flexible and large flexible variants restore subtitle as a supported element
- [ ] Image/logo in the container not supported. M3 Expressive anatomy includes image/logo as an optional element
- [ ] Filled trailing icon button not supported. M3 Expressive allows a single filled (primary or tonal) icon button in the trailing area
### Notes
- Current implementation covers the original M3 set (small, center-aligned, medium baseline, large baseline) but is missing the full M3 Expressive set
- Should be renamed to TopAppBar
Contributor guide
Research direction
Start by reading the current App bar implementation and the linked MD3 App bars specification, then compare the existing theme-token usage with every unchecked behavior in the issue. Done means the component covers the missing flexible variants, updated mode and elevation behavior, subtitle, image/logo, and filled trailing-button support, and is renamed to TopAppBar.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- design, frontend, mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100