Imagem do Curso gratuito React Native   TypeScript: Desenvolva um app completo

Curso online gratuitoReact Native TypeScript: Desenvolva um app completo

Duração do curso online: 19 horas e 44 minutos

Novo

Crie um app completo com React Native e TypeScript: navegação, telas, componentes e listas. Curso online gratuito para evoluir no mobile e no portfólio.

Neste curso gratuito, aprenda sobre

  • Criar e iniciar um app React Native com TypeScript usando Expo
  • Entender a estrutura do projeto e organizar código em pasta src
  • Configurar Babel module-resolver e paths para imports absolutos
  • Executar o app no Android e iOS e ajustar ambiente de desenvolvimento
  • Carregar Google Fonts no Expo antes de renderizar a interface
  • Definir theme global e configurar StatusBar (incluindo conteúdo atrás dela)
  • Construir tela de Login e telas públicas: cadastro e recuperar senha
  • Criar componentes reutilizáveis (Input e Button) com tipagem TypeScript
  • Usar forwardRef/useImperativeHandle e repassar props nativas do TextInput
  • Tratar imports de imagens .png com declarations de tipos no TypeScript
  • Configurar navegação com React Navigation v6 (Stack/Tab) e tipar rotas
  • Criar listas performáticas com FlatList (keyExtractor, renderItem, header)
  • Implementar Header, cards, transações, notificações e badges com layout flex
  • Controlar estado por item em listas e manter tipos centralizados em /types

Descrição do curso

Desenvolver apps mobile com qualidade exige mais do que “fazer funcionar”: pede organização de projeto, componentes reutilizáveis, navegação bem definida e tipagem que reduz erros e acelera a evolução do produto. Neste curso online gratuito, você vai construir um aplicativo completo com React Native e TypeScript, entendendo as decisões e configurações que tornam um projeto escalável desde o início.

Ao longo das aulas, você começa configurando o ambiente com Expo e aprendendo a estrutura ideal para concentrar o código da aplicação. Em seguida, evolui a base do projeto com ajustes que aumentam produtividade no dia a dia, como organização de pastas, alias de importação e padronização que facilita manutenção. Também aprende a lidar com detalhes que impactam a experiência final, como carregamento de fontes, tema da aplicação e configuração da StatusBar para um layout mais moderno.

Na prática, você cria telas essenciais como login, cadastro e recuperação de senha, incluindo botões de login social, inputs personalizados e variações de estilo. A proposta é desenvolver componentes consistentes, reaproveitáveis e bem tipados, entendendo como passar propriedades nativas, expor métodos via ref quando necessário e evitar armadilhas comuns de importação de assets e validação visual.

Com o app ganhando forma, você implementa a navegação com React Navigation, estrutura rotas, define telas iniciais, configura tipagens para navegação e constrói uma experiência fluida com abas, headers personalizados e botões de retorno. Na sequência, entra em funcionalidades de uso real: listagem de transações e notificações com foco em performance, uso correto de listas, composição de elementos estáticos, controle de estados por item e pequenos refinamentos que deixam a interface mais profissional.

Para fechar, o curso reforça boas práticas como separar tipos em uma estrutura dedicada, manter o código pronto para crescer e organizar as telas por contexto de autenticação. Se você quer fortalecer seu portfólio e desenvolver habilidades sólidas em React Native com TypeScript, este conteúdo é um passo consistente para sair do básico e montar um app completo do início ao fim.

Conteúdo do curso

  • Aula em vídeo: Aula 01 - Curso React Native Typescript - Apresentando o projeto 12m
  • 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 expo 12m
  • Aula em vídeo: Aula 03 - Curso React Native Typescript - Conhecendo estrutura do projeto 08m
  • 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 pasta 09m
  • Aula em vídeo: Aula 05 - Curso React Native Typescript - Configurando babel resolver e paths 13m
  • 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 IOS 09m
  • Aula em vídeo: Aula 07 - Curso React Native Typescript - Instalando e configurando fontes 10m
  • 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 aplicacao 09m
  • Aula em vídeo: Aula 09 - Curso React Native Typescript - Configurando a StatusBar 04m
  • 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 Login 25m
  • Aula em vídeo: Aula 11 - Curso React Native Typescript - Criando Button Social Login Parte 01 23m
  • 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 02 19m
  • Aula em vídeo: Aula 13 - Curso React Native Typescript Criando Input - Parte 01 26m
  • 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 02 23m
  • Aula em vídeo: Aula 15 - Curso React Native Typescript - Criando Input Parte 03 17m
  • 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 01 29m
  • Aula em vídeo: Aula 17 - Curso React Native Typescript Input Personalizado - Parte 02 10m
  • 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 GitHub 13m
  • Aula em vídeo: Aula 19 - Curso React Native Typescript - Button Personalizado - Parte 01 21m
  • 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 02 25m
  • Aula em vídeo: Aula 21 - Curso React Native Typescript - Button Personalizado - Parte 03 24m
  • 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 bugs 09m
  • Aula em vídeo: Aula 23 - Curso React Native Typescript - Ajuste de layout button social 06m
  • 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 Input 28m
  • Aula em vídeo: Aula 25 - Curso React Native Typescript - Criar link navega para tela de cadastro 17m
  • 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 senha 14m
  • Aula em vídeo: Aula 27 - Curso React Native Typescript - Configurando KeyboardAvoidingView no login 08m
  • 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?
  • Aula em vídeo: Aula 28 - Curso React Native Typescript - Criar Variant Button Transparent 13m
  • Aula em vídeo: Aula 29 - Curso React Native Typescript - Instalando Bibliotecas React Navigation V6 15m
  • 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ção 16m
  • Aula em vídeo: Aula 31 - Curso React Native Typescript - Criando Configuração da Pasta Routes 21m
  • 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ção 04m
  • Aula em vídeo: Aula 33 - Curso React Native Typescript - Criando Tela Cadastro Parte 01 23m
  • 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 02 23m
  • Aula em vídeo: Aula 35 - Curso React Native Typescript - Criando Tela Recuperar Senha 27m
  • 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 01 16m
  • Aula em vídeo: Aula 37 - Curso React Native Typescript - Criando tabbar - Parte 02 14m
  • 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 03 17m
  • Aula em vídeo: Aula 39 - Curso React Native Typescript - Criando tabbar Parte 04 12m
  • 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 40 - Curso React Native Typescript - Header 20m
  • Aula em vídeo: Aula 41 - Curso React Native Typescript - Card do Cartão 17m
  • Exercício: Ao criar o card inferior na tela Home, qual foi a decisão para manter o desenvolvimento mais simples e rápido?
  • Aula em vídeo: Aula 42 - Curso React Native Typescript - Icone Button 21m
  • Aula em vídeo: Aula 43 - Curso React Native Typescript - Criando Transaction - Parte 01 14m
  • 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 02 16m
  • Aula em vídeo: Aula 45 - Curso React Native Typescript - Criando Transaction - Parte 03 19m
  • 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 04 11m
  • Aula em vídeo: Aula 47 - Curso React Native Typescript - Ajustando Componente Header 19m
  • 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 01 29m
  • Aula em vídeo: Aula 49 - Curso React Native Typescript - Criando Screen Settings - Parte 02 23m
  • 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 03 17m
  • Aula em vídeo: Aula 51 - Curso React Native Typescript - Criação Tela Perfil do Usuário 13m
  • 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 52 - Curso React Native Typescript - Criando Componente GoBack 13m
  • Aula em vídeo: Aula 53 - Curso React Native Typescript - Criando Screen Profile - Parte 01 15m
  • 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 02 12m
  • Aula em vídeo: Aula 55 - Curso React Native Typescript - Ajuste e Correções 13m
  • 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 01 15m
  • Aula em vídeo: Aula 57 - Curso React Native Typescript - Criando Tela Add Cartão Parte 02 11m
  • 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 01 17m
  • Aula em vídeo: Aula 59 - Curso React Native Typescript - Detalhes do cartão Parte 02 08m
  • 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 03 11m
  • Aula em vídeo: Aula 61 - Curso React Native Typescript - Ajustando header 16m
  • 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 01 13m
  • Aula em vídeo: Aula 63 - Curso React Native Typescript - Criando tela de relatorio - Parte 02 13m
  • 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 01 17m
  • Aula em vídeo: Aula 65 - Curso React Native Typescript - Ajustando Componente Header 07m
  • 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 02 11m
  • Aula em vídeo: Aula 67 - Curso React Native Typescript - Criando Botão voltar de Screen Transaction 12m
  • 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 Transaction 13m
  • Aula em vídeo: Aula 69 - Curso React Native Typescript - Desenvolvendo Screen Notificação 11m
  • 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 01 06m
  • Aula em vídeo: Aula 71 - Curso React Native Typescript - Criando Flatlist da Notificação Parte 02 05m
  • 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 03 08m
  • Aula em vídeo: Aula 73 Curso React Native Typescript Criando Flatlist da Notificação Parte 04 09m
  • 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 02 07m
  • Aula em vídeo: Aula 76 - Curso React Native TypeScript - Criando Estrutura da Validação New Notifications 06m
  • 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 Notifications 13m
  • Aula em vídeo: Aula 78 - Curso React Native TypeScript - Criando Badge New Notifications 06m
  • 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 Home 05m
  • Aula em vídeo: Aula 80 - Curso React Native TypeScript - Considerações Finais do Projeto 09m
  • Exercício: Em um app React Native com TypeScript, qual é o principal objetivo de manter uma pasta types no projeto?

Este curso gratuito inclui:

19 horas e 44 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação de Aplicativos

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso