Breakpoints | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
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 them by using extendTheme.
Copybreakpoints = {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.
Playgroundconst Example = () => {const flexDir = useBreakpointValue({base: "column",lg: "row"});return <ScrollView showsVerticalScrollIndicator={false}><VStack py="8" space={8} alignItems="center" justifyContent="center"><Heading>Why us?</Heading><View style={{flexDirection: flexDir}}><VStack m="3" w="140" borderRadius="xl" p="3" bg="cyan.200" space={2} alignItems="center" justifyContent="center"><Icon as={Foundation} name="shield" size="sm" textAlign="center" _dark={{color: "coolGray.800"}} /><Text fontSize="lg" textAlign="center" _dark={{color: "coolGray.800"}}>Secure Checkout</Text></VStack><VStack m="3" w="140" borderRadius="xl" p="3" bg="cyan.200" space={2} alignItems="center" justifyContent="center"><Icon as={Foundation} name="shield" size="sm" textAlign="center" _dark={{color: "coolGray.800"}} /><Text fontSize="lg" textAlign="center" _dark={{color: "coolGray.800"}}>Secure Checkout</Text></VStack><VStack m="3" w="140" borderRadius="xl" p="3" bg="cyan.200" space={2} alignItems="center" justifyContent="center"><Icon as={Feather} name="clock" size="sm" textAlign="center" _dark={{color: "coolGray.800"}} /><Text fontSize="lg" textAlign="center" _dark={{color: "coolGray.800"}}>Fast Turn Around</Text></VStack></View></VStack></ScrollView>;};
MadeWithNativeBase
gluestack-ui