Responsive Layouts with Core React Native APIs

WHAT THIS TESTS Whether you can make layouts adapt using only core APIs and know how to react to live dimension changes.

A GOOD ANSWER COVERS Start with flexbox, which is the default layout system: use flex ratios, percentage widths, alignItems, justifyContent, and flexWrap so content distributes proportionally instead of at fixed sizes. For values that must depend on the actual viewport, use the useWindowDimensions hook, which returns width and height and re-renders the component when they change, including on rotation; this is preferred over Dimensions.get, which is a one-time snapshot, though Dimensions.addEventListener also works. Detect orientation by comparing width and height. Use SafeAreaView or safe-area insets so content avoids notches and the status bar, and use Platform.select for platform-specific spacing. PixelRatio helps when you need device-pixel precision. Structure styles by keeping static layout in StyleSheet and computing the few dimension-dependent values, such as a column count or item width, inside render from the current dimensions.

COMMON WRONG ANSWERS Hardcoding pixel widths that break on small or large screens. Calling Dimensions.get once at module load and never updating, so rotation does not re-layout. Forgetting safe areas and overlapping the notch. Reaching for a third-party library when core APIs suffice.

LIKELY FOLLOW-UPS Why useWindowDimensions is better than a static Dimensions snapshot. How to compute a responsive grid column count. Handling tablets versus phones with breakpoints.

ONE CONCRETE EXAMPLE A gallery reads width from useWindowDimensions, computes columns as two when width is below a breakpoint and four otherwise, and sets each item width to width divided by the column count. On rotation the hook re-renders and the grid reflows automatically, all wrapped in SafeAreaView.