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 vídeos
Certificado com 14 horas
21 exercícios

Matricule-se

Sobre o curso

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.

Curso
JavaScript
Avançado
03h04 Nível Avançado
Curso
React
Introdução
02h40 Nível Iniciante
Curso
React Native
Fundamentos
01h34 Nível Iniciante
Curso
React Native
Componentes nativos
03h42 Nível Intermediário
Curso
React Native
Acesso às APIs de Hardware
03h27 Nível Intermediário

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

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.

Curso
JavaScript
Avançado
03h04 Nível Avançado
Curso
React
Introdução
02h40 Nível Iniciante
Curso
React Native
Fundamentos
01h34 Nível Iniciante
Curso
React Native
Componentes nativos
03h42 Nível Intermediário
Curso
React Native
Acesso às APIs de Hardware
03h27 Nível Intermediário

Conteúdo programático

Apresentação

Apresentação do Curso.
3 aulas
- Apresentação Prévia
- Códigos do Curso
- Repositório do Curso
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 Prévia
- 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
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 Prévia
- Projeto: Texto e Botões
- Resumo
Preenchimento e Gradientes

Aprenda a trabalhar com preenchimentos e criar gradientes.
5 aulas
- Apresentação
- Definindo Preenchimentos de Fundo - Cores e Imagens Prévia
- Criando Gradientes - react-native-linear-gradient
- Projeto: Deixando a tela mais bonita com gradiente
- Resumo
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
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
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
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
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 Prévia
- 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
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
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