StyleSheet — cos'è, creazione di stili in React Native

Cos'è StyleSheet?

StyleSheet — un'API integrata di React Native per definire stili dei componenti. A differenza del CSS nello sviluppo web, RN usa oggetti JavaScript per descrivere gli stili. StyleSheet.create — il metodo chiave — accetta un oggetto stile e restituisce un oggetto con identificatori numerici.

StyleSheet fa parte del core di React Native e non richiede l'installazione di pacchetti aggiuntivi. Secondo Meta (2026), il 95% dei progetti React Native usa StyleSheet.create per stili statici. Alternative: styled-components, Emotion, NativeWind (Tailwind per RN) — ma lo StyleSheet integrato rimane lo standard per il core.

Storia ed evoluzione

Nelle prime versioni di React Native (2015), gli stili erano definiti esclusivamente come oggetti inline. StyleSheet.create è apparso in RN 0.4 come ottimizzazione. Il concetto è preso dal CSS: separa gli stili dalla logica per leggibilità e performance. Negli anni, l'API si è espansa: sono stati aggiunti absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs stili inline

La differenza tra StyleSheet.create e gli stili inline è critica per le performance. Uno stile inline è un semplice oggetto JavaScript creato a ogni rendering del componente. StyleSheet.create — un oggetto creato una volta durante il caricamento del modulo e convertito in un ID numerico.

Passando uno stile inline, React Native invia l'intero oggetto attraverso il ponte JavaScript-Native ogni volta. Per un componente con stili complessi, ciò significa dozzine di proprietà trasferite a ogni rendering. StyleSheet.create passa solo un identificatore numerico, riducendo il carico del ponte.

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

// Stile inline — crea un nuovo oggetto a ogni rendering
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Quando usare inline: per stili dinamici che dipendono dallo stato (premuto, selezionato, attivo). Per stili statici, usa sempre StyleSheet.create. Regola: statico → create, dinamico → funzione inline.

Layout Flexbox con StyleSheet

Flexbox — l'unico meccanismo di layout in React Native (CSS Grid non è supportato, float è assente). StyleSheet.create viene usato per descrivere contenitori flex e i loro elementi figli. Proprietà principali: flex (coefficiente di riempimento), flexDirection (row | column), justifyContent, alignItems.

Di default, flexDirection in React Native è column (in CSS — row). Questa è la prima cosa da ricordare quando si passa dallo sviluppo web. Tutti i componenti View sono contenitori flex di default. Per centrare un elemento, usa 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',
  },
});

Importante: in React Native, tutte le dimensioni sono specificate senza unità (solo un numero). Le percentuali funzionano ma solo per larghezza e altezza relative al genitore. margin e padding accettano numeri. Per la reattività, usa flex invece delle percentuali — è più affidabile su schermi diversi.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API include diversi metodi oltre a create. StyleSheet.flatten unisce un array di stili in un singolo oggetto — utile per composizione e passaggio di stili a componenti di terze parti. StyleSheet.hairlineWidth restituisce la larghezza di linea minima visibile sul dispositivo.

StyleSheet.absoluteFill — uno stile predefinito { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Usato per livelli di overlay, finestre modali e posizionamento assoluto su tutto lo schermo. StyleSheet.absoluteFillObject — lo stesso ma come oggetto per estensione.

// flatten — unire stili
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 — linea minima
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth è utile per separatori e bordi — appare sempre come 1 pixel fisico indipendentemente dalla densità dello schermo. Su display Retina sono 0,5 punti logici, su normali — 1 punto. Non usare hairlineWidth per elementi che devono avere una dimensione strettamente specifica.

Layout responsive con Dimensions API

Dimensions API viene usata insieme a StyleSheet per layout responsive su diverse dimensioni dello schermo. Dimensions.get('window') restituisce larghezza e altezza della finestra. Per aggiornamenti reattivi alla rotazione dello schermo, usa l'hook useWindowDimensions di React Native.

Sebbene StyleSheet.create non supporti media query come CSS, puoi calcolare valori basati su Dimensions dentro create o usare stili dinamici tramite una funzione. Per i breakpoint, crea stili separati per diversi intervalli di larghezza.

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 si aggiorna automaticamente alla rotazione dello schermo e al ridimensionamento della finestra su tablet con Split View. Per SSR (React Native Web), assicurati che Dimensions.get venga chiamato dopo il montaggio del componente per evitare discrepanze tra server e client.

Organizzazione degli stili in un progetto

L'organizzazione di StyleSheet in un progetto influisce sulla manutenibilità e sul riutilizzo del codice. Tre approcci: stili locali dentro il componente (styles.js accanto al componente), stili globali (theme.js con costanti di colore, spaziatura, tipografia) e stili modulari tramite composizione.

Struttura raccomandata: theme.js con costanti di colore, dimensione e tipografia; Component.styles.js accanto a ogni componente per i suoi stili specifici; StyleSheet.flatten per combinare stili base e specifici. Per progetti grandi, usa un Design System con generazione di tema.

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

Vantaggi dell'organizzazione modulare: unica fonte di verità per colori e spaziature, refactoring semplificato (cambia primary — tutti i pulsanti si aggiornano), riutilizzo degli stili tramite flatten, leggibilità e prevedibilità del codice. Per progetti TypeScript, aggiungi tipi per il tema tramite declare module.