StyleSheet — що це, створення стилів у React Native

Що таке StyleSheet?

StyleSheet — вбудований API React Native для визначення стилів компонентів. На відміну від CSS у веб-розробці, RN використовує JavaScript-об'єкти для опису стилів. StyleSheet.create — ключовий метод, який приймає об'єкт зі стилями та повертає об'єкт з числовими ідентифікаторами.

StyleSheet входить в ядро React Native і не вимагає встановлення додаткових пакетів. За даними Meta (2026), 95% проектів на React Native використовують StyleSheet.create для статичних стилів. Альтернативи: styled-components, Emotion, NativeWind (Tailwind для RN) — але вбудований StyleSheet залишається стандартом для ядра.

Історія та еволюція

У перших версіях React Native (2015) стилі задавалися виключно inline-об'єктами. StyleSheet.create з'явився в RN 0.4 як оптимізація. Концепція взята з CSS: відокремте стилі від логіки для читабельності та продуктивності. З роками API розширився: додалися absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs inline-стилі

Різниця між StyleSheet.create та inline-стилями критично важлива для продуктивності. Inline-стиль — звичайний JavaScript-об'єкт, який створюється при кожному рендері компонента. StyleSheet.create — об'єкт, що створюється один раз при завантаженні модуля та перетворюється на числовий ID.

При передачі inline-стилю React Native кожного разу відправляє весь об'єкт через міст JavaScript-Native. Для компонента зі складними стилями це десятки властивостей, що передаються при кожному рендері. StyleSheet.create передає лише число-ідентифікатор, знижуючи навантаження на міст.

// StyleSheet.create — оптимізований підхід
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline-стиль — створює новий об'єкт при кожному рендері
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Коли використовувати inline: для динамічних стилів, що залежать від стану (pressed, selected, active). Для статичних стилів завжди використовуйте StyleSheet.create. Правило: статика → create, динаміка → inline-функція.

Flexbox верстка через StyleSheet

Flexbox — єдиний механізм верстки в React Native (CSS Grid не підтримується, float відсутній). StyleSheet.create використовується для опису flex-контейнерів та їх дочірніх елементів. Основні властивості: flex (коефіцієнт заповнення), flexDirection (row | column), justifyContent, alignItems.

За замовчуванням flexDirection в React Native — column (в CSS — row). Це перше, що потрібно запам'ятати при переході з веб-розробки. Всі View за замовчуванням є flex-контейнерами. Для центрування елемента використовуйте 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',
  },
});

Важливо: в React Native всі розміри задаються без одиниць (просто число). Відсотки працюють, але тільки для width та height відносно батька. margin та padding приймають числа. Для адаптивності використовуйте flex замість відсотків — це надійніше на різних екранах.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API включає кілька методів окрім create. StyleSheet.flatten об'єднує масив стилів в один об'єкт — корисно для композиції та передачі стилів у сторонні компоненти. StyleSheet.hairlineWidth повертає мінімальну видиму ширину лінії на пристрої.

StyleSheet.absoluteFill — попередньо визначений стиль { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Використовується для overlay-шарів, модальних вікон та абсолютного позиціонування на весь екран. StyleSheet.absoluteFillObject — те саме, але у вигляді об'єкта для розширення.

// flatten — об'єднання стилів
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 — мінімальна лінія
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth корисний для роздільників та меж — він завжди виглядає як 1 фізичний піксель незалежно від щільності екрана. На Retina-дисплеях це 0.5 логічних пункту, на звичайних — 1 пункт. Не використовуйте hairlineWidth для елементів, які повинні бути строго визначеного розміру.

Адаптивна верстка з Dimensions API

Dimensions API використовується разом з StyleSheet для адаптивної верстки під різні розміри екрана. Dimensions.get('window') повертає ширину та висоту вікна. Для реактивного оновлення при повороті екрана використовуйте хук useWindowDimensions з React Native.

Хоча StyleSheet.create не підтримує медіа-запити як CSS, ви можете обчислювати значення на основі Dimensions всередині create або використовувати динамічні стилі через функцію. Для breakpoints створюйте окремі стилі під різні діапазони ширини.

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 автоматично оновлюється при повороті екрана та зміні розміру вікна на планшетах з Split View. Для SSR (React Native Web) переконайтеся, що Dimensions.get викликається після монтування компонента, щоб уникнути розбіжностей між сервером та клієнтом.

Організація стилів у проекті

Організація StyleSheet в проекті впливає на підтримуваність та перевикористання коду. Три підходи: локальні стилі всередині компонента (styles.js поруч з компонентом), глобальні стилі (theme.js з константами кольорів, відступів, типографіки) та модульні стилі через композицію.

Рекомендована структура: theme.js з константами кольорів, розмірів та типографіки; Component.styles.js поруч з кожним компонентом для його специфічних стилів; StyleSheet.flatten для комбінації базових та специфічних стилів. Для великих проектів використовуйте Design System з генерацією теми.

// theme.js — глобальні константи
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',
  },
});

Переваги модульної організації: єдине джерело правди для кольорів та відступів, спрощення рефакторингу (змінили primary — оновилися всі кнопки), перевикористання стилів через flatten, читабельність та передбачуваність коду. Для TypeScript-проектів додайте типи для теми через declare module.