Como organizar estilos no React Native

Conheça as melhores práticas para organização da estilização dos componentes no seu projeto

Como organizar estilos no React Native

Uma das práticas mais utilizadas por quem está começando a criar projetos em React Native é definir os estilos no mesmo arquivo que o componente ou no máximo separar a parte apresentável da lógica, mais ou menos da seguinte forma:

O principal problema dessa forma está em utilizar a variável de estilos mesmo antes de ser definida. Se você utilizar o ESLint, provavelmente vai ser um erro que ele vai apontar. “Ah, mas é só passar pra cima do componente”, sim, mas então assim que você abre o componente, a primeira coisa que você vê são os estilos… Acho que não é a melhor forma.

Nesse post vamos entender duas práticas para organização dos estilos dos componentes. Inclusive as duas devem ser usadas juntas e você não deve escolher uma delas.

Utilizando arquivo externo

A primeira maneira de melhorar todo esse processo é separar o arquivo de estilos do componente da seguinte forma:

Desse modo, a organização dos arquivos já fica bem melhor e você não precisa mudar suas importações, por exemplo: import Header from 'components/Header'; irá continuar igual.

Dessa forma, o componente criado ficaria dessa forma:

Separando estilos genéricos

O que é comum de toda aplicação, tanto web quando mobile, é geralmente seguir um padrão de cores, espaçamentos, fontes, etc. Nesses casos o mais correto é separar esses estilos genéricos em uma pasta alternativa. Hoje nos meus projetos eu crio uma pasta na raiz (geralmente chamo de src) chamada styles e essa pasta fica responsável por armazenar qualquer estilo que eu irei utilizar em mais lugares do meu projeto, evitando redundâncias.

Dentro dessa pasta eu tenho os seguintes arquivos:

index.js: Importa os arquivos de estilo e exporta de forma com que você consiga importar um ou vários arquivos com o mesmo import.

colors.js: Responsável por armazenar as cores utilizadas na aplicação, e aqui vai desde cores para layouts como cores do TextInput, textos em geral, botões, etc.

fonts.js: Aqui é onde armazeno os tamanhos de fontes utilizadas no projeto, então, assim como no colors, todos tamanhos de fontes devem possuir algum significado e por isso estão nesse arquivo.

metrics.js: Margens, paddings, tamanhos configurados pela plataforma (ex.: StatusBar), Border Radius, etc. Tudo que está ligado diretamente com espaçamento e ocupação de um componente em tela vai nesse arquivo.

general.js: O arquivo general é o único diferente dos demais. Seu papel não é armazenar variáveis, mas sim armazenar estilos de componentes padrão. Pense que em seu aplicativo você possui um layout de seção que aplica um espaçamento e possui um título em negrito. Ao invés de criar um componente chamado Section você apenas importa os estilos do general.js no seu arquivo styles.js e sai usando as propriedades section e secionTitle. A importação pode ser realizada da seguinte forma:

A partir desse momento, no seu componente você poderá utilizar todas as propriedades definidas no arquivo general.js.

Chegando ao fim

Nesse post apresentei duas formas de melhorar a organização dos estilos dentro do React Native e agora quero saber de você, como anda organizando sua estrutura? Utiliza algum pacote terceiro para te ajudar nesse processo? Deixa aí nos comentários.

A seguir:

Fluxo de autenticação com React Native

Fluxo de autenticação com React Native