O que é React Native com Styled Components?
Styled Components é uma biblioteca (lib) que utiliza o conceito de CSS-in-JS, ou seja, que nos permite escrever códigos CSS dentro do Javascript. E por que eu deveria usar o Styled Components? A resposta é simples: praticidade.
Criando códigos dessa forma, podemos reaproveitar o CSS de um website de forma mais rápida e ainda escrevê-lo sem revezar entre estilos diferentes de escrita. Entenda melhor porque esta lib está ganhando cada vez mais força nas comunidades de TI.
Por que utilizar o React Native com Styled Components?
Quando a ideia é estilizar o seu App no React Native, a documentação nos ensina a utilizar a API do Stylesheet, que faz a abstração do CSS e já vem ao iniciarmos um projeto.
O que deixa os desenvolvedores incomodados é que precisamos escrever as propriedades CSS em camel case, em vez de separar palavras com traços conforme o CSS “normal” (por exemplo backgroundColor em lugar de background-color). Já com Styled Components, podemos escrever CSS da mesma forma que estamos acostumados na web, sem precisar revezar estilos, como citado no início deste artigo. Com isso, também podemos reaproveitar o CSS de um site web de forma mais rápida.
Outra coisa que facilita a vida dos programadores é a sintaxe mais simples e clara dos seus componentes. Isso facilita o entendimento do código e ajuda na manutenção do App. Veja a comparação abaixo:
Como alterar um projeto para Styled Components?
Vamos lá! Para começar, vamos exemplificar com um projeto já pronto em React Native. Caso não saiba iniciar um, confira como fazer na documentação.
Neste exemplo, vamos criar a tela da forma tradicional, utilizando Stylesheet e depois iremos mudar para Styled Components. A tela será bem simples para entendermos o conceito. Será dessa forma:
Após iniciar o seu projeto, vá no arquivo principal App.js e faça o seguinte código abaixo:
Execute o seu projeto e poderemos ver que já está igual à imagem do layout.
Para começar com Styled Components, primeiro precisamos instalar a biblioteca com o seguinte comando:
npm install -S styled-components
Agora, vamos fazer algumas alterações e utilizar essa nova biblioteca. Para começar, faça a importação no topo do seu código:
import styled from 'styled-components';
Após a importação, troque o nome dos componentes visuais que estão dentro da constante App, que são a View, Image e Text, conforme a imagem abaixo. Agora esses elementos serão personalizados utilizando Styled Components.
Agora, crie os componentes estilizados usando a sintaxe do Styled Components, utilizando template string.
Figura 6 – criando componentes com Styled Components
Dica: para as propriedades ficarem de cores diferentes, igual ao exemplo, instale o plugin do Visual Studio Code, chamado vscode-styled-components.
Após todos esses passos, seu código deve estar dessa forma:
Depois de conferir, execute o seu código e veja a tela da mesma forma, mas agora utilizando Styled Components!
Refatoração
Conforme recomendado pela comunidade e pela biblioteca, os componentes devem ser exportados de um outro arquivo. Fazer isso é muito simples: basta você criar um arquivo novo, exportar as constantes e depois importar no componente desejado, conforme o código abaixo:
E aí? Gostou dessa forma diferente de estilizar os seus componentes? Conheça mais sobre essa biblioteca e contribua com o projeto no github.
Referências:
