The useBreakpointValue hook breaks on screens 1900px+

[snhanson]

Description

I expect that the useBreakpointHook will not resize my components to "mobile" sizing on 1900px+ screens.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Create a custom component using Gluestack-UI themed components.
2. Import the useBreakpointValue hook and use it to create the boxVariant values.
3. Start your server and open a browser on a 1900px+ screen.
4. Observe that the Box will go back to its mobile styling.

gluestack-ui Version

gluestack-ui/config and /themed are on latest

Platform

• [ ] Expo
• [ ] React Native CLI
• [X] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

Screenshots of code and screen recording of the behavior.

Player Caption component and useBreakpointHook

My gluestack config.tokens.mediaQueries

Screen recording (sorry for quality, I had to compress it to upload). https://github.com/gluestack/gluestack-ui/assets/167568561/212c34c0-eca3-4f85-9c6a-1c693d53b6da

[MediciSpaceCowboy]

Fully understanding what is going on requires knowing what is happening inside PlayerDescription. 'useBreakpointValue ' determines what value is returned based on the object passed in. As you can see in the example at useBreakpointValue , 'flexDir' determines what value is assigned to 'style.flexDirection' on the View tag. I'm guessing you have a class associated with "playerDescriptionDesktop" in which you are not implementing all the stylings for your desired functionality. Have you tried adding xlQuery: "playerDescriptionDesktop" to the param object of 'useBreakpointValue'? If that doesn't solve it, the problem is likely connected to the code related to "playerDescriptionDesktop" inside PlayerDescription (based on the gluestack-ui code, this is the most probable scenerio).

[snhanson]

Thanks for the feedback. Here's some more of the code to further explain what's going on. We have a PlayerDescriptionMobile and PlayerDescriptionDesktop component. They both utilize a VStack as their main component, and we create a variant for mobile and desktop.

PlayerDescriptionMobile component

PlayerDescriptionDesktop component

The VStack theme config

I did try to add xlQuery: "playerDescriptionDesktop" into the useBreakpointValue hook and it did not behave as expected.