For responsive layouts – e.g. a grid view with a different number of columns on tablet vs. phone, or reacting to screen rotation – React Native needs to know the current window size. That's provided by the Dimensions API and the useWindowDimensions hook.

1. Description

Dimensions.get('window') returns width/height ONCE – if the size changes (rotation, tablet split-screen), this value does NOT update automatically. The useWindowDimensions() hook solves exactly that: it returns reactive values that automatically trigger a re-render on every change.

2. Short example

import { useWindowDimensions } from 'react-native';

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

3. Complete project: a responsive grid

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

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

const CARDS = Array.from({ length: 12 }, (_, i) => ({ id: String(i), title: `Card ${i + 1}` }));

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

  // Wider window (landscape/tablet) -> more columns
  const columnCount = width >= 700 ? 4 : width >= 500 ? 3 : 2;
  const cardWidth = width / columnCount - 24;

  return (
    <View style={styles.container}>
      <Text style={styles.info}>
        Window: {Math.round(width)} × {Math.round(height)} — {columnCount} columns
      </Text>
      <FlatList
        key={columnCount} // FlatList requires a new key when numColumns changes
        data={CARDS}
        numColumns={columnCount}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.list}
        renderItem={({ item }) => (
          <View style={[styles.card, { width: cardWidth }]}>
            <Text>{item.title}</Text>
          </View>
        )}
      />
    </View>
  );
}

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

4. Explanation

• useWindowDimensions() instead of Dimensions.get('window') – the hook automatically subscribes/unsubscribes to size changes, no manual Dimensions.addEventListener('change', ...)/removeEventListener in a useEffect needed.
• key={{columnCount}} on the FlatList – React Native's FlatList doesn't support live changes of numColumns; a new key forces React to recreate the list entirely whenever the column count changes.
• The width thresholds (>= 700, >= 500) are the direct equivalent of CSS media queries on the web – React Native has no built-in media query system, this logic has to be rebuilt manually in JavaScript.
• cardWidth = width / columnCount - 24 – the card splits the available width by the column count, minus a margin for the gaps between cards.

5. Outputs