Responsive | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
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.
Copy
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:
Playground
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:
Playground
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.
Playground
Nativebase logo
MadeWithNativeBase