Skip to content

Support height media queries #586

Open
#711
Open
Support height media queries#586
#711
Assignees
Brentlok
Labels
enhancementNew feature or requestuniwind-oss

Description

@antoinerousseau
antoinerousseau
opened on Jun 24, 2026

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

Activity

  1. antoinerousseau
    added
    triage
    uniwind-pro
    priority
    on Jun 24, 2026

  2. Brentlok commented on Jun 24, 2026

    @Brentlok
    Brentlok
    on Jun 24, 2026
    Contributor

    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)

  3. Brentlok
    added
    enhancementNew feature or request
    uniwind-oss
    and removed
    triage
    uniwind-pro
    priority
    on Jun 24, 2026

  4. antoinerousseau commented on Jun 24, 2026

    @antoinerousseau
    antoinerousseau
    on Jun 24, 2026
    ContributorAuthor

    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
    Image Image
  5. Brentlok
    self-assigned this
    on Oct 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestuniwind-oss

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions