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

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