Curso online gratuitoReact Native TypeScript: Desenvolva um app completo
Duração do curso online: 19 horas e 44 minutos
Novo
Curso grátis de React Native com TypeScript: crie um app completo com Expo, navegação, componentes reutilizáveis, telas e notificações.
Neste curso gratuito, aprenda sobre
Boas-vindas e Criação do Projeto
Estrutura de Pastas e Configurações Iniciais
Tela de Login e Componentes Base (Botões e Inputs)
Links, Teclado e UX da Autenticação
Navegação com React Navigation (Stack e Tabs)
Home: Header, Cards e Lista de Transações
Settings e Profile: Componentização e Navegação
Cartões: Adicionar e Detalhes do Cartão
Relatórios e Transações (Telas e Ajustes)
Notificações: Lista, Estados e Badge
Encerramento e Organização de Tipos
Descrição do curso
Aprenda a desenvolver um aplicativo completo com React Native e TypeScript, explorando um fluxo de construção pensado para quem quer sair do básico e entender como estruturar um projeto mobile moderno do início ao fim. O curso guia a criação de uma aplicação no estilo wallet, com foco em organização de pastas, boas práticas de tipagem e uma base sólida para evoluir com segurança no desenvolvimento.
Ao longo do projeto, você trabalha com Expo, configurações essenciais de ambiente, fontes e tema, além de componentes reutilizáveis para inputs e botões, incluindo variações e ajustes de layout. A experiência é prática e orientada a resolução de problemas, passando por correções de bugs e refinamentos para deixar a interface mais consistente e funcional.
Também são abordados fluxos comuns em apps reais, como telas de autenticação, cadastro e recuperação de senha, além de cuidados com usabilidade em formulários e teclado. Você aprende a implementar navegação com React Navigation, criar rotas tipadas e construir uma estrutura de navegação escalável com tabs e telas internas bem organizadas.
Para consolidar o app, são desenvolvidas telas e componentes de uso frequente, como cabeçalho, cartões, listagens com FlatList, detalhes, perfil, configurações, relatórios e notificações, incluindo elementos de destaque como badge para novidades. No final, você terá um projeto completo como referência, pronto para servir de base para seus próprios aplicativos e evoluções futuras.
Conteúdo do curso
Aula em vídeo: Aula 01 - Curso React Native Typescript - Apresentando o projeto12m
Exercício: Qual tecnologia é destacada como base do projeto por oferecer mais produtividade, apesar de exigir uma configuração inicial mais trabalhosa?
Aula em vídeo: Aula 02 - Curso React Native Typescript - Criando o projeto com expo12m
Aula em vídeo: Aula 03 - Curso React Native Typescript - Conhecendo estrutura do projeto08m
Exercício: Ao iniciar o projeto React Native com TypeScript, qual pasta é recomendada para concentrar todo o código da aplicação?
Aula em vídeo: Aula 04 - Curso React Native Typescript - Criando estrutura de pasta09m
Aula em vídeo: Aula 05 - Curso React Native Typescript - Configurando babel resolver e paths13m
Exercício: Qual é o principal objetivo de configurar o Babel com o plugin de resolução de módulos em um projeto React Native com TypeScript?
Aula em vídeo: Aula 06 - Curso React Native Typescript - Executando o projeto Wallet no Android e IOS09m
Aula em vídeo: Aula 07 - Curso React Native Typescript - Instalando e configurando fontes10m
Exercício: Em um app React Native com TypeScript usando Expo, qual é a abordagem correta para garantir que as fontes do Google Fonts estejam carregadas antes de renderizar a interface?
Aula em vídeo: Aula 08 - Curso React Native Typescript - Configurando o theme da aplicacao09m
Aula em vídeo: Aula 09 - Curso React Native Typescript - Configurando a StatusBar04m
Exercício: Qual configuração permite que o conteúdo do app ocupe a área por trás da StatusBar, deixando o topo sem uma faixa de cor separada?
Aula em vídeo: Aula 10 - Curso React Native Typescript - Criando tela de Login25m
Aula em vídeo: Aula 11 - Curso React Native Typescript - Criando Button Social Login Parte 0123m
Exercício: No React Native com TypeScript, qual ação resolve o erro ao importar arquivos .png (ex.: import logo from './logo.png')?
Aula em vídeo: Aula 12 - Curso React Native Typescript - Criando Button Social Login Parte 0219m
Aula em vídeo: Aula 13 - Curso React Native Typescript Criando Input - Parte 0126m
Exercício: Qual foi o principal objetivo ao criar um componente de Input no projeto com React Native e TypeScript?
Aula em vídeo: Aula 14 - Curso React Native Typescript - Criando Input Parte 0223m
Aula em vídeo: Aula 15 - Curso React Native Typescript - Criando Input Parte 0317m
Exercício: Ao criar um componente de Input reutilizável em React Native com TypeScript, qual abordagem permite expor métodos como focus() para o componente pai via ref?
Aula em vídeo: Aula 16 - Curso React Native Typescript - Input Personalizado Parte 0129m
Aula em vídeo: Aula 17 - Curso React Native Typescript Input Personalizado - Parte 0210m
Exercício: Ao criar um componente de input reutilizável em React Native com TypeScript, qual abordagem permite repassar todas as propriedades nativas do TextInput para o componente?
Aula em vídeo: Aula 18 - Curso React Native Typescript - Corrigindo erros e Subindo código para GitHub13m
Aula em vídeo: Aula 19 - Curso React Native Typescript - Button Personalizado - Parte 0121m
Exercício: Ao criar um componente de botão genérico em React Native com TypeScript, qual prática garante que o texto exibido seja sempre informado ao usar o componente?
Aula em vídeo: Aula 20 - Curso React Native Typescript - Button Personalizado - Parte 0225m
Aula em vídeo: Aula 21 - Curso React Native Typescript - Button Personalizado - Parte 0324m
Exercício: Ao criar um componente de botão em React Native com TypeScript, qual propriedade deve ser obrigatória para garantir que o botão execute uma ação ao ser pressionado?
Aula em vídeo: Aula 22 - Curso React Native Typescript - Correção e erros e bugs09m
Aula em vídeo: Aula 23 - Curso React Native Typescript - Ajuste de layout button social06m
Exercício: Ao ajustar o layout dos botões de login social para ficarem com a mesma proporção em uma tela de Login no React Native, qual mudança é a mais adequada?
Aula em vídeo: Aula 24 - Curso React Native Typescript - Ajustando Icone Eye do Input28m
Aula em vídeo: Aula 25 - Curso React Native Typescript - Criar link navega para tela de cadastro17m
Exercício: Ao criar um link simples para navegar para outra tela (como cadastro) na tela de login, qual componente foi escolhido por ser um botão básico, sem animações?
Aula em vídeo: Aula 26 - Curso React Native Typescript - Criar link navega para tela de recuperar senha14m
Aula em vídeo: Aula 27 - Curso React Native Typescript - Configurando KeyboardAvoidingView no login08m
Exercício: Ao ajustar a tela de login para que o botão não fique escondido quando o teclado aparece, qual componente do React Native é indicado para dar mais acessibilidade ao usuário?
Exercício: Ao configurar o React Navigation em um projeto React Native, por que é recomendado parar a execução do app (Ctrl+C) antes de instalar as dependências?
Aula em vídeo: Aula 30 - Curso React Native Typescript - Criando Estrutura Pasta para Navegação16m
Aula em vídeo: Aula 31 - Curso React Native Typescript - Criando Configuração da Pasta Routes21m
Exercício: Em um app React Native com React Navigation (Stack), qual configuração define a primeira tela que será carregada ao iniciar a aplicação?
Aula em vídeo: Aula 32 - Curso React Native Typescript - Configurando Tipagem da Navegação04m
Aula em vídeo: Aula 33 - Curso React Native Typescript - Criando Tela Cadastro Parte 0123m
Exercício: Ao reaproveitar um componente de Input no cadastro, qual combinação de props garante que o campo Nome não oculte o texto e não altere automaticamente a capitalização?
Aula em vídeo: Aula 34 - Curso React Native Typescript - Criando Tela Cadastro - Parte 0223m
Aula em vídeo: Aula 35 - Curso React Native Typescript - Criando Tela Recuperar Senha27m
Exercício: Ao organizar as telas no projeto React Native, qual pasta deve conter screens que NÃO exigem autenticação (ex.: recuperar senha)?
Aula em vídeo: Aula 36 - Curso React Native Typescript - Criando tabbar - Parte 0116m
Aula em vídeo: Aula 37 - Curso React Native Typescript - Criando tabbar - Parte 0214m
Exercício: Ao configurar a navegação por abas (Tab Navigator), qual opção é usada para ocultar o header padrão no React Navigation?
Aula em vídeo: Aula 38 - Curso React Native Typescript - Criando tabbar Parte 0317m
Aula em vídeo: Aula 39 - Curso React Native Typescript - Criando tabbar Parte 0412m
Exercício: Ao configurar uma Tab no React Navigation, onde deve ser feita a alteração de ícone e outras opções específicas da aba?
Aula em vídeo: Aula 43 - Curso React Native Typescript - Criando Transaction - Parte 0114m
Exercício: Ao usar uma FlatList no React Native para exibir uma lista de transações, quais são duas propriedades essenciais mencionadas para fazê-la funcionar corretamente?
Aula em vídeo: Aula 44 - Curso React Native Typescript - Criando Transaction - Parte 0216m
Aula em vídeo: Aula 45 - Curso React Native Typescript - Criando Transaction - Parte 0319m
Exercício: Qual recurso da FlatList é mais adequado para exibir um componente estático no topo da lista sem repetição a cada item?
Aula em vídeo: Aula 46 - Curso React Native Typescript - Criando Transaction - Parte 0411m
Exercício: Ao tipar o componente Header com TypeScript, qual propriedade foi definida como obrigatória para ser exibida em todas as telas?
Aula em vídeo: Aula 48 - Curso React Native Typescript - Criando Screen Settings - Parte 0129m
Aula em vídeo: Aula 49 - Curso React Native Typescript - Criando Screen Settings - Parte 0223m
Exercício: Ao componentizar um item de perfil em React Native com TypeScript, qual é a melhor forma de controlar dinamicamente qual ícone será exibido?
Aula em vídeo: Aula 50 - Curso React Native Typescript - Criando Screen Settings - Parte 0317m
Aula em vídeo: Aula 51 - Curso React Native Typescript - Criação Tela Perfil do Usuário13m
Exercício: Ao criar a tela Profile e navegar para ela, qual etapa é necessária para remover o erro de tipagem ao usar navigation.navigate('Profile')?
Aula em vídeo: Aula 53 - Curso React Native Typescript - Criando Screen Profile - Parte 0115m
Exercício: Em uma navegação em pilha (Stack Navigation) no React Native, qual é a principal vantagem de usar a função goBack() no botão de voltar?
Aula em vídeo: Aula 54 - Curso React Native Typescript - Criando Screen Profile - Parte 0212m
Aula em vídeo: Aula 55 - Curso React Native Typescript - Ajuste e Correções13m
Exercício: Para navegar ao clicar em Adicionar cartão sem erros de tipagem no React Native com TypeScript, qual conjunto de passos é o mais adequado?
Aula em vídeo: Aula 56 - Curso React Native Typescript - Criando Tela Add Cartão - Parte 0115m
Aula em vídeo: Aula 57 - Curso React Native Typescript - Criando Tela Add Cartão Parte 0211m
Exercício: Ao posicionar a imagem do chip no cartão para ficar no canto superior esquerdo, quais propriedades de estilo são usadas junto com position: absolute?
Aula em vídeo: Aula 58 - Curso React Native Typescript - Detalhes do cartão - Parte 0117m
Aula em vídeo: Aula 59 - Curso React Native Typescript - Detalhes do cartão Parte 0208m
Exercício: Ao adicionar um botão personalizado na tela de detalhes do cartão, quais props foram citadas como obrigatórias para evitar erro no componente?
Aula em vídeo: Aula 60 - Curso React Native Typescript - Detalhes do cartão - Parte 0311m
Exercício: Ao criar um Header reutilizável em React Native com TypeScript, qual foi a estratégia usada para exibir ícones diferentes (ex.: relatório e notificação) conforme a tela?
Aula em vídeo: Aula 62 - Curso React Native Typescript - Criando tela de relatório - Parte 0113m
Aula em vídeo: Aula 63 - Curso React Native Typescript - Criando tela de relatorio - Parte 0213m
Exercício: Ao reutilizar a lista de transações em outra tela no React Native, qual componente nativo é normalmente usado para renderizar uma lista de itens com melhor performance?
Aula em vídeo: Aula 64 - Curso React Native Typescript - Criando Screen Transaction Parte 0117m
Exercício: Ao criar uma prop booleana para alternar o ícone de transação em um componente React Native com TypeScript, qual abordagem é a mais adequada?
Aula em vídeo: Aula 66 - Curso React Native Typescript - Criando Screen Transaction Parte 0211m
Aula em vídeo: Aula 67 - Curso React Native Typescript - Criando Botão voltar de Screen Transaction12m
Exercício: Ao criar um botão flutuante de voltar em React Native, qual abordagem permite retornar para a tela anterior sem informar uma rota específica?
Aula em vídeo: Aula 68 - Curso React Native Typescript - Ajustamdo Flatlist e criando Limited Transaction13m
Exercício: Qual foi a estratégia escolhida inicialmente para organizar a tela de notificações em duas seções (como Novo e Recentes)?
Aula em vídeo: Aula 70 - Curso React Native Typescript - Criando Flatlist da Notificação Parte 0106m
Aula em vídeo: Aula 71 - Curso React Native Typescript - Criando Flatlist da Notificação Parte 0205m
Exercício: Ao implementar uma lista de notificações no React Native, qual componente é o mais indicado para renderizar vários itens de forma performática?
Aula em vídeo: Aula 72 - Curso React Native Typescript - Criando Flatlist da Notificação Parte 0308m
Aula em vídeo: Aula 73 Curso React Native Typescript Criando Flatlist da Notificação Parte 0409m
Exercício: Ao criar o componente do botão de notificação, qual combinação de propriedades foi usada para centralizar o conteúdo do botão?
Aula em vídeo: Aula 75 - Curso React Native TypeScript - Notificação Recentes Parte 0207m
Aula em vídeo: Aula 76 - Curso React Native TypeScript - Criando Estrutura da Validação New Notifications06m
Exercício: Ao usar um estado booleano (useState) para controlar a cor de um ícone em uma lista, por que todas as linhas podem mudar de cor ao clicar em apenas um item?
Aula em vídeo: Aula 77 - Curso React Native TypeScript - Refatorando New Notifications13m
Aula em vídeo: Aula 78 - Curso React Native TypeScript - Criando Badge New Notifications06m
Exercício: Para criar o “badge” (bolinha) que aparece no canto do item indicando mensagem não lida, qual combinação de estilos é a mais adequada para posicioná-lo corretamente?
Aula em vídeo: Aula 79 - Curso React Native TypeScript - Ajuste da Home05m
Aula em vídeo: Aula 80 - Curso React Native TypeScript - Considerações Finais do Projeto09m
Exercício: Em um app React Native com TypeScript, qual é o principal objetivo de manter uma pasta types no projeto?
