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 style — креира нови објекат при сваком рендеру
<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

API StyleSheet укључује неколико метода осим 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 не подржава media упите као 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.