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

Matricule-se Ver apresentação

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 Front-end
JavaScript Avançado

Conheça os recursos avançados desta linguagem e os framework...
Nível Avançado
Curso Front-end
React - Introdução

Aprenda a criar uma aplicação web utilizando o React
Nível Iniciante
Curso Mobile
React Native - Fundamentos

Aprenda a criar aplicações móveis com o React Native
Nível Iniciante
Curso Mobile
React Native - Componentes nativos

Aprenda como utilizar componentes nativos do Android e iOS p...
Nível Intermediário
Curso Mobile
React Native - Acesso às APIs de Hardware

Aprenda como acessar recursos do hardware do dispositivo com...
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 Front-end
JavaScript Avançado

Conheça os recursos avançados desta linguagem e os framework...
Nível Avançado
Curso Front-end
React - Introdução

Aprenda a criar uma aplicação web utilizando o React
Nível Iniciante
Curso Mobile
React Native - Fundamentos

Aprenda a criar aplicações móveis com o React Native
Nível Iniciante
Curso Mobile
React Native - Componentes nativos

Aprenda como utilizar componentes nativos do Android e iOS p...
Nível Intermediário
Curso Mobile
React Native - Acesso às APIs de Hardware

Aprenda como acessar recursos do hardware do dispositivo com...
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 Mobile
React Native - Fundamentos

Aprenda a criar aplicações móveis com o React Native
01h34 Nível Iniciante
Curso Mobile
React Native - Acesso às APIs de Hardware

Aprenda como acessar recursos do hardware do dispositivo com...
03h27 Nível Intermediário
Curso Mobile
React Native - Componentes nativos

Aprenda como utilizar componentes nativos do Android e iOS p...
03h42 Nível Intermediário
Curso Mobile
React Native - Armazenamento e Sincronia Offline

Aprenda como armazenar dados em um aplicativo React Native
00h57 Nível Intermediário
Curso Mobile
React Native - Armazenamento de arquivos com Firebase Storage

Aprenda como armazenar arquivos com Firebase Storage
01h46 Nível Avançado
Curso Mobile
React Native - Armazenamento e Sincronia com Firebase Firestore

Aprenda como salvar dados de uma aplicação React Native, no...
01h50 Nível Avançado
Curso Mobile
React Native - Autenticação com Firebase Authentication

Aprenda como autenticar usuários em uma aplicação React Nati...
05h53 Nível Avançado

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

Excelente curso!

React Native - Animações e Estilização
Jean Campo Grande / MS
Bom curso, abordou o básico das animações.

React Native - Animações e Estilização
Marcelo São Paulo / SP
Ó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
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
Estou cursando faculdade de sistemas de informação e o curso de C# do TreinaWeb contribuiu muito para minha formação, aumentando ainda mais a minha paixão pela linguagem e por programação. Farei o curso avançado e tantos outros, pois a qualidade foi confirmada.

C# (C Sharp) Intermediário
Roberto Resende / RJ
Mais um curso maravilhoso da Treinaweb. É redundante falar da excelência do conteúdo e dos instrutores da Treinaweb, mas é necessário, ainda mais num mundo onde tanta gente promove cursos sem uma metodologia de processos e passos bem definidos e organizados. A Treinaweb é a exceção! Sensacional esse portal! Grato, Carlos Alberto dos Santos

JQuery Completo
Carlos Rio de Janeiro / RJ
Fiquei muito feliz com o curso, apesar de já ter visto sobre o assunto em um curso presencial, esse curso retirou algumas dúvidas que eu tinha, meus sinceros parabéns! E consequentemente o meu sincero muito obrigado!!

Windows Server 2016 - Instalação e primeiras configurações
Patrick Canoinhas / SC
O curso é excelente. Para mim que era completamente nulo em Android e no complexo ambiente de desenvolvimento, pude contar com um apoio que realmente foi um diferencial. Os instrutores tem muito boa vontade para nos ajudar.

Android - Básico
Jairo Salvador / BA