Summary
Keywords
Full Transcript
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do nosso curso Base de React, vamos mergulhar no ajuste completo das nossas bottom tabs para deixar o aplicativo exatamente como o protótipo que planejamos. Vou te mostrar passo a passo como personalizar cada detalhe das tabs, desde a posição, margens, padings, cores, até o comportamento dos botões ao serem pressionados. A ideia é que o app fique funcional, visualmente coerente e pronto para receber as próximas etapas de estilização, garantindo que você compreenda como aplicar ajustes avançados no React Native de forma prática e eficiente. Vamos explorar juntos como criar um custom tab button, estendendo a funcionalidade do componente original, adicionando comportamento de foco, efeito de pressão e estilização condicional. Durante a aula, você vai aprender a lidar com limites do próprio React Native, contornando situações onde estilos não funcionam diretamente, e ainda vai ver como integrar tudo isso à navegação stack entre telas, garantindo que a experiência do usuário fique fluida e visualmente correta. Tudo isso usando boas práticas de código, organização de imports e reutilização de estilos a partir de um tema centralizado. Ao final, você terá um conhecimento sólido sobre como construir e personalizar tabs de maneira avançada, deixando o aplicativo pronto para parecer profissional e fiel ao protótipo. Além disso, vamos tocar em conceitos de layout responsivo, ajustes finos de margens e padings, e como estruturar componentes que são reutilizáveis e fáceis de manter. É uma aula essencial para qualquer dev que quer dominar a interface do React Native e levar o seu app para um nível mais próximo do que você imaginou. Links mencionados no vídeo: 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com 🖥️ Protótipo no Figma: https://www.figma.com/community/file/1543675168225105299 📖 Repositório: https://github.com/lvsouza/youtube-react-native-forca-play/tree/b071fc22dc10a0489e52f4a438a5ec7dcc9ed777 🎮 App na Google Play: https://play.google.com/store/apps/details?id=com.lvsouzadev.forcaplay Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Meu setup: 📺 Monitor 24: https://amzn.to/4msD7TY 🤖 Processador: https://amzn.to/4oJLZpN 🎧 Fone bluetooth: https://amzn.to/4lESd7r ⌨️ Teclado e mouse: https://amzn.to/4oPdgHu 💪 Suporte articulado: https://amzn.to/41hIrRE Conteúdo: 0:00 | Introdução da aula 0:29 | Avisos importantes 0:53 | Como personalizar as tabs do expo router 7:00 | Personalizando as tabs do app 22:30 | Finalização e agradecimentos CODARSE - Estilização e tema com NativeWind #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner
