📱Curso base de React Native - React Native Completo: +78 Aulas do Zero à DOIS apps prontos - Curso base de React Native 2025: #34 - Configurando a LISTAGEM dinâmica com FLATLIST

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nesta aula do nosso curso Base de React Nate, vamos transformar a listagem de registros da tela principal em algo totalmente dinâmico e funcional. Vamos começar adicionando estados no React Native, estruturando corretamente os tipos com TypeScript e preparando nossa aplicação para lidar com listas reais de dados. Você vai entender como criar uma interface de listagem que reflete os registros do usuário de forma prática, e já aprender a manipular e exibir esses dados de maneira eficiente. Essa é uma etapa essencial para qualquer app que precisa mostrar informações de forma organizada e interativa. Vamos explorar o uso do FlatList do React Native, que é a solução ideal para listas performáticas. Ao longo da aula, você vai ver como substituir o ScrollView por essa ferramenta, garantindo que apenas os itens visíveis na tela sejam renderizados, o que deixa sua aplicação mais leve e rápida. Além disso, vamos configurar corretamente propriedades como renderItem e keyExtractor, aplicando estilos para manter a lista bonita e funcional, e garantindo que o layout continue responsivo mesmo quando a tela muda de tamanho. Essa prática vai te ensinar a trabalhar com listas reais de forma profissional, evitando problemas comuns de performance. Por fim, vamos cuidar dos detalhes finais da experiência do usuário, como mostrar mensagens quando a lista estiver vazia, organizar o layout e corrigir pequenos problemas de estilização que podem quebrar o fluxo da aplicação. Ao final da aula, você terá uma listagem totalmente funcional, dinâmica e performática, pronta para receber registros do usuário, e vai estar preparado para avançar para as próximas aulas do curso, onde vamos continuar aprimorando o aplicativo. Essa é a hora de consolidar o conhecimento em React Native e TypeScript de maneira prática e aplicá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/01d1bf29870f925466f75e628a8eda084ad46c59 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 0:45 | Entendendo qual tipo de listagem utilizar 2:10 | Criando o state para a listagem 6:13 | Adicionando o FlatList para performance 12:40 | Configurando o empty content no FlatList 15:17 | Finalização e agradecimentos CODARSE - Finalizando o App de humor tracker #ReactNative #CursoReactNative #ReactNativeDoZero #CriarApp #DesenvolvimentoMobile #ReactNativeGratis #AppEmMinutos #JavaScript #ReactNativeTutorial #Expo #ProgramacaoMobile #ReactNativeBrasil #PrimeiroApp #MobileDeveloper #ReactNativeBeginner