Como clonei a interface do iFood com React Native e Styled Components
Tags: reactnative, frontend, react, javascript
Published: 2021-01-07 00:38:41

Há um tempo atrás postei um [vídeo no Linkedin](https://www.linkedin.com/feed/update/urn:li:activity:6572315239419781120/) 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](https://infinite.red/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](https://github.com/Rocketseat/react-native-template-rocketseat-basic), 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](https://styled-components.com/).

### 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](https://source.unsplash.com/) 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](https://github.com/oblador/react-native-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](https://dev-to-uploads.s3.amazonaws.com/i/0kfax89kpr4tiqnidf04.jpeg)

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](https://dev-to-uploads.s3.amazonaws.com/i/zjlti1v4339z89wh559k.jpeg)

### 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](https://dev-to-uploads.s3.amazonaws.com/i/0gom8hpxbq5diqpmhzch.jpeg)

Para as rotas eu usei o [createBottomTabNavigator](https://reactnavigation.org/docs/bottom-tab-navigator/) 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](https://dev-to-uploads.s3.amazonaws.com/i/5wyh269khl31ddpuvev9.jpeg)

### 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](https://www.youtube.com/channel/UCSfwM5u0Kce6Cce8_S72olg), 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!