callstack / callstack/react-native-paper
feat: modernize BottomNavigationBar
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.2k
- 平均マージ
- 5日 23時間
- マージ済み PR(30日)
- 12
説明
Modernize the existing BottomNavigationBar to reuse theme tokens (color, shape, motion, typography etc) and make sure the MD3 specs are respected. See the expressive update too: https://m3.material.io/components/navigation-bar/overview
# Current State
## Bottom Navigation
**MD3 spec:** Navigation bar
**Specs link:** https://m3.material.io/components/navigation-bar/specs
### Notes
- `BottomNavigation` is a router-aware wrapper around `BottomNavigation.Bar` that handles scene management and tab transitions. MD3 compliance is governed by `BottomNavigation.Bar` below.
---
## Bottom Navigation Bar
**MD3 spec:** Navigation bar
**Specs link:** https://m3.material.io/components/navigation-bar/specs
### Color tokens
- Container `surfaceContainer` ✅
- Active icon `onSecondaryContainer` ✅
- Active indicator `secondaryContainer` ✅
- Inactive icon `onSurfaceVariant` ✅
- Inactive label `onSurfaceVariant` ✅
- [ ] Active label uses `onSurface`. Spec token `Nav bar item active label text color` maps to `secondary`
### Spacing / sizing
- Active indicator 64x32dp with 16dp corner radius ✅
- Icon-to-label gap 4dp (`marginBottom: 4` on icon container) ✅
- [ ] `v3NoLabelContainer` height is hardcoded to 80dp. Spec requires 64dp
- [ ] `BAR_HEIGHT = 56` constant is used for label height styling. Spec bar height is 64dp
### Behavior
- [ ] `shifting` mode (inactive tabs hide labels) is an MD2 pattern not present in MD3
- `labeled={false}` hides all labels (not in MD3 spec, but a deliberate extension used by Google’s own products e.g. Gmail) ✅
- [ ] `rippleColor: 'transparent'` suppresses state layer feedback. MD3 requires visible state layers (8% hovered, 10% focused/pressed)
- [ ] Flexible navigation bar (horizontal items for medium windows) not implemented. M3 Expressive requires horizontal layout support
- [ ] Baseline navigation bar is not recommended in M3 Expressive; flexible variant should replace it
### Notes
- Rename to match MD3: **`NavigationBar`**
コントリビューションガイド
調査の方向性
既存の BottomNavigation と BottomNavigation.Bar のエントリポイントから始め、現在の動作をリンク先の Material 3 navigation bar および expressive の仕様と比較します。NavigationBar への名前変更を含め、一覧にある色、サイズ、動作の差異を確認します。チェックリストに対応し、MD3 の動作が一貫して実装されていれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- design, mobile
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100