Skip to main content

Styling and Layout

UI systems in React Native should be built with the same discipline as API layers. The job is to make visual decisions repeatable, not to let every screen invent its own spacing, typography, and feedback patterns.

Start with design tokens​

Document tokens for:

  • Color roles, not just raw hex values.
  • Spacing scales.
  • Radius values.
  • Elevation and shadow usage.
  • Typography size, weight, and line height.

Tokens make light and dark themes, platform differences, and redesigns easier to manage later.

Layout rules​

Prefer composable layout primitives​

Use reusable stack, row, inset, surface, and screen containers rather than hand-writing layout structure in every feature.

Respect safe areas​

Device cutouts, home indicators, and gesture areas should be handled by default in shared screen shells, not ad hoc per screen.

Design for narrow widths first​

Even when tablet support matters, most mobile surfaces should begin from the narrow layout. Scale up intentionally rather than shrinking desktop-style composition into a phone.

Styling approaches​

Good teams choose one primary styling approach and document it. The key is consistency, not ideology. Regardless of the library or pattern:

  • Keep tokens centralized.
  • Avoid inline objects that change every render when not necessary.
  • Standardize theme access.
  • Keep animation and gesture code separate from static styling.

Accessibility requirements​

Every UI system should document:

  • Text contrast rules.
  • Minimum touch target sizes.
  • Screen reader labels for icon-only actions.
  • Focus order and keyboard interaction where relevant.
  • Motion reduction expectations for animations.

Accessibility should be part of the component contract, not a final QA task.

Lists, forms, and empty states​

These patterns deserve shared components early:

  • Loading placeholders.
  • Error boundaries or error surfaces.
  • Empty states with action guidance.
  • Form fields with validation affordances.
  • List cells with clear spacing and press feedback.

Platform adaptation​

Use platform-specific behavior only when it improves usability. Examples include:

  • Different haptic or feedback expectations.
  • Platform-native modal presentation styles.
  • Typography or spacing adjustments where the operating systems differ noticeably.

Animation guidance​

Use motion to clarify transitions, hierarchy, and feedback. Avoid animation that exists only to decorate the UI and increases render cost without helping the user understand state changes.

Team rule​

If the same visual decision appears three times, promote it into the design system. Repetition without abstraction is how React Native codebases become inconsistent.

Continue to Navigation to define movement through the app.