Como utilizar fontes e cores globais no React Native com styled-components

Fala dev, beleza ? Me chamo Hudson, sou desenvolver mobile com React Native e esse é o meu primeiro post aqui no dev.to.

Normalmente utilizo a própria funcionalidade de artigos do Linkedln para fazer minhas publicações, porém como esse é o meu primeiro conteúdo mais técnico, decidi migrar para cá.

Espero que goste :D

Introdução/Motivação

Quando comecei a desenvolver com React Native, senti muita falta de uma etapa quase que obrigatória no desenvolvimento web com ReactJS e Styled-Components que era a declaração das fontes e cores globais da nossa aplicação. A alternativa que eu utilizava na web consiste em usar a funcionalidade createGlobalStyle como parte da nossa aplicação.

Minha maior dúvida era: como faço isso com react-native ? Visto que não consigo utilizar essa função createGlobalStyled.

Depois de algum tempo e dado início ao curso de React Native da Rocketseat(Ignite), descobri uma forma simples e muito legal de disponibilizar fontes e cores globais no nosso aplicativo.

Mão na massa

Para compartilhar com vocês essa etapa, vou estar utilizando o expo bare workflow, apenas por gosto próprio.

Depois de criar um projeto com o expo (chamei o projeto de estilosglobais) o primeiro e próximo passo é já instalar o styled-components e suas tipagens.

Você pode utilizar os comandos:

yarn add styled-components
Para instalar o styled components no seu projeto
e
yarn add @types/style-components-react-native -D
Para instalar suas tipagens

Essa é a estrutura padrão de um projeto iniciado com expo bare worlflow:

Por padrão gosto de criar uma pasta src dentro desse nosso projeto, e a partir dela começar a desenvolver o código. Também vou criar uma pasta screens que vai conter minha página principal que sera a Home.

Assim ficou a estrutura do meu projeto depois de fazer a configuração inicial:

Dentro do nossa index.tsx da pasta Home eu tenho apenas a declaração do nosso componente e duas tags de retorno, nosso Container, uma View simples e o Title que é um Text do React Native

Criando nosso tema global

Dentro da nossa pasta src, criaremos também uma pasta chamada global e dentro dela, uma pasta chamada styles, é assim que eu aprendi e curto de utilizar nossas definições de tema global.

Apenas dois arquivos em styles serão necessários para que possamos começar a implementar esse tema de forma global.
theme.ts: Onde ficarão nossas fontes e cores
styled.d.ts: Onde vamos colocar a tipagem necessária para que o styled entenda o nosso novo tema.

theme.ts

É no theme.ts que vamos exportar o nosso código padrão de fonte e cor por meio de um objeto default:

export default {
  colors: {
    background: '#ffffff',

    text: '#000000',
  },

  fonts: {
    regular: 'Poppins_400Regular',
    medium: 'Poppins_500Medium',
    bold: 'Poppins_700Bold',
  }
}

Você deve ficar à vontade para nomear como quiser as suas variaveis de cores e fonte, eu por padrão utilizei background e text para as cores e regular,medium e bold para as fontes.

Também para as fontes, como estou utilizando o expo, instalei elas utilizando o próprio expo-font e as fontes do google
expo install expo-font @expo-google-fonts/poppins
Caso esteja utilizando o React Native CLI, você pode declarar no objeto de fonts o nome padrão dos arquivos que adicionou no projeto.

styles.d.ts

Nesse arquivo devemos declarar novamente o módulo styled-components porém com a adição das nossas fontes e cores:

import 'styled-components';
import theme from './theme';

declare module 'styled-components'{
  type ThemeType = typeof theme

  export interface DefaultTheme extends ThemeType {}
}

Quase tudo pronto!

Feito essas duas etapas, o próximo passo é ir no nosso arquivo App.tsx e mexer um pouquinho na sua estrura:

import React from 'react';
import { Home } from './src/screens/Home';
import {ThemeProvider} from 'styled-components';
import theme from './src/global/styles/theme';

import {
  useFonts,
  Poppins_400Regular,
  Poppins_500Medium,
  Poppins_700Bold,
} from '@expo-google-fonts/poppins';

export default function App() {
  const [fontsLoaded] = useFonts({
    Poppins_400Regular,
    Poppins_500Medium,
    Poppins_700Bold,
  });

  return (
    <ThemeProvider theme={theme}>
      <Home />
    </ThemeProvider>
  );
}

Agora o retorno do nosso App precisa estar envolvido pelo ThemeProvider, que foi importado de dentro do styled-components.
Após envolver a nossa aplicação pelo ThemeProvider, ele pede uma propriedade obrigatória chamada theme, é dentro dela que nós vamos colocar o theme, que foi importado de dentro do nosso global/styles.

Hora de testar

Feito tudo isso, basta irmos até o arquivo styles.ts da nossa aplicação e utilizar a sintaxe padrão do styled para pegar variaveis e usar o theme, o mais legal disso tudo é que o theme já tá tipado, então quando você utilizar o . ele vai te sugerir se são as fontes ou as cores, e depois qual fonte ou cor você quer utilizar:

Como utilizar os temas globais dentro de um componente JSX?

Talvez em algum momento desenvolvendo você passe pela necessidade de usar esse tema global para colocar em alguma propriedade de componente pelo JSX, por exemplo.
Para isso, você deve seguir esse padrão:

import React from 'react';

import {useTheme} from 'styled-components';

import {
  Container,
  Title,
} from './styles';

export function Home(){
  const theme = useTheme();

  return (
    <Container color={theme.colors.background} >
      <Title>Fontes e Cores Globais</Title>
    </Container>
  );
}

Fim

Dev, espero que tenha gostado dessa dica, quando descobri a possibilidade de utilizar fontes e cores globais no React Native fiquei super empolgado para compartilhar isso com todo mundo, fica à vontade para compartilhar comigo suas dúvidas e também trazer novos conhecimentos.

Código no github: https: https://github.com/huduarte/react-native-styled-components-global-theme
Meu linkedln: https://www.linkedin.com/in/huduarte/

Bye! :D