StyleSheet — ce este, crearea stilurilor în React Native

Ce este StyleSheet?

StyleSheet — API încorporat React Native pentru definirea stilurilor componentelor. Spre deosebire de CSS în dezvoltarea web, RN utilizează obiecte JavaScript pentru descrierea stilurilor. StyleSheet.create — metoda cheie care primește un obiect cu stiluri și returnează un obiect cu identificatori numerici.

StyleSheet face parte din nucleul React Native și nu necesită instalarea de pachete suplimentare. Conform datelor Meta (2026), 95% dintre proiectele React Native utilizează StyleSheet.create pentru stiluri statice. Alternative: styled-components, Emotion, NativeWind (Tailwind pentru RN) — dar StyleSheet încorporat rămâne standardul pentru nucleu.

Istorie și evoluție

În primele versiuni ale React Native (2015), stilurile erau definite exclusiv prin obiecte inline. StyleSheet.create a apărut în RN 0.4 ca optimizare. Conceptul este preluat din CSS: separați stilurile de logică pentru lizibilitate și performanță. De-a lungul anilor, API-ul s-a extins: s-au adăugat absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs stiluri inline

Diferența dintre StyleSheet.create și stilurile inline este critică pentru performanță. Stilul inline — un obiect JavaScript obișnuit, creat la fiecare randare a componentei. StyleSheet.create — un obiect creat o singură dată la încărcarea modulului și transformat într-un ID numeric.

La transmiterea unui stil inline, React Native trimite de fiecare dată întregul obiect prin puntea JavaScript-Native. Pentru o componentă cu stiluri complexe, aceasta înseamnă zeci de proprietăți transmise la fiecare randare. StyleSheet.create transmite doar un identificator numeric, reducând sarcina punții.

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

// Inline style — creează un obiect nou la fiecare randare
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Când să folosiți inline: pentru stiluri dinamice dependente de stare (pressed, selected, active). Pentru stiluri statice utilizați întotdeauna StyleSheet.create. Regula: statică → create, dinamică → funcție inline.

Aspect Flexbox prin StyleSheet

Flexbox — singurul mecanism de aspect în React Native (CSS Grid nu este suportat, iar float lipsește). StyleSheet.create este utilizat pentru descrierea containerelor flex și a elementelor lor copil. Proprietăți principale: flex (coeficient de umplere), flexDirection (row | column), justifyContent, AlignItems.

În mod implicit, flexDirection în React Native este column (în CSS — row). Acesta este primul lucru de reținut la trecerea de la dezvoltarea web. Toate View-urile sunt în mod implicit containere flex. Pentru centrarea unui element, utilizați 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',
  },
});

Important: în React Native, toate dimensiunile se specifică fără unități (doar un număr). Procentele funcționează, dar numai pentru width și height relativ la părinte. margin și padding acceptă numere. Pentru adaptabilitate, utilizați flex în loc de procente — este mai sigur pe diferite ecrane.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

API StyleSheet include mai multe metode în afară de create. StyleSheet.flatten combină un array de stiluri într-un singur obiect — util pentru compoziție și transmiterea stilurilor către componente terțe. StyleSheet.hairlineWidth returnează lățimea minimă vizibilă a unei linii pe dispozitiv.

StyleSheet.absoluteFill — un stil predefinit { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Utilizat pentru straturi de suprapunere, ferestre modale și poziționare absolută pe tot ecranul. StyleSheet.absoluteFillObject — același lucru, dar sub formă de obiect pentru extindere.

// flatten — îmbinarea stilurilor
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 — linie minimală
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth este util pentru separatoare și margini — arată întotdeauna ca 1 pixel fizic, indiferent de densitatea ecranului. Pe ecranele Retina, aceasta este 0.5 puncte logice, pe cele obișnuite — 1 punct. Nu utilizați hairlineWidth pentru elemente care trebuie să aibă o dimensiune strict definită.

Aspect adaptiv cu Dimensions API

Dimensions API este utilizat împreună cu StyleSheet pentru aspect adaptiv la diferite dimensiuni de ecran. Dimensions.get('window') returnează lățimea și înălțimea ferestrei. Pentru actualizare reactivă la rotirea ecranului, utilizați hook-ul useWindowDimensions din React Native.

Deși StyleSheet.create nu suportă media queries ca CSS, puteți calcula valori pe baza Dimensions în interiorul create sau utiliza stiluri dinamice printr-o funcție. Pentru puncte de întrerupere, creați stiluri separate pentru diferite game de lățime.

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 actualizează automat la rotirea ecranului și la modificarea dimensiunii ferestrei pe tablete cu Split View. Pentru SSR (React Native Web), asigurați-vă că Dimensions.get este apelat după montarea componentei pentru a evita discrepanțe între server și client.

Organizarea stilurilor în proiect

Organizarea StyleSheet în proiect influențează mentenabilitatea și reutilizarea codului. Trei abordări: stiluri locale în interiorul componentei (styles.js lângă componentă), stiluri globale (theme.js cu constante de culori, spațieri, tipografie) și stiluri modulare prin compoziție.

Structura recomandată: theme.js cu constante de culori, dimensiuni și tipografie; Component.styles.js lângă fiecare componentă pentru stilurile sale specifice; StyleSheet.flatten pentru combinarea stilurilor de bază și specifice. Pentru proiecte mari, utilizați un Design System cu generare de temă.

// theme.js — constante globale
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',
  },
});

Avantajele organizării modulare: sursă unică de adevăr pentru culori și spațieri, simplificarea refactorizării (ați schimbat primary — s-au actualizat toate butoanele), reutilizarea stilurilor prin flatten, lizibilitatea și predictibilitatea codului. Pentru proiecte TypeScript, adăugați tipuri pentru temă prin declare module.