DEV Community

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

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

dantewebmaster profile image Dante J. Anjos ・3 min read

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!

Discussion (0)

pic
Editor guide