Estrutura inicial do App

Oi devs! Esse é o primeiro tutorial da série sobre o  UI Clone do Ifood :)

Para iniciar o aplicativo, deixei aqui uma estrutura inicial nesse link , que será usado no nosso aplicativo.

O tutorial irá  conter os seguintes conteúdos:

• Inserir as cores que serão utilizados no app;
• Definir as telas;
• Inserir as rotas da aplicação;
  

1. Inserir as cores que serão usados ​​no app

Para manter uma melhor organização na estrutura do app, iremos deixar as cores dentro das pastas  /Themes e depois importá-las de acordo com a necessidade.

Eu peguei as cores do aplicativo de acordo com a identidade visual dele, que você pode encontrar nesse link: Identidade Visual Ifood .

Sendo assim, crie um aquivo Colors.tsx em / Themes e as insira dentro dele:

Agora seu app estará pronto para recebê-las.

2 Definir as telas:

O clone em questão só possui duas telas. A Home, que tem as abas de Restaurante e do Mercado e a Products, que ao clicar em alguma loja, você será redirecionado para os produtos dela.

Na nossa estrutura inicial, a Home já é incluída. Então basta adicionar outra pasta chamada Products.

Dentro da pasta /pages crie uma pasta nomeada Products e dentro dela insira o index.tsx e o styles.tsx.

Dentro de index.tsx insira o código padrão:

E assim, as telas estarão definidas.

3 Inserir as rotas da aplicação: 

As rotas são as formas de navegação entre as telas. Quando temos mais de uma tela, é preciso defini-las para podermos percorrer por todo o app.

Para isso, iremos inserir a lib @react-navigation , que é a mais comum para esse fim nas aplicações com RN.

Para adicion-la, abra o terminal em que está o seu projeto e digite:

E em seguida, iremos instalar as dependências dela:

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-viewCopy

Com a lib já instalada corretamente no projeto, crie uma pasta nomeada routes.tsx em /src , onde ficarão as rotas da nossa aplicação. 

No arquivo, importe a lib e as telas do app (Home e Products). Para definir as rotas, é necessário utilizar o NavigationContainer e o StackNavigator. 

O primeiro componente deve ser definido para gerenciar todas as formas de navegação do nosso aplicativo. Já o segundo, oferece uma transição entre as telas em formato de pilha, ou seja, quando quiser passar do Restaurante / Mercado para a aba dos produtos, uma nova tela irá se colocar em cima da anterior.

Aqui tem um  conteúdo  explicando as formas de navegação no react native . 

O arquivo ficará assim:

• Primeiro definimos nossa pilha com createStackNavigator () , que carrega o modo de navegação (Stack.Navigator). E também os filhos, que será cada tela (Stack.Screen);
• Para as telas, temos que definir um nome, que depois será usado para navegar até ela. E também inserir o componente que irá fazer a estrutura dessa tela;

Sua execução deve estar assim:

Como podemos ver nos nossos componentes. A parte superior compõe o Header , que terá o nome da rua à esquerda (HeaderLeft) e o ícone do QrCode à direita (HeaderRight).

Então, temos que definir esses componentes e depois os substituir no Header padrão.

Crie uma pasta  Header  em /Components e insira os arquivos: HeaderLeft.tsx, HeaderRight.tsx e styles.ts

• Começando pelos estilos, iremos adicionar o styled-components: yarn add styled-components.

Vamos definir os estilos de acordo com os componentes:

E agora adicioná-los nos componentes:

• Vamos começar com o HeaderLeft. Temos o título, o ícone e uma View (Container), que envolve o conteúdo:

E agora vamos estilizar nosso conteúdo à esquerda:

- flex-direction: row - Alinha os conteúdo em uma linha. Padrão é coluna

- align-items: center - Alinha os conteúdos ao centro

• E agora no HeaderRight.tsx:

• E os estilos:

- padding-right: 10px - "Empurra" o conteúdo 10px para a direita, para não colar na borda.

• Agora é só importá-los no nosso arquivo de rotas e adicioná-los na propriedade options da Stack.Screen.

E o arquivo final ficará assim:

Na tela do seu celular ou emulador estará aparecendo a aplicação que acabamos de contruir:

Prontinho :) Finalizamos a primeira parte!

Se você quer continuar vendo mais tutoriais sobre essa série, digite seu email aqui vai me ajudar bastante :)

Esse aqui é o link do projeto inteiro, caso queiram dar uma olhada: IfoodClone