Como utilizar fontes e cores globais no React Native com styled-components
Tags: reactnative, typescript, react
Published: 2021-06-07 16:19:14

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kej6v9tt4jjar0hf9goa.jpeg)


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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puxtftiqt4s3gagjgt05.jpeg)

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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4tz6aejw3ppqgw1sf49.jpeg)
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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkybzkd8hxsbntyizji0.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d31qthi4v6pvflhh7z1q.jpeg)

##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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h54ysi9dxt2cl338uree.jpeg)

####theme.ts
É no theme.ts que vamos exportar o nosso código padrão de fonte e cor por meio de um objeto default:
```ts
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:
```ts
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:
```ts
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtgwj3wfqhqr61mo3220.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t03txjcriiw28q9gezkt.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/133rxny6iznkn5juwna3.jpeg)
##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:
```ts
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