Há um tempo atrás postei um vídeo no Linkedin demonstrando uma cópia que fiz da home do iFood usando React Native.
Pensei que chamaria atenção apenas de amigos e colegas de trabalho, porém recebi muitos feedbacks positivos e inclusive muitos pedindo para postar o código no github e escrever um tutorial de como eu fiz… então vamos lá!
Eu fiz tudo a olho mesmo, só olhando o app no celular enquanto codava… mas uma boa ideia é usar o modo Image Overlay do Reactotron para ir se guiando no layout e pegar medidas mais exatas.
Qualidade antes de tudo
Por mais que a ideia seja apenas recriar uma interface… é sempre bom escrever um código de qualidade, então uma ótima dica é usar o template basic da rocketseat, pois nele já vem configurado um bom eslint e editorconfig. Já vem com as libs essenciais para se trabalhar com React Native, como, React native gesture handler, React Navigation, PropTypes e é claro, Styled Components.
Preparando os dados para a tela
A primeira coisa que fiz foi estudar a interface e mapear os dados que precisaria mockar para montar as telas:
- Banners promocionais
- Pratos em destaque
- Categorias
- Restaurantes recentes
- Lista de top restaurantes no iFood
- Lista dos restaurantes cadastrados
Imagens e ícones
Usei a API do unsplash para gerar as imagens e algumas peguei de CDNs que encontrei no google. Para os ícones, a principio usei PNGs mesmo, mas já instalei RN Vector Icons, pois ajuda bastante.
Componentes visuais
Para cada componente eu criei um diretório e dentro um arquivo index.js com o JSX do componente e outro chamado styles.js onde coloco todo o estilo usando Styled Components.
Usar Styled Components é muito prático e fácil, principalmente para quem já está acostumado com CSS. A documentação é muito boa e no meu código tem vários exemplos de uso, inclusive acessando as props do componente.
Segue um bem simples do meu Banner.
Páginas e rotas
Nas páginas usei a mesma estrutura dos componentes visuais, um diretório com index.js e styles.js.
Para as rotas eu usei o createBottomTabNavigator do React Navigation e criei um componente para recriar o rodapé de navegação do iFood.
Deixei quatro rotas criadas para poder renderizar os ícones no rodapé, mas atualmente apenas duas telas estão prontas, Home e Busca.
Próximos passos
Pretendo recriar algumas outras telas da aplicação. Escolhi a interface do iFood pois sou fã do layout e é um aplicativo que uso bastante, então conheço bem cada página muito bem.
O código está disponível no meu github. Fique a vontade para contribuir, deixei no README uma lista de TODOs caso queira dar uma ajudinha :).
https://github.com/dantewebmaster/react-native-ifood-clone
Referência
Difícil escrever um artigo sobre React Native sem citar a Rocketseat, depois que conheci não parei de acompanhar os caras.
Então caso tenha curtido a ideia de recriar interfaces de aplicativos famosos, dá uma conferida no canal deles, lá tem um vídeo onde é feito do zero o clone da interface do Nubank e Uber (eu vi esses dois e achei muito massa).
Tem bastante conteúdo bom sobre Node e React também.
PS:
Indico fortemente a maratona de código da Rocketseat (NLW). Acha impossível em poucos dias criar um backend em Node, App web em React e App mobile usando React Native?
Se inscreva e vá até o final para confirmar que é bem possível. Eu participei e foi uma experiência muito boa!
Top comments (0)