Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

feat: modernize BottomNavigationBar

Aberta
  • Algo errado?
#4,975 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 7 dias

@burczu já está trabalhando nisso.

Desde 18/6/2026.

  • #5006 de @burczu — aberto

Avaliação

Dificuldade
5/5
Tempo estimado
Mais de uma semana
Facilidade para iniciantes
35/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
react-native, typescript
Domínio
design, mobile

Direção de pesquisa

Comece pelos pontos de entrada existentes BottomNavigation e BottomNavigation.Bar e, em seguida, compare o comportamento atual deles com as especificações vinculadas de navigation bar e expressive do Material 3. Revise as diferenças listadas de cor, dimensionamento e comportamento, incluindo a renomeação para NavigationBar; considera-se concluído quando a checklist tiver sido atendida e o comportamento de MD3 estiver implementado de forma consistente.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
TypeScript
Estrelas
14.5k
Forks
2.3k
Merge médio
8d 2h
PRs com merge (30d)
4

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-paper

Todas as issues de callstack/react-native-paper

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.