Responsive | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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