Support height media queries

[antoinerousseau]

What happened?

I wanted to add a tall breakpoint, to target taller screens, like this:

@custom-variant tall (@media (min-height: 700px));

So that I could do stuff like text-md tall:text-lg

But it does not seem to work or be supported. Any plan to add it?

Meanwhile I went with a hook; it works too but is less gracious:

export function useIsTallScreen() {
  const { height } = useWindowDimensions();
  return height > 700;
}

const isTallScreen = useIsTallScreen();
return <Text className={cn("text-white", isTallScreen ? "text-lg" : "text-md")}>Hello, World!</Text>

Steps to Reproduce

1. Add @custom-variant tall (@media (min-height: 700px)); to your CSS file
2. Add text-md tall:text-lg to a Text
3. Check on smaller and bigger screens: text size should vary

Snack or Repository Link (Optional)

No response

Uniwind version

Pro 1.4.0

React Native Version

0.85.3

Platforms

Android, iOS

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none
• I am a Uniwind Pro user

[Brentlok]

Hey, thanks for the report.

We don’t support height-based media queries on the native side yet. So far we’ve only supported width-based media queries, mostly because that has covered the native use cases we’ve had internally.

Could you share a bit more about your broader use case? I’m mainly curious what kind of UI/layout changes you’re targeting based on screen height, so we can make sure the implementation covers the right scenarios.

For now, the hook-based workaround you posted is the right approach.

(P.S. I've changed label to uniwind-oss because your report targets both pro and oss versions)

[antoinerousseau]

We want to make sure these information fit in the screen without scrolling, and the height has more impact than the width on the content:

Large phone	Small phone