App desenvolvido para aprender sobre skia e como integrar ele com o React Native
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