Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Curso base de React Native 2025: #28 - Finalizando tela inicial do app e adicionar ícones no EXPO
Play lesson

📱Curso base de React Native - React Native Completo: +78 Aulas do Zero à DOIS apps prontos - Curso base de React Native 2025: #28 - Finalizando tela inicial do app e adicionar ícones no EXPO

4.0 (1)
23 learners

What you'll learn

This course includes

  • 25.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

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 finalizar a tela Home e deixá-la pronta de verdade. Até agora construímos boa parte da estrutura, mas ainda faltavam alguns detalhes importantes para que a tela ficasse igual ao protótipo. Vamos implementar juntos a mensagem de estado vazio, que aparece quando o usuário ainda não registrou nenhum humor, além de configurar todo o alinhamento e a estilização para garantir que a tela fique exatamente como planejado no design. Além disso, você vai aprender como criar a lógica que alterna entre diferentes footers, dependendo se o usuário já tem ou não um nome registrado. Isso significa que, quando o nome ainda não estiver definido, vamos exibir o input para cadastro. Já quando o nome estiver preenchido, o app vai mostrar uma nova versão do footer com um conjunto de estrelas, permitindo ao usuário registrar o humor do dia. Esse é um passo muito importante, porque conecta a lógica da aplicação com a experiência do usuário. Para completar, vamos explorar como utilizar ícones no React Native através do Expo Vector Icons, escolhendo o estilo ideal para representar as estrelas e deixando tudo bem próximo do protótipo. Também vamos configurar interações com clique, navegação para a tela de detalhe e até a passagem de parâmetros para identificar qual estrela foi selecionada. Ao final da aula, sua tela Home estará totalmente finalizada, funcional e pronta para levar o app a outro nível. 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/ac85bfde5d4b4d4e917170cfc77882fb3f8f840b 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:30 | Avisos importantes 0:42 | Entendendo o protótipo 1:50 | Adicionando o empty container 5:50 | Alternando o Footer para o Footer com as estrelas para registrar o humor 7:38 | Como adicionar ícones no app 14:30 | Configurando a navegação para a tela de detalhes 15:25 | Finalização e agradecimentos CODARSE - Desenvolvimento geral do projeto #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere