StyleSheet — wat is het, stijlen maken in React Native

Wat is StyleSheet?

StyleSheet — ingebouwde API van React Native voor het definiëren van componentstijlen. In tegenstelling tot CSS in webontwikkeling gebruikt RN JavaScript-objecten om stijlen te beschrijven. StyleSheet.create — de belangrijkste methode die een object met stijlen ontvangt en een object met numerieke identificaties retourneert.

StyleSheet maakt deel uit van de kern van React Native en vereist geen installatie van extra pakketten. Volgens Meta-gegevens (2026) gebruikt 95% van de React Native-projecten StyleSheet.create voor statische stijlen. Alternatieven: styled-components, Emotion, NativeWind (Tailwind voor RN) — maar de ingebouwde StyleSheet blijft de standaard voor de kern.

Geschiedenis en evolutie

In de eerste versies van React Native (2015) werden stijlen uitsluitend gedefinieerd via inline-objecten. StyleSheet.create verscheen in RN 0.4 als optimalisatie. Het concept is afkomstig van CSS: scheid stijlen van logica voor leesbaarheid en prestaties. In de loop der jaren is de API uitgebreid: absoluteFill, hairlineWidth, flatten zijn toegevoegd.

StyleSheet.create vs inline-stijlen

Het verschil tussen StyleSheet.create en inline-stijlen is cruciaal voor de prestaties. Inline-stijl — een gewoon JavaScript-object dat bij elke render van de component wordt gemaakt. StyleSheet.create — een object dat eenmalig wordt gemaakt bij het laden van de module en wordt omgezet in een numeriek ID.

Bij het doorgeven van een inline-stijl stuurt React Native elke keer het hele object via de JavaScript-Native-brug. Voor een component met complexe stijlen zijn dit tientallen eigenschappen die bij elke render worden doorgegeven. StyleSheet.create geeft alleen een numerieke identificatie door, waardoor de belasting van de brug wordt verminderd.

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

// Inline style — maakt bij elke render een nieuw object
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Wanneer inline gebruiken: voor dynamische stijlen die afhankelijk zijn van status (pressed, selected, active). Gebruik voor statische stijlen altijd StyleSheet.create. Regel: statisch → create, dynamisch → inline-functie.

Flexbox-lay-out via StyleSheet

Flexbox — het enige lay-outmechanisme in React Native (CSS Grid wordt niet ondersteund en float bestaat niet). StyleSheet.create wordt gebruikt voor het beschrijven van flex-containers en hun onderliggende elementen. Belangrijkste eigenschappen: flex (vulcoëfficiënt), flexDirection (row | column), justifyContent, AlignItems.

Standaard is flexDirection in React Native column (in CSS — row). Dit is het eerste wat u moet onthouden bij de overstap van webontwikkeling. Alle View zijn standaard flex-containers. Gebruik voor het centreren van een element 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',
  },
});

Belangrijk: in React Native worden alle afmetingen zonder eenheden opgegeven (gewoon een getal). Percentages werken, maar alleen voor width en height ten opzichte van de ouder. margin en padding accepteren getallen. Gebruik voor aanpasbaarheid flex in plaats van percentages — dit is betrouwbaarder op verschillende schermen.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API bevat verschillende methoden naast create. StyleSheet.flatten combineert een reeks stijlen in één object — nuttig voor compositie en het doorgeven van stijlen aan externe componenten. StyleSheet.hairlineWidth retourneert de minimale zichtbare lijndikte op het apparaat.

StyleSheet.absoluteFill — een vooraf gedefinieerde stijl { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Wordt gebruikt voor overlay-lagen, modale vensters en absolute positionering over het hele scherm. StyleSheet.absoluteFillObject — hetzelfde, maar in de vorm van een object voor uitbreiding.

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

StyleSheet.hairlineWidth is handig voor scheidingstekens en randen — het ziet er altijd uit als 1 fysieke pixel, ongeacht de schermdichtheid. Op Retina-schermen is dit 0.5 logische punten, op gewone — 1 punt. Gebruik hairlineWidth niet voor elementen die een strikt gedefinieerde grootte moeten hebben.

Responsieve lay-out met Dimensions API

Dimensions API wordt samen met StyleSheet gebruikt voor een responsieve lay-out voor verschillende schermformaten. Dimensions.get('window') retourneert de breedte en hoogte van het venster. Gebruik voor reactieve updates bij het draaien van het scherm de hook useWindowDimensions van React Native.

Hoewel StyleSheet.create geen media queries ondersteunt zoals CSS, kunt u waarden berekenen op basis van Dimensions binnen create of dynamische stijlen gebruiken via een functie. Maak voor breekpunten aparte stijlen voor verschillende breedtebereiken.

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 wordt automatisch bijgewerkt bij het draaien van het scherm en het wijzigen van de venstergrootte op tablets met Split View. Zorg ervoor dat Dimensions.get wordt aangeroepen na het monteren van de component voor SSR (React Native Web) om discrepanties tussen server en client te voorkomen.

Organisatie van stijlen in het project

Organisatie van StyleSheet in het project beïnvloedt de onderhoudbaarheid en herbruikbaarheid van code. Drie benaderingen: lokale stijlen binnen de component (styles.js naast de component), globale stijlen (theme.js met constanten voor kleuren, marges, typografie) en modulaire stijlen via compositie.

Aanbevolen structuur: theme.js met constanten voor kleuren, afmetingen en typografie; Component.styles.js naast elke component voor zijn specifieke stijlen; StyleSheet.flatten voor combinatie van basis- en specifieke stijlen. Gebruik voor grote projecten een Design System met themageneratie.

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

Voordelen van modulaire organisatie: enkele bron van waarheid voor kleuren en marges, vereenvoudiging van refactoring (u wijzigt primary — alle knoppen worden bijgewerkt), herbruikbaarheid van stijlen via flatten, leesbaarheid en voorspelbaarheid van code. Voeg voor TypeScript-projecten typen toe voor het thema via declare module.