Skip to content

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

Notifications You must be signed in to change notification settings

thiagosprestes/skia-cards

Repository files navigation


skia-cards

Skia cards 💳

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

📋 Índice

🎨 Telas

📃 Sobre o projeto

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.

💳 Funcionalidades

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

🛠 Tecnologias utilizadas

  • 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

🚀 Rodando o projeto

Pré-requisitos

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

📲 Rodando o app

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