Como e por que utilizar styled-components no seu projeto React Native

#React Native
#CSS
#TypeScript

Para podermos usar uma equivalência de CSS no ReactNative, usamos o styled-components. Como diz na documentação oficial do mesmo, vamos instalar as dependências com o seguinte comando

yarn add styled-components

Após isso precisamos adicionar a tipagem da API no nosso projeto

yarn add @types/styled-components-react-native -D

Por conveniência, criamos uma pasta "Global", nela utilizaremos arquivos que precisam estar disponíveis em todo o projeto. No nosso caso, criaremos mais uma pasta chamada "styles". Agora tudo aquilo que for referente ao estilo da aplicação inteira ficará dentro dessa pasta. Para as nossas cores, criaremos uma pasta chamada "theme.ts", Nela ficarão todas as cores utilizadas e também as fontes, que está descrito em seguida. Dentro do nosso arquivo theme.ts vamos apenas exportar um grande objeto. Exemplo:

export default {
  colors:{
      white:'#FFFFFF',
      black:'rgba(0,0,0,1)'
  }
}

Como estamos usando TypeScript no nosso projeto, ele não identifica sozinho os itens do nosso arquivo "theme.ts",por isso, precisamos tipa-lo. Criaremos um arquivo próprio para isso, dentro de styles mesmo. O arquivo se chamará "styled.d.ts" e dentro ele teremos apenas a tipagem do nosso arquivo "theme.ts"

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


declare module 'styled-components'{
  type ThemeType = typeof theme
  
  export interface DefalutTheme extends ThemeType { }
}

Na nosso arquivo raiz App.tsx, envolvemos os componentes da nossa aplicação dentro de um contexto do próprio styled-components, fazemos isso da seguinte forma:

import React from 'react';
import { ThemeProvider } from 'styled-components/native'


// o arquivo theme contém o nosso objeto com valores de cores e fontes para toda a aplicação
import theme from './src/global/styles/theme';
import { Dashboard } from './src/screens/Dashboard';


export default function App() {
return (
          //Passamos um tema para o componente <ThemeProvider>, no caso, o theme que está dentro da pasta styles
  <ThemeProvider theme={theme}>
    <Dashboard />
  </ThemeProvider>
)
}

Pronto, agora nós utilizaremos assim:

import React from 'react';
import styled from 'styled-components/native';


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


export function Dashboard() {
  return (
      <Container>
          <Title>
              Dashboard
          </Title>
      </Container>
  )
}


//Um styled-component é usado da seguinte forma:
// NomeDoSeuComponente = styled.ComponenteReactNativeReferência`
  {*
      CONTEÚDO
  *}
`;


export const Container = styled.View`
      flex: 1;
      justify-content: center;
      align-items: center;
      background-color: ${({ theme }) => theme.colors.background};
`;


export const Title = styled.Text`
  font-family: ${({ theme }) => theme.fonts.bold};
  font-size: 24px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.title};

EXTRA

Para usarmos as propriedades dos componentes nativos, basta aplicarmos a propriedade normalmente no componente que criamos, pois em teoria, ele é um componente nativo do react native e tem acesso as mesmas propriedades. Caso seja um componente não nativo, mudamos a notação.

<Photo source={{uri:'www.image.com'}}/>
<Icon name="name-here"/>


// Estilos 


import styled from 'styled-components/native';
import { RFPercentage, RFValue } from 'react-native-responsive-fontsize';
import { Feather } from '@expo/vector-icons'




export const Photo = styled.Image`
  height: ${RFValue(48)}px;
  width: ${RFValue(48)}px;
  border-radius: 10px;
`;


export const Icon = styled(Feather)`
  color: ${({theme}) => theme.colors.secondary};
  font-size: ${RFValue(24)}px;

Em outros casos, podemos usar os componentes nativos da seguinte forma:

//o que estiver dentro de .attrs({}) é atributo do componente original. A
// estilização pode ser feita normalmente dentro das ``.
export const HighLightCards = styled.ScrollView.attrs({
  horizontal:true,
  showsHorizontalScrollIndicator:false,
  contentContainerStyle:{paddingHorizontal: 24}
})`
  width: 100%;
  position:absolute;


  margin-top: ${RFPercentage(20)}px;
`;

Em breve também irei mostrar como usar as fontes personalizadas do google fonts.