Skip to main content

Images, Safe Areas, and Platform Adaptation

This group brings together the components and concerns that shape how the app fits real devices. Many production bugs happen here: clipped headers, broken keyboard layouts, image overflow, and assumptions that only hold on one platform.

Safe area handling​

React Native applications should treat device insets as a layout system concern, not as one-off padding fixes.

Teams should standardize:

  • screen container primitives with safe-area awareness
  • behavior for headers, bottom actions, and tab bars
  • full-bleed media treatment
  • modal and sheet inset handling

If safe areas are not centralized, screens will drift visually across devices.

Keyboard-aware surfaces​

Forms and chat-like surfaces often need keyboard-aware behavior.

The team should define:

  • which screens shift versus resize
  • how fixed bottom actions behave
  • how multiline input expands
  • whether scroll containers or keyboard-avoidance wrappers own the behavior

This is a layout architecture concern, not just an input concern.

Image adaptation​

Images need consistent handling for:

  • aspect ratio
  • crop behavior
  • placeholders
  • failure fallbacks
  • bandwidth and caching considerations

Do not let each feature choose its own image-loading semantics.

Platform adaptation​

React Native lets teams share most UI, but not all UI should be identical. Define when to adapt for:

  • navigation conventions
  • system affordances
  • text scaling behavior
  • permission flows
  • platform-specific settings surfaces

The rule should be product-appropriate consistency, not forced sameness.

Accessibility adaptation​

Also account for:

  • dynamic type or text scaling
  • reduced motion or animation expectations
  • high-contrast needs
  • larger touch targets

These concerns often surface first in platform-adaptation work.

Team rule​

Layout edge handling should live in app infrastructure, not in isolated screen fixes. The more often the team repeats safe-area or keyboard code, the more likely the product will break at device boundaries.

Use this page with Styling and Layout and Core Primitives.