Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

feat: modernize BottomNavigationBar

Đang mở
  • Có gì không ổn?
#4,975 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 7 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react-native, typescript
Lĩnh vực
design, mobile

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.

Mô tả

v6

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
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
6 ngày 12 giờ
Pull request đã merge (30 ngày)
5

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của callstack/react-native-paper

Tất cả issue của callstack/react-native-paper

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.