App desenvolvido para aprender sobre skia e como integrar ele com o React Native

• Telas
• Sobre o projeto
  • Funcionalidades
• Tecnologias utilizadas
• Rodando o projeto
  • Pré-requisitos
  • Rodando o app

A ideia de criação do projeto surgiu após o lançamento da sdk 46 do expo, que trouxe suporte ao skia.

Skia é uma lib que permite a renderização de gráficos de alta performance 2D no dispositivo, permitindo que você possa desenhar a interface da maneira que quiser.

A ideia inicial do projeto era somente fazer um form para preenchimento dinamico de dados de um cartão, esse cartão é inteiramente desenhado com skia e suas animações são feitas com react native reanimated.

Durante o desenvolvimento do projeto o rBressans deu a ideia de adicionar a leitura de cartões via antena NFC do dispositivo, assim preenchendo o número e data de expiração do cartão automaticamente, sem a necessidade de digitação.

• Preencher dados do cartão no form
• Ler cartões através da antena NFC

• ⚛ React Native - Aplicativo
• 🎨 React Native Skia - Desenho do cartão
• 🎇 React Native Reanimated - Animações do cartão
• 💳 React Native NFC Manager - Leitura de cartão através da antena NFC
• 💻 Node TLV - Leitura de dados codificados
• 💭 React Native Snackbar - Mensagens de validação do form

• Git
• Yarn
• Conhecimento prévio de como rodar projetos com React Native

Com a máquina devidamente configurada para rodar projetos com React Native, clone o repositório

# Clona o repositório
git clone https://github.com/thiagosprestes/skia-cards.git

Navegue até a pasta do projeto clonado e execute os comandos abaixo

# Entra na pasta do app
cd skia-cards

# Instala as dependências
yarn

Após concluir a instalação das dependências, ainda no terminal da pasta do app com o emulador aberto ou device físico conectado via adb execute o comando abaixo

# Instala a aplicação no device
yarn android

Após concluir a instalação, execute o seguinte comando para rodar o app

# Inicia a aplicação
yarn start