DEV Community

Cover image for Como clonei a interface do iFood com React Native e Styled Components
Dante J. Anjos
Dante J. Anjos

Posted on

Como clonei a interface do iFood com React Native e Styled Components

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.

Alt Text

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.

Alt Text

Páginas e rotas

Nas páginas usei a mesma estrutura dos componentes visuais, um diretório com index.js e styles.js.

Alt Text

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.

Alt Text

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)