You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
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.
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
gluestack-ui Version
gluestack-ui/config and /themed are on latest
Platform
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
The text was updated successfully, but these errors were encountered: