MediaQuery
Responsive visibility control
Import: import { MediaQuery } from 'react-native-mantine';
Usage
import { MediaQuery, Text } from 'react-native-mantine';
<MediaQuery largerThan={768}>
<Text>Visible only when the window is at least 768px wide</Text>
</MediaQuery>
<MediaQuery smallerThan={768} orientation="portrait">
<Text>Visible on narrow portrait screens</Text>
</MediaQuery>Props
| Prop | Type | Default | Description |
|---|---|---|---|
minWidth | number | Minimum width for the query to match | |
maxWidth | number | Maximum width for the query to match | |
minHeight | number | Minimum height for the query to match | |
maxHeight | number | Maximum height for the query to match | |
largerThan | number | string | Shorthand for minWidth (convenience prop) | |
smallerThan | number | string | Shorthand for maxWidth (convenience prop) | |
orientation | 'portrait' | 'landscape' | Orientation to match | |
children | React.ReactNode | Children to render when query matches | |
query | 'window' | 'screen' | 'window' | Query type - window or screen |
style | StyleProp<ViewStyle> | Additional styles applied to the root element | |
testID | string | Test identifier used by testing frameworks |