useMediaQuery | 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.
useMediaQuery
useMediaQuery is a custom hook that helps detect matches between a single media query or multiple media queries. React Native does not natively support media queries, so useMediaQuery is still limited.
Import
Copyimport { useMediaQuery } from 'native-base';
Example
max-height
Playgroundconst Example = () => {const [isSmallScreen] = useMediaQuery({minHeight: 280,maxHeight: 480});return <Center w="100%">{isSmallScreen ? <HStack w="90%" maxW="400" borderWidth="1" space={8} rounded="md" borderColor="coolGray.400" p="4"><VStack flex="3" space="4"><Skeleton /><Skeleton.Text /><HStack space="2" alignItems="center"><Skeleton size="5" rounded="full" /><Skeleton h="3" flex="2" rounded="full" /><Skeleton h="3" flex="1" rounded="full" /></HStack></VStack></HStack> : <HStack w="90%" maxW="400" borderWidth="1" space={8} rounded="md" borderColor="coolGray.400" p="4"><Skeleton flex="1" h="150" rounded="md" /><VStack flex="3" space="4"><Skeleton /><Skeleton.Text /><HStack space="2" alignItems="center"><Skeleton size="5" rounded="full" /><Skeleton h="3" flex="2" rounded="full" /><Skeleton h="3" flex="1" rounded="full" /></HStack></VStack></HStack>}</Center>;};
min-width
Playgroundconst Example = () => {const [isSmallScreen] = useMediaQuery({minWidth: 280});return <Center w="100%">{isSmallScreen ? <HStack w="90%" maxW="400" borderWidth="1" space={8} rounded="md" borderColor="coolGray.400" p="4"><VStack flex="3" space="4"><Skeleton /><Skeleton.Text /><HStack space="2" alignItems="center"><Skeleton size="5" rounded="full" /><Skeleton h="3" flex="2" rounded="full" /><Skeleton h="3" flex="1" rounded="full" /></HStack></VStack></HStack> : <HStack w="90%" maxW="400" borderWidth="1" space={8} rounded="md" borderColor="coolGray.400" p="4"><Skeleton flex="1" h="150" rounded="md" /><VStack flex="3" space="4"><Skeleton /><Skeleton.Text /><HStack space="2" alignItems="center"><Skeleton size="5" rounded="full" /><Skeleton h="3" flex="2" rounded="full" /><Skeleton h="3" flex="1" rounded="full" /></HStack></VStack></HStack>}</Center>;};
orientation
Playgroundconst Example = () => {const [isLandScape, isPortrait] = useMediaQuery([{orientation: "landscape"}, {orientation: "portrait"}]);return <Center w="100%">{isPortrait && <HStack w="90%" maxW="400" borderWidth="1" space={8} rounded="md" borderColor="coolGray.400" p="4"><VStack flex="3" space="4"><Skeleton /><Skeleton.Text /><HStack space="2" alignItems="center"><Skeleton size="5" rounded="full" /><Skeleton h="3" flex="2" rounded="full" /><Skeleton h="3" flex="1" rounded="full" /></HStack></VStack></HStack>}{isLandScape && <HStack w="90%" maxW="400" borderWidth="1" space={8} rounded="md" borderColor="coolGray.400" p="4"><Skeleton flex="1" h="150" rounded="md" /><VStack flex="3" space="4"><Skeleton /><Skeleton.Text /><HStack space="2" alignItems="center"><Skeleton size="5" rounded="full" /><Skeleton h="3" flex="2" rounded="full" /><Skeleton h="3" flex="1" rounded="full" /></HStack></VStack></HStack>}</Center>;};
Return value
The useMediaQuery hook returns an array of booleans, indicating whether the given query matches or queries match.
Why an array? useMediaQuery accepts both an object and an array of object, but will always return an array. This way, you can combine multiple media queries which will be individually matched in a single call. The options to use are still limited to maxWidth, minWidth, maxHeight, minHeight, orientation.
MadeWithNativeBase
gluestack-ui