Projeto | Funcionalidades | Aprendizado | Tecnologias | Instalação e execução | Licença
Recriação da interface do Nubank com animações para fins de estudos.
- 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
- 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
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
Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:
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.
# 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
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com 💜 by João Pedro 👋🏻