What is the Dimensions API in React Native?

Answer

The Dimensions API provides the width and height of the device screen and window. Essential for responsive layouts that adapt to different screen sizes. Basic usage: import { Dimensions } from "react-native"; const { width, height } = Dimensions.get("window"); // App window const { width: screenWidth } = Dimensions.get("screen"); // Physical screen (includes status bar on Android) console.log(width, height); // e.g., 390, 844 (iPhone 14). window vs screen: window — the app's usable area (excludes status bar on Android, includes safe area insets calculation); screen — the full physical display dimensions. Use window for layout calculations. Problem: Dimensions is a snapshot at the time of call — doesn't update on orientation change automatically. useWindowDimensions hook (recommended): reactive — automatically updates when orientation changes or window resizes: import { useWindowDimensions } from "react-native"; function MyComponent() { const { width, height } = useWindowDimensions(); const isLandscape = width > height; return ( <View style={{ width: isLandscape ? width / 2 : width }}> <Text>{width} x {height}</Text> </View> ); }. PixelRatio: gets the pixel density ratio of the screen: import { PixelRatio } from "react-native"; PixelRatio.get(); // 2 on iPhone Retina (2x), 3 on Plus/Pro (3x) const pixelWidth = PixelRatio.roundToNearestPixel(100); // Round to nearest physical pixel for crisp rendering. Responsive design patterns: calculate percentages: const cardWidth = width * 0.9; or use libraries like react-native-responsive-screen.