Skip to main content

Core Primitives

Most React Native screens are built from a small set of primitives. If a team uses them well, the rest of the UI system stays predictable. If a team uses them casually, every higher-level abstraction becomes harder to maintain.

View​

View is the default layout container. Use it for:

  • grouping UI into layout regions
  • applying spacing, borders, backgrounds, and positioning
  • composing reusable screen sections

Use View when you need structure, not semantics. It does not automatically communicate interactive or text meaning.

Best patterns​

  • Keep layout containers shallow where possible.
  • Use reusable layout primitives for common stacks, insets, and panels.
  • Keep positioning logic close to layout components rather than scattering it across child nodes.

Common mistakes​

  • deeply nesting View wrappers for spacing alone
  • using layout wrappers instead of building small reusable primitives
  • mixing structural layout with domain logic in one large component

Text​

Text is not just a label. It is the primitive that establishes readable, stylable, accessible copy across the app.

Use Text for:

  • titles and body copy
  • inline emphasis
  • accessible labels
  • constrained text layout inside cards, rows, and headers

Best patterns​

  • Create typography primitives like Heading, BodyText, and Caption.
  • Standardize line height, weight, and color through tokens.
  • Be explicit about truncation with numberOfLines when the layout depends on it.

Common mistakes​

  • applying typography styles ad hoc on every screen
  • letting long text overflow in cards and list rows
  • forgetting that text layout behaves differently from web block layout

Image​

Image is simple at the API level but expensive in real products if left unmanaged.

Use it for:

  • local product assets
  • remote thumbnails and content imagery
  • avatar and illustration surfaces

Production concerns​

  • define placeholder behavior for slow networks
  • standardize aspect ratio handling
  • avoid layout shift by reserving dimensions
  • be intentional about caching strategy

Common mistakes​

  • loading large remote images into small surfaces
  • leaving aspect ratio implicit
  • forgetting error or fallback rendering

Text plus View composition​

Most design-system work begins here. A healthy composition pattern looks like:

  • View defines surface, spacing, and arrangement
  • Text defines readable content and hierarchy
  • Image is opt-in and bounded

If teams jump to overly abstract components before understanding these boundaries, the abstraction layer becomes harder to debug.

Accessibility note​

Even at the primitive level, define:

  • which text is meant to be read by assistive technology
  • which decorative images should be hidden from accessibility tools
  • which containers are purely structural versus meaningful

Team rule​

The design system should wrap these primitives lightly, not obscure them completely. Engineers still need to know what the underlying building block actually does.

Continue with Text Input and Form Controls and Touchables and Pressable.