Skip to main content

Responsive Design

In WaveMaker, responsive design with layouts means building React Native apps whose UI adapts across phone and tablet widths and orientations without maintaining separate projects for each size.

What is responsive design in WaveMaker?​

Responsive design ensures that:

  • The UI adjusts smoothly when the viewport width or orientation changes
  • Content can rearrange, resize, or show and hide based on device class or breakpoint
  • Users get a consistent experience on small phones, large phones, and tablets

Device visibility per component​

WaveMaker provides device-based visibility in Studio.

For each widget, the Device tab lets you:

  • Show the widget only for selected screen sizes or breakpoints
  • Hide the widget for sizes where it does not fit the layout
  • Place alternative widgets for different widths on the same page (for example, a compact row on narrow widths and a wider row on tablet)

This is useful when:

  • A secondary toolbar or chip row should appear only on tablet widths
  • A bottom sheet or condensed block should appear only on phone widths
  • A list or grid should use different density or columns at xs / sm / md / lg breakpoints

Auto Layout for responsive alignment​

WaveMaker Auto Layout on wm-container gives you a structured way to align and space children as the screen changes, using the Layout section in the Properties panel instead of tuning every margin by hand. For full control descriptions, see Auto Layout.

Configure containers with properties such as:

  • Direction: Row (default) or Column, plus Wrap when children should move to the next line when space runs out
  • Width and Height: Fill, Hug, or a user-defined size so regions grow or shrink with available space
  • Clip content and Overflow: clip to bounds and choose No scrolling or Scroll on mobile (see Auto Layout for scrollable deprecation)
  • Alignment: nine positions from a 3×3 grid (default Top Left): Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, Bottom Right
  • Gap: a number, Auto, or column gap where supported; with Gap set to Auto, available alignment options depend on Direction (for example, with Row and Auto gap, only vertical alignment choices—top, center, bottom—are offered)
  • Padding: horizontal and vertical pairs, or independent values on all four sides
  • Position: Relative (default), Absolute, or Fixed — use with Position value for overlays and anchored regions
  • Z-Index: a numeric stacking order so layers sit above or below siblings
  • Position value: top, right, bottom, and left offsets when Position is not Relative

Together, device visibility and Auto Layout help lists, forms, and panels stay readable from narrow phones up to tablet layouts with minimal duplicated markup.