useMediaQuery | 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).
useMediaQuery
useMediaQuery is a custom hook used to help detect whether a single media query or multiple media queries individually match. React Native does not natively support media queries, so useMediaQuery is still limited.
Import
Copy
import { useMediaQuery } from 'native-base';
Example
max-height
Playground
min-width
Playground
orientation
Playground
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.
Nativebase logo
MadeWithNativeBase