Au 06 - Mobile - React Native - Estilizando o subheader - Mestres BEGIN

Nesta aula, exploramos como implementar botões customizados com estados interativos em React Native, focando na experiência do usuário e reutilização de componentes.

Componente CustomButton

Criamos um componente reutilizável com as seguintes características:

• Recebe texto via props para máxima flexibilidade
• Utiliza TouchableOpacity para feedback visual
• Implementa estado ativo/inativo com useState
• Centraliza a estilização com StyleSheet

Gestão de Estado

O controle do estado ativo é feito através de:

• Estado local isActive gerenciado por useState
• Alternância do estado no evento onPress
• Estilos condicionais baseados no estado

Feedback Visual

Principais elementos de interação implementados:

• Efeito de opacidade ao pressionar (TouchableOpacity)
• Mudança de cor quando ativado/desativado
• Transição suave entre estados

Boas Práticas

Lições importantes desta implementação:

• Organização de estilos em StyleSheet
• Componentização para reutilização
• Feedback visual claro para o usuário
• Gestão eficiente de estado

Considerações Finais

Esta abordagem proporciona:

• Melhor experiência do usuário
• Código mais limpo e organizado
• Fácil manutenção e extensão
• Consistência visual na aplicação