Version: 3.0.6

Responsive

NativeBase V3 supports responsive styles out of the box. Instead of manually adding responsiveness to your apps, NativeBase V3 allows you provide object and array values to add responsive styles.

Responsive syntax relies on the breakpoints defined in the theme object.

const breakpoints = {
base: 0,
sm: 480,
md: 768,
lg: 992,
xl: 1280,
};

To make styles responsive, you can use either the array or object syntax.

The Array syntax#

All style props that arrays as values for responsive styles.

For Example to make a Box width or w responsive using the array syntax, here's what you need to do:

The Object syntax#

You can also define responsive values with breakpoint aliases in an object. Any undefined alias key will define the base, non-responsive value.

For Example to make a Text fontSize responsive using the object syntax, here's what you need to do:

Demo#

Here's a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens.