Responsive layout across form factors

WHAT THIS TESTS Whether you adapt layout based on measured screen dimensions and breakpoints rather than trying to infer form factor from the operating system, which cannot distinguish a phone from a tablet.

A GOOD ANSWER COVERS Form factor is about size, not OS, so you drive layout from dimensions. useWindowDimensions returns the current width and height and re-renders on change, including rotation, making it preferable to a one-time Dimensions.get call. You define breakpoints, for example treating width at or above roughly 600 to 768 as tablet-class, and switch layouts accordingly, such as a stacked list on phones and a side-by-side master-detail on tablets. Because the decision is width-based, the same code adapts an iPad, an Android tablet, a large phone in landscape, or a foldable, with no per-OS branching. You can layer in useSafeAreaInsets for notches and react to orientation since dimensions update on rotate.

COMMON WRONG ANSWERS Using Platform.OS to detect a tablet, which fails because both iPads and Android tablets exist; reading Dimensions once so the layout does not update on rotation; or hardcoding device models. Assuming pixel width equals points without accounting for density is another slip.

LIKELY FOLLOW-UPS Why is useWindowDimensions better than Dimensions.get for orientation changes? How do you choose breakpoints? How would you handle a foldable that changes size mid-session? How does this interact with safe-area insets?

ONE CONCRETE EXAMPLE const { width } = useWindowDimensions(); const isTablet = width >= 768; return isTablet ? <MasterDetail /> : <StackedList />; On an iPhone and most Android phones the stacked list shows; on an iPad or a 10-inch Android tablet the master-detail layout shows, and rotating a large device that crosses the threshold re-renders into the appropriate layout automatically.