Curso de React Native - Animações e Estilização

Aprenda como melhorar a experiência do usuário estilizando e animando elementos no React Native

Nível Intermediário Categoria Desenvolvimento Mobile

  • Curso com 05h18 de videos
  • Certificado com 14 horas
  • 21 exercícios

Sobre o curso

Aprenda como melhorar a experiência do usuário estilizando e animando elementos no React Native

O React Native é um framework do Facebook para criação de aplicativos nativos com JavaScript para Android e iOS, sendo utilizado em famosos aplicativos como Facebook, Instagram, Uber, Skype, Pinterest e Walmart.

A ideia do React Native é tornar possível criar aplicações mobile nativas com uma única linguagem (no caso, o JavaScript), permitindo o reaproveitamento de boa parte do código.

Neste curso vamos aprender a estilizar e animar elementos, permitindo criar belas telas para melhorar a experiência do usuário

O que irá aprender?

Neste curso iremos apresentar a Animated API do React Native. São vídeo aulas e conteúdo escrito que mostram os recursos desta api de animação. Também serão passados exercícios para que você possa fixar, praticar e aplicar o conteúdo aprendido durante o curso.

Dentre várias outras coisas, você verá:

  • Atualização automática da tela (Hot Reloading);
  • Iniciando com estilização e técnicas de reaproveitamento;
  • Cores e Unidades de Medidas;
  • Estilização de textos, botões e Views;
  • Dimensionamento, posicionamento e transformações;
  • Layouts com Flexbox;
  • Layouts Responsivos;
  • Animações com Animated API;
  • Criação de Componentes Animados;
  • Desenvolvimento de um projeto durante o curso para fixar o conhecimento.

Pra quem é esse curso?

Este curso é destinado àqueles que já tenham conhecimento de React Native e queiram aprender a estilizar e animar seus elementos, permitindo entregar uma melhor experiência ao usuário.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, são apenas sugestões. Eles dão uma base de parte do conhecimento que é interessante ter para um bom aproveitamento nesse curso.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato
  • Testes de aprendizado

Ambiente do curso

  • Node.js
  • Visual Studio Code
  • Android Studio
  • JDK 8
  • Xcode

Sobre o professor

Akira Hanashiro

Akira Hanashiro

Professor especialista em Desenvolvimento Front-end na TreinaWeb. Akira, Felipe, Hana, Hanashiro ou Hanakira, é graduado em Análise e Desenvolvimento de Sistemas, pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning, é entusiasta no desenvolvimento de jogos e multi-task. Fala japonês fluente, mas não tem com quem conversar.

Conteúdo programático

  1. Apresentação

    Apresentação do Curso.

    3 aulas
    • Apresentação
    • Códigos do Curso
    • Repositório do Curso
  2. Iniciando a Estilização de Elementos

    Aprenda como iniciar com estilização no React Native e suas diferenças com o CSS comum.

    8 aulas
    • Apresentação
    • Diferenças e Limitações em relação ao CSS comum
    • Estilização Inline e StyleSheet
    • Técnicas de Reutilização de Estilos
    • Estilização Diferente para Android e iOS
    • Hot Reloading e Live Reload - atualizando a tela automaticamente
    • Resumo
    • Questionário
  3. Estilizando Textos e Botões

    Veja como trabalhar com textos, fontes, ícones e botões.

    6 aulas
    • Apresentação
    • Estilizando Textos
    • Utilizando Fontes Customizadas
    • Estilizando Botões
    • Projeto: Texto e Botões
    • Resumo
  4. Preenchimento e Gradientes

    Aprenda a trabalhar com preenchimentos e criar gradientes.

    5 aulas
    • Apresentação
    • Definindo Preenchimentos de Fundo - Cores e Imagens
    • Criando Gradientes - react-native-linear-gradient
    • Projeto: Deixando a tela mais bonita com gradiente
    • Resumo
  5. Tamanho e Posição

    Defina o tamanho e a posição de seus elementos.

    7 aulas
    • Apresentação
    • Definindo o Tamanho de Elementos
    • Posição Relativa
    • Posição Absoluta
    • Projeto: Posicionando Elementos
    • Resumo
    • Questionário
  6. Transformações

    Veja como trabalhar com escala, rotação e translação de seus componentes.

    8 aulas
    • Apresentação
    • Escala
    • Translação
    • Rotação
    • Torção
    • Projeto: Transformando a posição e rotação da tela
    • Resumo
    • Questionário
  7. Layouts com Flexbox

    Veja como utilizar o Flexbox do React Native para definir layouts.

    6 aulas
    • Apresentação
    • Dimensionamento com Flexbox e Direção
    • Alinhamento Horizontal e Vertical
    • Projeto: Preparando o layout do aplicativo
    • Resumo
    • Questionário
  8. Layouts Responsivos

    Vamos aprender a deixar nossos layouts mais responsivos.

    4 aulas
    • Apresentação
    • Dimension API - Usando o tamanho da tela como referência
    • Responsividade - Reagindo a alterações de tamanho de tela
    • Resumo
  9. Iniciando com Animações

    Conheça a Animated API e crie animações para seus elementos.

    14 aulas
    • Apresentação
    • Animated API
    • Monitoramento de FPS
    • Iniciando nossa primeira animação - definição e alteração de valores numéricos - Animated.timing()
    • Interrompendo e Reiniciando Animações
    • Iniciando valores X e Y - Animated.ValueXY()
    • Easing - Funções de Suavização
    • Interpolação - Controlando melhor os valores de sua animação
    • Animação de valores não numéricos - mudando cores e valores com unidades de medida
    • Animated.spring()
    • Criando Componentes Animados
    • Projeto: Ajustando a animação da tela inicial
    • Resumo
    • Questionário
  10. Múltiplas Animações

    Aprenda a executar mais de uma animação de uma vez.

    8 aulas
    • Apresentação
    • Animações Paralelas - Animated.parallel()
    • Animações em Sequência - Animated.sequence()
    • Fazendo pausas entre Animações - Animated.delay()
    • Animações em Sequência com Adiamentos - Animated.stagger()
    • Projeto: Paralelizando Animações
    • Resumo
    • Questionário
  11. Interagindo com Animações

    Aprenda a trabalhar melhor com animações interativas.

    8 aulas
    • Apresentação
    • Reagindo ao Fim de Animações
    • Observando o valor de animações - addListener
    • Animações Reagindo ao Scroll - Animated.event
    • Movendo e Soltando Componentes (Drag ‘n Drop) - PanResponder
    • Projeto: Reagindo a Eventos
    • Resumo
    • Questionário
Download da ementa

Cursos relacionados

Formação em que esse curso está inserido

Utilizada e amada por milhares! Veja mais opiniões reais

  • Excelente curso!

  • Curso excelente! muitas dicas valiosas de design e animação para devs react native!

  • Bom curso, abordou o básico das animações.

  • Amei o curso, aprendi muito e com certeza irei usar em meus próximos projetos.

    Depoimento - Hemerson
    React Native - Animações e Estilização
    Hemerson Vitória da Conquista / BA
  • Ótimo curso. xD

  • Muito bom

  • Curso excelente, com explicações completas e satisfatórias. Na minha opinião, a seção de desafios possui grande valia no que se refere a consolidação do aprendizado, sendo então um grande diferencial para este curso. Recomendo!

    Depoimento - Greyson
    JavaScript Básico
    Greyson Nova Friburgo / RJ
  • Bom dia, Quero apenas agradecer a todas as pessoas que estão envolvidas no curso C# Intermediário, pois conseguiram elaborar um curso muito bom, consegui aprender bastante com o curso. Espero que o curso C# Avançado seja como esse. Muito obrigado mesmo!!

    Depoimento - Silvio
    C# (C Sharp) Intermediário
    Silvio Dois Irmãos / RS
  • A ideia principal do curso é não entrar a fundo nos comandos, mas mostrá-los e explicá-los de forma superficial. Como eu só fiz curso de fundamentos angular até agora, pra esse curso de CLI muitos assuntos ficaram em evidência. Eu tenho guardado todos os resumos deste curso nos meus gists pra depois consultar, pois sei que vou rever esses tópicos que ficaram em evidência mais tarde. Valeu professor!

    Depoimento - Robson
    Angular - CLI
    Robson Canoas / RS

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
Por apenas
12x R$ 75,00 ou R$ 900,00 à vista
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!