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
Assessment
This issue has not been assessed yet.