What is the Dimensions API in React Native?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React Native development. It reveals whether you understand the building blocks that more complex concepts rely on.
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.
Pro Tip
Before answering, structure your response: one-line definition → real-world analogy → concrete example from a project. This makes even complex React Native answers easy to follow.