Skip to content

Display and Hide components

Display and Hide components

In Unistyles 2.0, developers could retrieve the breakpoint value from the useStyles hook. This was helpful for hiding certain JSX components based on specific screen sizes.

However, this pattern was a bit tedious, as it required writing custom logic to determine whether a component should be visible or not.

With Unistyles 3.0, preferred way of listening for breakpoint changes is with Display and Hide components.

Display

The Display component helps you show its children based on breakpoints or media queries.

import React from 'react'
import { View } from 'react-native'
import { Display, mq } from 'react-native-unistyles'
const Component = () => {
return (
<View style={styles.container}>
<Display mq={mq.only.width('sm')}>
<View style={styles.text}>
I will be visible from 'sm' breakpoint and up
</View>
</Display>
</View>
)
}

You can also use pixel-based values:

import React from 'react'
import { View } from 'react-native'
import { Display, mq } from 'react-native-unistyles'
const Component = () => {
return (
<View style={styles.container}>
<Display mq={mq.only.width(0, 500)}>
<View style={styles.text}>
I will be visible from 0 to 500px
</View>
</Display>
</View>
)
}

Hide

On the opposite side, the Hide component helps you hide its children based on breakpoints or media queries. It works exactly the same way as the Display component.

import React from 'react'
import { View } from 'react-native'
import { Hide, mq } from 'react-native-unistyles'
const Component = () => {
return (
<View style={styles.container}>
<Hide mq={mq.only.width('sm', 'lg')}>
<View style={styles.text}>
I will be hidden from 'sm' breakpoint to 'lg' breakpoint
</View>
</Hide>
</View>
)
}