Breakpoints

A Breakpoint refers to a specific device width, or range of widths, to which styling can be applied. Each Breakpoint can have it's own independent styling or inherit styles from a smaller breakpoint

📘

Best Practice

It is recommended to start developing the app at the Mobile breakpoint and make changes to component styles at other Breakpoints as needed to make the design look better across different breakpoints.

Breakpoint Switcher

The Breakpoint Switcher is located at the top of the panel on the right side of the Builder. This lets you switch the Device Preview between Mobile, Tablet, Laptop, Desktop, Big Screen.

Breakpoint Styles

Notice how the value of the Font Size prop for the selected Text component changes as I move up the breakpoints.

This works with ALL style props! They have their own breakpoint-specific styling which lets you really dial in your design to look just right on the most common screen sizes across Web, iOS, and Android. Super cool.

Component styles are inherited starting from the Mobile breakpoint and applied automatically to each larger breakpoint. That means that style props you set while at the Mobile breakpoint will be applied to larger breakpoints unless those styles are explicitly set on the other breakpoints. This is also true for the other breakpoints - their styles are applied to larger breakpoints automatically. So, you'll generally want to start at Mobile and adapt your design for each subsequent breakpoint.

You can click the label to see info about where the style is coming from and reset it if needed.

A yellow label indicates that a style prop value is being set directly on the selected component. A purple label tells you that the style value is coming from the Stylesheet that's applied to the selected component.

When you see a label with just a yellow or purple outline, that is letting you know that the style prop value is coming from a breakpoint other than the one you're currently previewing.

Breakpoint Variables

There is also a few System Variables for breakpoints so that you can conditionally display components or perform other logic based on which breakpoint your app is being viewed at.

Available Breakpoints