DEV Community: Ednilson Cardoso

Como fazer um menu lateral customizado usando React native e React navigation 5

Ednilson Cardoso — Sat, 16 Jan 2021 13:12:49 +0000

Há diversas formas de navegar por um aplicativo, o menu lateral é uma forma bastante conhecida, sendo um dos tipos mais encontrados em ferramentas mobile. Trabalhando como desenvolvedor não foi uma grande surpresa quando foi solicitado o desenvolvimento de tal mecanismo de navegação.

Porém, uma coisa que me surpreendeu foi a falta de informação sobre o tema na internet, principalmente sobre a nova versão do react navigation. Acabei passando horas pesquisando e filtrando informações para conseguir montar um mecanismo igual solicitado.

Para suprir a necessidade era necessário encontrar uma forma de deixar um item do menu com o estado de ativo, assim como poder adicionar mais componentes visuais de forma a deixar a interface mais amigável.

Desta forma, resolvi escrever este artigo para mostrar a abordagem que foi utilizada para solucionar o problema, sendo aqui um compilado de todas as informações encontradas e usadas para desenvolver a solução.

Iniciando o projeto e dependências usadas

Como o react native e suas dependências estão sempre evoluindo e mudando de versão, irei descrever como fiz as instalações e informar as versões instaladas no momento que este artigo foi escrito.

Primeiro, vamos usar o seguinte comando:

npx react-native init nome-do-seu-projeto --template react-native-template-typescript

Com esse comando você está iniciado o projeto usando o CI do react native assim como o template de typescript no projeto.

O segundo passo é instalar o styled component

yarn add styled-components yarn add @types/styled-components-react-native -D

O terceiro passo é instalar as dependências do react navigation:

yarn add @react-navigation/native

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

Em seguida:

yarn add @react-navigation/drawer

Por último, como vou usar Icons na aplicação:

yarn add react-native-vector-icons yarn add @types/react-native-vector-icons -D

Com isso, vamos ter todas as dependências para a execução do projeto descrito neste artigo.

Como prometido, a seguir tem todas as versões instaladas no projeto:

Desenvolvimento da aplicação

Instalação do React Native Vector Icon

Para android é necessário apenas abrir o arquivo android/app/build.gradle e adicionar a seguinte linha no final:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Já na plataforma IOS, abra o arquivo ios/NOMEDOPROJETO/info.plist e adicione a seguinte chave:

<key>UIAppFonts</key>
 <array>
 <string>AntDesign.ttf</string>
 <string>Entypo.ttf</string>
 <string>EvilIcons.ttf</string>
 <string>Feather.ttf</string>
 <string>FontAwesome.ttf</string>
 <string>FontAwesome5_Brands.ttf</string>
 <string>FontAwesome5_Regular.ttf</string>
 <string>FontAwesome5_Solid.ttf</string>
 <string>Foundation.ttf</string>
 <string>Ionicons.ttf</string>
 <string>MaterialIcons.ttf</string>
 <string>MaterialCommunityIcons.ttf</string>
 <string>SimpleLineIcons.ttf</string>
 <string>Octicons.ttf</string>
 <string>Zocial.ttf</string>
 </array>

Estrutura do projeto

Primeiramente vamos criar uma pasta chamada src na raiz do projeto e criar um arquivo index com o seguinte conteúdo:

Como podemos perceber dentro deste arquivo foi importado as rotas da aplicação criada na pasta "routes", com arquivo principal com o seguinte conteúdo:

Aqui neste arquivo podemos tirar algumas informações interessante como:

Declaramos duas rotas para as telas que serão criadas, a tela Home e a tela About;
Passamos o componente do menu customizado(Drawer Content) para o Drawer.navigator através da propriedade drawerContent.

Já o componente DrawerContent é composto pelo seguinte código:

Arquivo Principal:

Arquivo de estilos:

Neste componente podemos tirar as seguintes informações principais:

As propriedades passadas para o componente no arquivo de rotas é recebidas no componente com a tipagem "DrawerContentComponentProps" importado do @react-navigation/drawer.
Os itens que serão exibidos no menu são declarados através de um array com o nome da rota, icon e titulo a serem exibidos na lateral do aplicativo. O componente final que será exibido na lateral se chama MenuItem e que é gerado através do array de opções declarado.

O Componente MenuItem é composto pelo seguinte código:

Arquivo principal:

Arquivo de estilos:

Neste componente também tiramos algumas informações importantes, pois usamos de alguns conceitos não muito conhecido do react navigation, segue a explicação:

A constante ActiveRouteName é recuperada através do valor do routeName que é passado pelo DrawerNavigation através das props dos componentes, sendo possível pesquisar o index correspondente na pilha de telas e pegar o nome exato da rota atual.
Já a constante isActive faz uma simples comparação usando o valor da rota que foi passado como parâmetro para o componente com a ActiveRouteName encontrado.
A função navigationToScreen faz uma validação verificando se a função de onPress foi enviada, navegando para a tela correspondente.

Para finalizar, vou mostrar como podemos abrir o menu lateral na tela e visualizar como vai ficar na aplicação.

Para isso eu criei duas telas e um componente de header, como as telas são praticamente iguais vou deixar apenas o código da tela Home e do componente Header:

Arquivo Principal da tela Home:

Arquivo de estilos da tela Home:

No código da tela de home também temos mais algumas informações importantes sobre o menu lateral:

A primeira é que para abrir, precisa usar o hook de navegação useNavigation().
Se você não for adepto ao typescript poderá perceber algo estranho, que no caso é a tipagem das rotas que precisa ser passada como parâmetro para poder ter acesso às propriedades do DrawerNavigation.Header.

Por fim, o último componente:

Arquivo Principal do componente Header:

Arquivo de estilos do componente Header:

Interface final

Abaixo, fica o exemplo de como o app deve ficar com o código compartilhado:

Conclusão

Esse artigo teve como objetivo mostrar como criar um menu lateral usando o react navigation v5. Espero que eu tenha conseguindo mostrar de uma forma fácil, detalhada e objetiva como implementar essa funcionalidade tão pedida pelos designer.

Sinta-se à vontade para modificar o código e fazer as melhorias necessárias para sua aplicação.

E por fim, se achou esse artigo útil compartilhe nas redes sociais e para aquele seu amigo que está se aventurando no mundo do desenvolvimento mobile ou até mesmo para aqueles que não estão.

Referências

Foto da capa by Joshua Aragon on Unsplash

React Native Docs
React Navigation V5 Docs
Styled Components Docs
React Typescript Docs
React native Vector Icons Docs
Typescript Docs

Uma introdução a React Native + Typescript + Styled Component

Ednilson Cardoso — Thu, 25 Jun 2020 22:01:09 +0000

Há um bom tempo venho estudando React + Typescript. Já que considero o Typescript uma forma de minimizar os bugs que encontramos nas Aplicações, além de facilitar a manutenção e desenvolvimento do software.

Durante o desenvolvimento de uma aplicação usada para estudar essa stack eu resolvi utilizar a biblioteca Styled Component para ajudar na organização e construção do código.

Foi durante o desenvolvimento dessa aplicação que surgiu uma dúvida crucial para continuar o desenvolvimento "Como eu devo usar essa ferramenta?", Visto que o mesmo código que eu utilizava no javascript agora não estava funcionando mais no Typescript.

Sendo assim, depois de pesquisar bastante e conseguir implementar minha aplicação eu resolvi escrever esse artigo para os iniciantes que tiveram o mesmo problema que eu no inicio de seus estudos com essa stack.

Desta forma, neste artigo eu vou mostrar como criar alguns componentes para serem usados na sua aplicação usando React native + Styled Component + Typescript. Não pretendo me aprofundar em todos os temas para não prolongar muito.

Por que foi escolhida essa Stack?

React Native foi escolhido por ser uma plataforma versátil que pode ser usada para desenvolver tanto para Android como para IOS de forma performática. Um outro ponto muito importante é que podemos utilizar boa parte do conhecimento aprendido também no React.js, já que essas duas plataformas se aproximam muito em questão de semântica de código.

A escolha do Styled Component é por causa que melhora a legibilidade e manutenção do código escrito, uma vez que permite que eu adicione estilização diretamente aos componentes da plataforma, tanto os nativos como os customizados.

Iniciando o desenvolvimento

Neste artigo não iremos fazer uma aplicação totalmente funcional, irei direto no que interessa que é mostrar como codificar os componentes usando as ferramentas mencionadas.

Primeiro passo para começarmos o desenvolvimento é iniciar o projeto usando o template de "react-native-template-typescript', caso surja alguma dúvida sobre esse processo consulte a documentação aqui.

sudo npx react-native init myproject  - template react-native-template-typescript

O segundo passo que eu sempre faço é remover os arquivos desnecessários e criar uma outra estrutura inicial com a configuração das rotas e das pastas. recomendo consultar o repositório do github.

Para prosseguir com o artigo você vai precisar adicionar as seguinte dependência em seu projeto:

yarn add styled-components

e também vai precisar adicionar a tipagem de forma independente:

yarn add @types/styled-components-react-native

Button

O primeiro componente que vamos construir é um Custom Button para fazer ele vamos precisar de um TouchableOpacity, View e de um Text.

No arquivo de index vamos fazer a estrutura do componente. Para isso vamos definir uma interface que estende as propriedades do TouchableOpacity e adiciona mais três propriedades: isDisable (Opcional), color(obrigatória) e children (obrigatória).

A seguir podemos ver o código final:

No arquivo de estilos vamos definir os seguintes componentes:

Container: Ele é apenas uma View estilizado então não precisamos passar as propriedades que ele recebe.
Touchable: Nesse componente eu utilizado algumas propriedades customizadas então precisamos definir uma interface para esse componente.
Text: Também vamos precisar adicionar uma interface, porquê recebemos alguns propriedades customizadas.

Você pode conferir o código final a seguir:

TextInput

Este Textinput é um pouco mais complexo. ele foi construindo usando outros componentes também feito usando styled, como já expliquei no componente anterior.

Uma observação que podemos pegar deste componente é que não precisamos criar uma nova interface para as propriedades, já que o componente não está recebendo nenhuma nova propriedade, então podemos usar diretamente o TextInputProps.

Já no caso dos estilos vamos precisar adicionar uma nova interface, porquê a cor do label depende do estado do componente total, como podemos ver a seguir:

Observações

Alguns pontos precisamos destacar neste artigo para que você não tenha problemas é o seguinte:

Algumas bibliotecas não vem com a tipagem por padrão junto com a biblioteca principal então precisamos instalar ela de forma separada usando a dependência @types/styled-components-react-native é preciso tomar cuidado para não cair nesse erro.

O segundo ponto é que sempre que você precisar usar uma propriedade customizada para algum componente estilizado você vai precisar usar alguma tipagem importada da biblioteca mencionada no paragrafo anterior.

Um exemplo disto é o botão que construímos a cima que precisou usar o TouchableOpacityProps para que na hora que o desenvolvedor precise usar em uma tela ele consiga ter acesso a todas as propriedades disponível nativamente + as Types que você configurou.

E por fim uma outra coisa bastante importante é definir os retornos das funções de acordo com o componente que você está usando como fizemos em todos os componentes customizados anteriormente.

Conclusão

Com esse artigo espero que você tenha conseguido tirar aquela dúvida que estava te impedindo de prosseguir no desenvolvimento da sua aplicação
Se surgiu alguma dúvida ou viu algum erro por favor entre em contato comigo através das minhas redes sociais:

Twitter
Linkedin

Refêrencia:
https://styled-components.com/docs
https://reactnative.dev/docs/typescript
https://www.typescriptlang.org/docs/home.html
https://blog.rocketseat.com.br/typescript-vantagens-mitos-conceitos/

Créditos da imagem:
Photo by Fotis Fotopoulos on Unsplash