StyleSheet — co to jest, tworzenie stylów w React Native

Czym jest StyleSheet?

StyleSheet — wbudowane API React Native do definiowania stylów komponentów. W przeciwieństwie do CSS w tworzeniu stron internetowych, RN używa obiektów JavaScript do opisywania stylów. StyleSheet.create — kluczowa metoda, która przyjmuje obiekt ze stylami i zwraca obiekt z numerycznymi identyfikatorami.

StyleSheet jest częścią rdzenia React Native i nie wymaga instalacji dodatkowych pakietów. Według danych Meta (2026), 95% projektów na React Native używa StyleSheet.create do statycznych stylów. Alternatywy: styled-components, Emotion, NativeWind (Tailwind dla RN) — ale wbudowany StyleSheet pozostaje standardem dla rdzenia.

Historia i ewolucja

W pierwszych wersjach React Native (2015) style były definiowane wyłącznie przez inline-obiekty. StyleSheet.create pojawił się w RN 0.4 jako optymalizacja. Koncepcja pochodzi z CSS: oddziel style od logiki dla czytelności i wydajności. Z biegiem lat API rozszerzyło się: dodano absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs inline-style

Różnica między StyleSheet.create a inline-stylami jest krytyczna dla wydajności. Inline-style to zwykły obiekt JavaScript, tworzony przy każdym renderowaniu komponentu. StyleSheet.create — obiekt tworzony raz przy ładowaniu modułu i przekształcany w numeryczny ID.

Przy przekazywaniu inline-stylu React Native każdorazowo wysyła cały obiekt przez most JavaScript-Native. Dla komponentu ze złożonymi stylami to dziesiątki właściwości, przekazywanych przy każdym renderowaniu. StyleSheet.create przekazuje tylko identyfikator liczbowy, zmniejszając obciążenie mostu.

// StyleSheet.create — zoptymalizowane podejście
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — tworzy nowy obiekt przy każdym renderowaniu
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Kiedy używać inline: dla dynamicznych stylów zależnych od stanu (pressed, selected, active). Dla statycznych stylów zawsze używaj StyleSheet.create. Zasada: statyka → create, dynamika → inline-funkcja.

Układ Flexbox przez StyleSheet

Flexbox — jedyny mechanizm układu w React Native (CSS Grid nie jest obsługiwany, a float nie istnieje). StyleSheet.create jest używany do opisywania flex-kontenerów i ich elementów potomnych. Główne właściwości: flex (współczynnik wypełnienia), flexDirection (row | column), justifyContent, alignItems.

Domyślnie flexDirection w React Native to column (w CSS — row). To pierwsza rzecz do zapamiętania przy przejściu z tworzenia stron internetowych. Wszystkie View domyślnie są flex-kontenerami. Do wyśrodkowania elementu używaj alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Ważne: w React Native wszystkie rozmiary podaje się bez jednostek (po prostu liczba). Procenty działają, ale tylko dla width i height względem rodzica. margin i padding przyjmują liczby. Dla responsywności używaj flex zamiast procentów — to bezpieczniejsze na różnych ekranach.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

API StyleSheet zawiera kilka metod oprócz create. StyleSheet.flatten łączy tablicę stylów w jeden obiekt — przydatne do kompozycji i przekazywania stylów do zewnętrznych komponentów. StyleSheet.hairlineWidth zwraca minimalną widoczną szerokość linii na urządzeniu.

StyleSheet.absoluteFill — predefiniowany styl { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Używany do warstw overlay, okien modalnych i absolutnego pozycjonowania na cały ekran. StyleSheet.absoluteFillObject — to samo, ale w formie obiektu do rozszerzania.

// flatten — scalanie stylów
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — minimalna linia
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth jest przydatny do separatorów i obramowań — zawsze wygląda jak 1 fizyczny piksel niezależnie od gęstości ekranu. Na wyświetlaczach Retina to 0.5 punktu logicznego, na zwykłych — 1 punkt. Nie używaj hairlineWidth dla elementów, które muszą mieć ściśle określony rozmiar.

Responsywny układ z Dimensions API

Dimensions API jest używane razem ze StyleSheet do responsywnego układu dla różnych rozmiarów ekranu. Dimensions.get('window') zwraca szerokość i wysokość okna. Do reaktywnej aktualizacji przy obrocie ekranu używaj hooka useWindowDimensions z React Native.

Chociaż StyleSheet.create nie obsługuje media zapytań jak CSS, możesz obliczać wartości na podstawie Dimensions wewnątrz create lub używać dynamicznych stylów przez funkcję. Dla breakpoints twórz osobne style dla różnych zakresów szerokości.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions automatycznie aktualizuje się przy obrocie ekranu i zmianie rozmiaru okna na tabletach z Split View. Dla SSR (React Native Web) upewnij się, że Dimensions.get jest wywoływane po zamontowaniu komponentu, aby uniknąć rozbieżności między serwerem a klientem.

Organizacja stylów w projekcie

Organizacja StyleSheet w projekcie wpływa na utrzymywalność i ponowne użycie kodu. Trzy podejścia: lokalne style wewnątrz komponentu (styles.js obok komponentu), globalne style (theme.js ze stałymi kolorów, odstępów, typografii) i modułowe style przez kompozycję.

Zalecana struktura: theme.js ze stałymi kolorów, rozmiarów i typografii; Component.styles.js obok każdego komponentu dla jego specyficznych stylów; StyleSheet.flatten do kombinacji podstawowych i specyficznych stylów. Dla dużych projektów używaj Design System z generowaniem motywu.

// theme.js — globalne stałe
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Zalety organizacji modułowej: jedno źródło prawdy dla kolorów i odstępów, uproszczenie refaktoryzacji (zmieniłeś primary — zaktualizowały się wszystkie przyciski), ponowne użycie stylów przez flatten, czytelność i przewidywalność kodu. Dla projektów TypeScript dodaj typy dla motywu przez declare module.