Projeto   |    Funcionalidades   |    Aprendizado   |    Tecnologias   |    Instalação e execução   |    Licença

🖥️ Projeto

Recriação da interface do Nubank com animações para fins de estudos.

Demonstração

---

✨ Funcionalidades

• Listagem de opções de conta de forma horizontal
• Geração de QRCode
• Animações de arrastagem, fadeOut e translado
• Exibição do nome do cliente e saldo disponível

📖 Aprendizado

• Animações com React Native usando a API Animated
• Forma simplicada de usar react navigation para renderizar uma tela
• Uso da biblioteca react-native-iphone-x-helper para auxiliar na criação de interfaces no iPhone
• Geração de QRCode personalizados usando a biblioteca react-native-qrcode
• Como fazer estilização interna na ScrollView
• Como lidar com touch handling nativo de forma performática usando a biblioteca React Native Gesture Handler
• Como renderizar uma linha do tamanho de um fio de cabelo com a API StyleSheet

🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

Mobile (React Native)

• Expo
• React Native Vector Icons
• React Native Gesture Handler
• React Native Iphone X-Helper
• React Native QRCode
• React Navigation
• React Native SVG

Instalação e execução

Pré-requesitos

Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:

• Git
• NodeJS
• Yarn ou NPM

Além disto é bom ter um editor para trabalhar com o código como VSCode
4

Você poder executar o App no seu celular ou em um emulador de celular da sua preferência usando Expo.

📟 Rodando o Mobile

# Clone este repositório
$ git clone  https://github.com/JohnPetros/nubank-ui-clone.git

# Acesse a pasta do projeto no terminal/cmd
$ cd nubank-ui-clone

# Instale as dependências
$ npm install

# Execute a aplicação em modo de desenvolvimento
$ npx expo start

---

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com 💜 by João Pedro 👋🏻