Configurações Tab Navigator | Jancer

Neste tutorial, vamos explorar as principais configurações para personalizar a barra de abas (Tab Bar) no Expo Router.

Configurações Básicas

• tabBarLabel: Define o texto exibido abaixo do ícone
• tabBarShowLabel: Booleano para mostrar/ocultar os labels
• tabBarLabelStyle: Estiliza o texto do label (fontSize, color, etc.)

1tabBarLabel: 'Mestres', tabBarShowLabel: true, tabBarLabelStyle: { fontSize: 14, fontWeight: 'bold', color: 'green' }

Badges e Cores

• tabBarBadge: Número exibido como notificação
• tabBarActiveTintColor: Cor quando a aba está ativa
• tabBarInactiveTintColor: Cor quando a aba está inativa
• tabBarActiveBackgroundColor: Cor de fundo da aba ativa

1tabBarBadge: 2, tabBarActiveTintColor: '#00FF00', tabBarInactiveTintColor: '#FF0000', tabBarActiveBackgroundColor: 'yellow'

Comportamento e Estilos Avançados

• tabBarHideOnKeyboard: Oculta a barra quando o teclado aparece
• tabBarButton: Permite customizar o componente do botão
• tabBarItemStyle: Estilo para cada item individual
• tabBarStyle: Estilo para a barra inteira

1tabBarHideOnKeyboard: true, tabBarButton: (props) => ( <TouchableOpacity {...props} /> ), tabBarItemStyle: { borderWidth: 1 }

Considerações Finais

A personalização do Tab Bar é essencial para criar uma experiência de navegação intuitiva e alinhada com a identidade visual do seu app. Com essas configurações você pode:

• Melhorar a usabilidade com feedbacks visuais claros
• Manter consistência com o design do aplicativo
• Destacar ações importantes através de badges
• Adaptar o layout para diferentes cenários (como com teclado aberto)

Experimente combinar essas opções para criar uma navegação que realmente agregue valor à experiência do usuário.