Téma készítés – ThemeProvider

Van nekünk a styled-components nevű csomagunk. Ez ad nekünk egy ThemeProvider burkoló komponenst. Ez teszi lehetővé számunkra, hogy témákat készítsünk.

Egy javasolt tervezési minta

Célszerű egy külön mappát készíteni ennek, aminek a neve például az, hogy theme. Ezen belül lesz egy index.js, valamint a nevükből már sejthető, hogy milyen célt szolgálnak majd: fonts.js, ami a téma betűtípusokat tartalmazza. A colors.js a színeket. A sizes.js a méreteket. A spacing.js pedig a térközöket, margókat. Ezek együttesen alkotnak egy témát.

A colors.js tartalma mondjuk így nézhet ki:

export const colors = {
  brand: {
    primary: "#2182BD",
    secondary: "#5282BD",
    muted: "#C6DAF7",
  },
  ui: {
    primary: "#262626",
    secondary: "#757575",
    tertiary: "#F1F1F1",
    quaternary: "#FFFFFF",
    disabled: "#DEDEDE",
    error: "#D0421B",
    success: "#138000",
  },
  bg: {
    primary: "#FFFFFF",
    secondary: "#F1F1F1",
  },
  text: {
    primary: "#262626",
    secondary: "#757575",
    disabled: "#9C9C9C",
    inverse: "#FFFFFF",
    error: "#D0421B",
    success: "#138000",
  },
};

Van tehát egy colors objektum. Ezen belül definiáltunk több másik objektumot. Például van egy text objektum, amiben van az a hat tulajdonság név amiket használni tudunk. Mindegyiknek van értéke természetesen.

Az összes többi fájlba is kerül valami „stílus konstans”.

index.js

Aztán a következő fontos fájl az index.js. Ez az, ami a témát adja. Ez gyűjti össze az egyes téma objektumokat és exportálja ki magát a témát:

import { colors } from "./colors";
import { space, lineHeights } from "./spacing";
import { sizes } from "./sizes";
import { fonts, fontWeights, fontSizes } from "./fonts";

export const theme = {
  colors,
  space,
  lineHeights,
  sizes,
  fonts,
  fontSizes,
  fontWeights,
};

ThemeProvider

A ThemeProvider-t használjuk mondjuk az app.js-ben és magát a témát (theme) is importáljuk.:

import { ThemeProvider } from "styled-components/native";
import { theme } from "./src/infrastructure/theme";

Körbevesszük az egyik komponenst a ThemeProvider-rel:

export default function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <RestaurantsScreen />
      </ThemeProvider>
      <ExpoStatusBar style="auto" />
    </>
  );
}

A ThemeProvider-nek a theme tulajdonságában adtuk át a témát. A theme objektumot. A hatás pedig az lesz, hogy a RestaurantsScreen komponens és az összes alatta levő komponens tudja majd használni a témát.

Például így:

import styled from "styled-components/native";
//...
const Title = styled.Text`
  padding: 16px;
  color: ${props => props.theme.colors.ui.success};
`;

Ezt a cuccot a styled-components biztosítja, tehát ezt importálni kellett a fájlban.

Azért azt hozzátenném, hogy a csomagot először természetesen telepíteni szükséges.

A kódban látszik, hogy a props-on keresztül érjük el a téma objektumok tulajdonságában megadott értékeket.

${props => props.theme.colors.ui.success};

Hogyan is működik ez pontosan? Minden komponensnek van / lehet input paramétere, aminek a neve az, hogy props. Minden egyes styled komponens alapból megkapja a téma (theme) objektumot az ő props tulajdonságában, paraméterében.

És, ha már megkapta, akkor lehet is használni :).