callstack / callstack/react-native-paper
feat: modernize BottomNavigationBar
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
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`**
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với các entry point hiện có là BottomNavigation và BottomNavigation.Bar, sau đó so sánh hành vi hiện tại của chúng với các đặc tả navigation bar và expressive của Material 3 được liên kết. Xem xét các khác biệt đã liệt kê về màu sắc, kích thước và hành vi, bao gồm cả việc đổi tên thành NavigationBar; công việc được xem là hoàn tất khi checklist đã được xử lý và hành vi MD3 được triển khai nhất quán.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- design, mobile
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100