Layout responds correctly to all supported screen sizes

Hardcoding widths above 320pt cuts off content on iPhone SE and any small-screen Android — users see clipped headlines, overlapping buttons, and horizontal scroll on what should be a vertical feed. On the large end, 430pt+ devices get awkwardly stretched layouts with orphaned white space. The App Store SE-class device tests and Google Play pre-launch reports both flag these as blocking issues, and review screenshots fail silently when text overflows.

Replace every fixed width with flex sizing and read viewport dimensions via useWindowDimensions to branch layout at breakpoints:

import { useWindowDimensions } from 'react-native';
function Screen() {
  const { width } = useWindowDimensions();
  const cols = width > 600 ? 3 : 2;
  return <FlatList numColumns={cols} key={cols} data={items} renderItem={renderItem} />;
}

Pass key={cols} so the list remounts when the column count changes.

• ID: mobile-ux-patterns.layout-safe-areas.responsive-layout

• Severity: critical

• What to look for: Examine screen designs for at least 3 device widths: small (320-375pt, iPhone SE), medium (390pt, iPhone 14), large (430pt+, iPhone 14 Plus/tablet). Count all fixed-width containers and check whether any exceed the smallest supported width.

• Pass criteria: Layout is responsive to device width variations using flex-based or percentage-based sizing. No content is cut off or requires horizontal scrolling on portrait phones at 320pt width. No fixed-width containers exceed 320pt. Text is readable on all screen sizes.

• Fail criteria: Layout breaks on small or large screens. Content is cut off, text is too small to read, or horizontal scrolling is required. Any fixed-width container exceeds 320pt.

• Skip (N/A) when: The app is portrait-only and targets a single known device width (extremely rare for public apps).

• Detail on fail: Identify screens that break. Quote the actual width values found. Example: "Header text is cut off on iPhone SE (375pt width). Tab bar labels wrap awkwardly on iPhone 14 Plus (430pt width)." or "FlatList items are fixed width (320pt) causing overflow on large screens."

• Remediation: Use Dimensions API or useWindowDimensions hook for responsive design:

  import { useWindowDimensions } from 'react-native';
  
  function ResponsiveScreen() {
    const { width } = useWindowDimensions();
    const itemsPerRow = width > 600 ? 3 : 2;
  
    return (
      <FlatList
        data={items}
        numColumns={itemsPerRow}
        renderItem={({ item }) => <Item />}
        key={itemsPerRow}
      />
    );
  }
  

  Use flex-based layouts instead of fixed widths:

  <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
    <View style={{ flex: 1, marginRight: 8 }}>{/* Left column */}</View>
    <View style={{ flex: 1 }}>{/* Right column */}</View>
  </View>