Für responsive Layouts – z.B. eine Rasteransicht mit unterschiedlich vielen Spalten auf Tablet vs. Handy, oder eine Reaktion auf Bildschirmdrehung – muss React Native die aktuelle Fenstergröße kennen. Dafür gibt es die Dimensions-API und den Hook useWindowDimensions.

1. Beschreibung

Dimensions.get('window') liefert EINMALIG Breite/Höhe – ändert sich die Größe (Drehung, Split-Screen auf Tablets), aktualisiert sich dieser Wert NICHT automatisch. Der Hook useWindowDimensions() löst genau das: er liefert reaktive Werte, die bei jeder Änderung automatisch einen Re-Render auslösen.

2. Kurzes Beispiel

import { useWindowDimensions } from 'react-native';

function MeineKomponente() {
  const { width, height } = useWindowDimensions();
  return <Text>{width} × {height}</Text>;
}

3. Komplettes Projekt: Responsives Raster

npx create-expo-app window-dimensions-demo
cd window-dimensions-demo

import { View, Text, FlatList, useWindowDimensions, StyleSheet } from 'react-native';

const KARTEN = Array.from({ length: 12 }, (_, i) => ({ id: String(i), titel: `Karte ${i + 1}` }));

export default function App() {
  const { width, height } = useWindowDimensions();

  // Breiteres Fenster (Querformat/Tablet) -> mehr Spalten
  const spaltenAnzahl = width >= 700 ? 4 : width >= 500 ? 3 : 2;
  const kartenBreite = width / spaltenAnzahl - 24;

  return (
    <View style={styles.container}>
      <Text style={styles.info}>
        Fenster: {Math.round(width)} × {Math.round(height)} — {spaltenAnzahl} Spalten
      </Text>
      <FlatList
        key={spaltenAnzahl} // FlatList erfordert einen neuen Key bei numColumns-Wechsel
        data={KARTEN}
        numColumns={spaltenAnzahl}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.liste}
        renderItem={({ item }) => (
          <View style={[styles.karte, { width: kartenBreite }]}>
            <Text>{item.titel}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
  info: { textAlign: 'center', marginBottom: 12, color: '#6b7280' },
  liste: { gap: 8 },
  karte: { backgroundColor: '#f3f4f6', height: 80, borderRadius: 8, alignItems: 'center', justifyContent: 'center', marginRight: 8 },
});

4. Erklärung

• useWindowDimensions() statt Dimensions.get('window') – der Hook meldet sich automatisch bei Größenänderungen ab/an, kein manuelles Dimensions.addEventListener('change', ...)/removeEventListener in einem useEffect nötig.
• key={{spaltenAnzahl}} auf der FlatList – React Natives FlatList unterstützt keine Live-Änderung von numColumns; ein neuer key zwingt React, die Liste komplett neu zu erstellen, sobald sich die Spaltenzahl ändert.
• Die Breiten-Schwellenwerte (>= 700, >= 500) sind das direkte Äquivalent zu CSS-Media-Queries im Web – React Native hat kein eingebautes Media-Query-System, diese Logik muss manuell in JavaScript nachgebaut werden.
• kartenBreite = width / spaltenAnzahl - 24 – die Karte teilt sich die verfügbare Breite durch die Spaltenanzahl, abzüglich Rand für die Abstände zwischen den Karten.

5. Ausgaben