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:

            Figura 1 – Utilizando Stylesheet
            Figura 2 – Utilizando Styled Components

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:

Figura 3 – Layout tradicional

Após iniciar o seu projeto, vá no arquivo principal App.js e faça o seguinte código abaixo:

Figura 4 – Componente sem Styled Components

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.

Figura 5 – Refatorando para Styled Components

Agora, crie os componentes estilizados usando a sintaxe do Styled Components, utilizando template string.

Figura 6 – criando componentes com Styled Components

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:

Figura 7 – Código finalizado com Styled Components

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:

Figura 8 – Exportando os componentes em um arquivo separado
Figura 9 – Importando componentes de um outro arquivo

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:

https://www.styled-components.com/

https://www.styled-components.com/