Home
Components
Hooks
Apps
Guides

useMediaQuery

useMediaQuery is a custom hook that helps detect matches between a single media query or multiple media queries.
Installation
API Reference
Important Note
This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.
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.
function App() {
  const [isMobile, isTablet, isSmallScreen, isLargeScreen] = useMediaQuery([
    {
      maxWidth: 480,
    },
    {
      minWidth: 481,
      maxWidth: 768,
    },
    {
      minWidth: 769,
      maxWidth: 1440,
    },
    {
      minWidth: 1441,
    },
  ])
  return (
    <Box className="justify-center items-center gap-4">
      <Heading>useMediaQuery</Heading>
      <Text>Resize your browser windows to see changes.</Text>
      <Box className="flex-row flex-wrap gap-8 justify-center">
        <Box
          className={
            "border justify-center items-center w-[120px] h-[80px] rounded gap-2 " +
            (isMobile ? "border-primary-500 bg-background-50" : "")
          }
        >
          <Icon as={Smartphone} size={"xs"} />
          <Text size="sm">Small</Text>
        </Box>
        <Box
          className={
            "border justify-center items-center w-[120px] h-[80px] rounded gap-2 " +
            (isTablet ? "border-primary-500 bg-background-50" : "")
          }
        >
          <Icon as={Tablet} size="sm" />
          <Text size="sm">medium</Text>
        </Box>
        <Box
          className={
            "border justify-center items-center w-[120px] h-[80px] rounded gap-2 " +
            (isSmallScreen ? "border-primary-500 bg-background-50" : "")
          }
        >
          <Icon as={Laptop} size="sm" />
          <Text size="sm">Large</Text>
        </Box>
        <Box
          className={
            "border justify-center items-center w-[120px] h-[80px] rounded gap-2 " +
            (isLargeScreen ? "border-primary-500 bg-background-50" : "")
          }
        >
          <Icon as={Tv} size="sm" />
          <Text size="sm">Extra Large</Text>
        </Box>
      </Box>
    </Box>
  )
}

Installation

Run the following command:

npx gluestack-ui add useMediaQuery

API Reference

To use this component in your project, include the following import statement in your file.
import { useMediaQuery } from "@/components/hooks/use-media-query"
const flexDir = useMediaQuery({
  minWidth: 480,
  maxWidth: 1280,
})

Hook Arguments

This section provides a comprehensive reference list for the hook arguments, detailing descriptions, properties, types, and default behavior for easy project integration.

useBreakPointValue

Name
Type
Default
options
{ [key: maxHeight | maxWidth | minHeight | minWidth | orientation] : value } Array<{ [key: maxHeight | maxWidth | minHeight | minWidth | orientation] : value }>
-

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.