StyleSheet — co to je, vytváření stylů v React Native

Co je StyleSheet?

StyleSheet — vestavěné API React Native pro definování stylů komponent. Na rozdíl od CSS ve vývoji webu používá RN JavaScriptové objekty k popisu stylů. StyleSheet.create — klíčová metoda, která přijímá objekt se styly a vrací objekt s číselnými identifikátory.

StyleSheet je součástí jádra React Native a nevyžaduje instalaci dalších balíčků. Podle údajů Meta (2026) používá 95% projektů React Native StyleSheet.create pro statické styly. Alternativy: styled-components, Emotion, NativeWind (Tailwind pro RN) — ale vestavěný StyleSheet zůstává standardem pro jádro.

Historie a vývoj

V prvních verzích React Native (2015) byly styly definovány výhradně pomocí inline objektů. StyleSheet.create se objevil v RN 0.4 jako optimalizace. Koncept je převzat z CSS: oddělte styly od logiky pro čitelnost a výkon. V průběhu let se API rozšířilo: přibyly absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs inline styly

Rozdíl mezi StyleSheet.create a inline styly je kritický pro výkon. Inline styl — běžný JavaScriptový objekt vytvářený při každém vykreslení komponenty. StyleSheet.create — objekt vytvořený jednou při načtení modulu a převedený na číselné ID.

Při předávání inline stylu posílá React Native pokaždé celý objekt přes most JavaScript-Native. U komponenty se složitými styly jde o desítky vlastností předávaných při každém vykreslení. StyleSheet.create předává pouze číselný identifikátor, čímž snižuje zatížení mostu.

// StyleSheet.create — optimalizovaný přístup
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — vytváří nový objekt při každém vykreslení
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Kdy použít inline: pro dynamické styly závislé na stavu (pressed, selected, active). Pro statické styly vždy používejte StyleSheet.create. Pravidlo: statika → create, dynamika → inline funkce.

Flexbox rozvržení přes StyleSheet

Flexbox — jediný mechanismus rozvržení v React Native (CSS Grid není podporován a float neexistuje). StyleSheet.create se používá k popisu flex kontejnerů a jejich potomků. Hlavní vlastnosti: flex (koeficient plnění), flexDirection (row | column), justifyContent, AlignItems.

Ve výchozím nastavení je flexDirection v React Native column (v CSS — row). To je první věc, kterou je třeba si zapamatovat při přechodu z vývoje webu. Všechny View jsou ve výchozím nastavení flex kontejnery. Pro centrování prvku použijte 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',
  },
});

Důležité: v React Native se všechny rozměry zadávají bez jednotek (jen číslo). Procenta fungují, ale pouze pro width a height vzhledem k rodiči. margin a padding přijímají čísla. Pro přizpůsobivost použijte flex místo procent — je to spolehlivější na různých obrazovkách.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

API StyleSheet zahrnuje několik metod kromě create. StyleSheet.flatten spojuje pole stylů do jednoho objektu — užitečné pro kompozici a předávání stylů komponentám třetích stran. StyleSheet.hairlineWidth vrací minimální viditelnou šířku čáry na zařízení.

StyleSheet.absoluteFill — předdefinovaný styl { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Používá se pro překryvné vrstvy, modální okna a absolutní pozicování na celou obrazovku. StyleSheet.absoluteFillObject — totéž, ale ve formě objektu pro rozšíření.

// flatten — sloučení stylů
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 — minimální čára
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth je užitečný pro oddělovače a okraje — vždy vypadá jako 1 fyzický pixel bez ohledu na hustotu obrazovky. Na Retina displejích je to 0.5 logického bodu, na běžných — 1 bod. Nepoužívejte hairlineWidth pro prvky, které musí mít přesně definovanou velikost.

Responzivní rozvržení s Dimensions API

Dimensions API se používá společně se StyleSheet pro responzivní rozvržení pro různé velikosti obrazovky. Dimensions.get('window') vrací šířku a výšku okna. Pro reaktivní aktualizaci při otáčení obrazovky použijte hook useWindowDimensions z React Native.

Přestože StyleSheet.create nepodporuje media queries jako CSS, můžete vypočítávat hodnoty na základě Dimensions uvnitř create nebo používat dynamické styly přes funkci. Pro zlomové body vytvářejte samostatné styly pro různé rozsahy šířky.

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 se automaticky aktualizuje při otáčení obrazovky a změně velikosti okna na tabletech s Split View. Pro SSR (React Native Web) se ujistěte, že je Dimensions.get voláno po připojení komponenty, aby se předešlo nesrovnalostem mezi serverem a klientem.

Organizace stylů v projektu

Organizace StyleSheet v projektu ovlivňuje udržovatelnost a znovupoužitelnost kódu. Tři přístupy: lokální styly uvnitř komponenty (styles.js vedle komponenty), globální styly (theme.js s konstantami barev, mezer, typografie) a modulární styly prostřednictvím kompozice.

Doporučená struktura: theme.js s konstantami barev, velikostí a typografie; Component.styles.js vedle každé komponenty pro její specifické styly; StyleSheet.flatten pro kombinaci základních a specifických stylů. Pro velké projekty použijte Design System s generováním motivu.

// theme.js — globální konstanty
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',
  },
});

Výhody modulární organizace: jediný zdroj pravdy pro barvy a mezery, zjednodušení refaktorování (změnili jste primary — aktualizovala se všechna tlačítka), znovupoužitelnost stylů přes flatten, čitelnost a předvídatelnost kódu. Pro TypeScript projekty přidejte typy pro motiv přes declare module.