Summary
Keywords
Full Transcript
Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Olá, Dev! Nessa aula do curso Base de React Native nós vamos evoluir ainda mais o nosso componente de botão. Até aqui construímos a base e aplicamos o botão dentro do formulário, mas agora vamos dar um passo além criando variações reais para diferentes cenários, como salvar, cancelar e deletar. Essa é uma parte essencial do projeto porque mostra como transformar um único componente em algo flexível, reutilizável e com diferentes estilos de apresentação, exatamente como vemos em aplicativos profissionais. Durante a aula, você vai aprender a trabalhar com props dinâmicas para controlar comportamento, tamanhos e estilos dos botões. Vamos implementar juntos propriedades como grow para que os botões ocupem mais espaço na tela quando necessário e também a prop variant, que vai nos permitir alternar entre versões contained (preenchidas) e outlined (com borda). Além disso, vamos ver como aplicar ícones, alterar cores com base em estados (incluindo o uso de error para o botão de delete) e ajustar o layout para garantir que tudo fique alinhado ao protótipo do Figma. Ao final dessa aula, você terá um componente de botão completo, versátil e preparado para ser utilizado em diferentes telas do app. Essa implementação é um divisor de águas porque mostra como levar a componentização para outro nível, tornando seu código mais organizado, escalável e fácil de manter. Se você quer dominar React Native e entender como transformar componentes simples em soluções poderosas, essa é uma aula que você não pode perder. Então dá o play e bora codar juntos! Links mencionados no vídeo: 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com 🖥️ Protótipo no Figma: https://www.figma.com/community/file/1542265508040591315 📖 Repositório: https://github.com/lvsouza/youtube-react-native-humor-tracker/tree/899200baa9c67e97b49bfdd4f2dfe89d5bfd3014 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:20 | Avisos importantes 2:07 | Adicionando versão inicial do botão no form de detalhes 6:15 | Ajustando os tamanhos dos botões 8:30 | Adicionando variante outlined no botão 15:50 | Resolvendo bug de plataforma no android 16:40 | Finalização e agradecimentos CODARSE - Desenvolvimento geral do projeto #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner
