Breakpoints | 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).
Breakpoints
Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.
NativeBase provides these default breakpoints and you can update with using extendTheme.
Copy
breakpoints = {
base: 0,
sm: 480,
md: 768,
lg: 992,
xl: 1280,
};
useBreakpointValue is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.
Copy
import React from 'react';
import { Box, useBreakpointValue } from 'native-base';
export default () => {
const color = useBreakpointValue({
base: 'red.200',
sm: 'blue.200',
md: 'blue.200',
});
return (
<Box bg={color} w={'100px'}>
This is a box
</Box>
);
};
Nativebase logo
MadeWithNativeBase