[Rick and Morty Characters Wiki] — Parte 2.3 — Configuração — Tematização com Styled-Components

Photo by John Mark Arnold on Unsplash

Caso tenha caído aqui por acidente, essa é a parte 1 de uma serie de posts para implementação de uma aplicação inspirada no post Rick and Morty Character Wiki do Joy Shaeb:

0 — Rick and Morty Character Wiki

Vamos começar instalando em nosso projeto as dependências da lib Styled Components:

# instale as dependências no projeto
yarn add styled-components-react-native

# projetos com typescript precisam do pacote de tipagem
yarn add -D @types/styled-components-react-native

Vamos criar nosso arquivo de estilos, para este projetos vamos utilizar somente cores tematizadas:

src/styles/colors.ts:

export const colors = {
  white: '#FFFFFF',
  aliceblue: '#e7f1ff',
  blue: '#0c63e4',
  red: '#E60C0D',
  forestgreen: '#228B22',
  black: '#000000',
  grey: '#5B5B5B',

  darkTransparent: 'rgba(91, 91, 91, 0.7)',
  greenTransparent: 'rgba(34,139,34, 0.7)',
  redTransparent: 'rgba(230,12,13, 0.7)',
} as const;

src/styles/index.ts:

import { colors } from './colors';

export const theme = {
  colors,
};

src/@types/styled-components.d.ts:

import { theme } from '~/styles';

type Theme = typeof theme;

// Vamos estender o tema padrão com nosso tema atual
declare module 'styled-components' {
  export interface DefaultTheme extends Theme {}
}

App.tsx:

import React from 'react';
import { StatusBar } from 'react-native';
import { ThemeProvider } from 'styled-components'; // <-- adicione essa importação

import { theme } from './styles'; // <-- adicione essa importação
import { Routes } from './routes';

import './config';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <StatusBar barStyle={'dark-content'} />
      <Routes />
    </ThemeProvider>
  );
};

export default App;

Para testar o código que acabamos de implementar, altera o src/screens/Characters/index.tsx dessa forma:

import React from 'react';
import { Text, View } from 'react-native';
import { theme } from '~/styles';

const Characters = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ color: theme.colors.blue }}>Characters Screen</Text>
    </View>
  );
};

export default Characters;

Nossa aplicação:

Continua na parte 2.4.

Parte 2.4 — Requests com axios

GitHub - WallysonGalvao/rickmortywiki

styled-components