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

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. Fala japonês fluente, mas não tem com quem conversar.

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
- 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
- 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
- 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
- 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
- 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

Download da ementa

Cursos relacionados

Curso
React Native
Fundamentos
01h34 Nível Iniciante
Curso
React Native
Acesso às APIs de Hardware
03h27 Nível Intermediário
Curso
React Native
Componentes nativos
03h42 Nível Intermediário
Curso
React Native
Armazenamento e Sincronia Offline
00h57 Nível Intermediário
Curso
React Native
Armazenamento de arquivos com Firebase Storage
01h46 Nível Avançado
Curso
React Native
Armazenamento e Sincronia com Firebase Firestore
01h50 Nível Avançado
Curso
React Native
Autenticação com Firebase Authentication
05h53 Nível Avançado

Formação em que esse curso está inserido

Formação
Desenvolvedor React Native
10 cursos 30h44 de vídeos 134 exercícios

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

Excelente curso!

React Native - Animações e Estilização
Jean Campo Grande / MS
Curso excelente! muitas dicas valiosas de design e animação para devs react native!

React Native - Animações e Estilização
Júnior Macapá / AP
Bom curso, abordou o básico das animações.

React Native - Animações e Estilização
Marcelo São Paulo / SP
Amei o curso, aprendi muito e com certeza irei usar em meus próximos projetos.

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

React Native - Animações e Estilização
Pedro Praia Grande / SP
Muito bom

React Native - Animações e Estilização
Jan Suzano / SP
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!

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!!

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!

Angular - CLI
Robson Canoas / RS