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 -   / discord  
🎬 CodarSe - https://codarse.com
🖥️ Protótipo no Figma: https://www.figma.com/community/file/...
📖 Repositório: https://github.com/lvsouza/youtube-re...

Outros cursos no canal:
🎩 Figma para DEVs -    • Figma para DEVs: #00 - Apresentação do curso  
☪️ Curso de estilização no React -    • Estilização no React: Aula 00 - Curso de f...  
💎 Curso base de React -    • Curso base de React 2025: #00 - Apresentaç...  
👑 React, Material UI 5 e Typescript -    • React, Material UI 5 e Typescript: #00 - I...  
🏆 Curso de API Rest, Node e Typescript -    • API Rest, Node e Typescript: #00 - Apresen...  

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