Gluestack components not resizing for responsive design #1719
Description
Description
Components do not resize based on screen size. The developer has to manually add custom styles for media queries. This means you have to add styles for everything, such as font size, padding, margin. Some things are not very intuitive to figure out. For example, the isRequired label on a FormControl element is not clear how to resize for larger screen sizes. I would expect the components to automatically resize based on screen size.
Steps to reproduce
If I have a text component like <Text size="xs">My Text</Text>, I would expect responsiveness to be built into this already. Same for <Text>My text</Text>. However, the sizes do not change based upon the screen size. Therefore, I have to manually go and add the code to resize all my components based upon the screen size, such as <Text @sm-fontSize={"$md"}>My text</Text>. This makes the code extremely cluttered, but without it, the designs do not look good on different devices (ex: iphone vs ipad). I. would expect responsiveness to already be built into the components
Additionally, it seems like size is not supported as a property for responsive design. For example, with the text component, I normally use size for it. But to make it responsive, I have to use fontSize. This happens for many items and it's not intuitive.
Finally, manually having to change everything causes other issues. For example, if I have a FormControl is the isRequired property, when I increase the fontSize of the FormControlLabelText, the fontSize of the isRequired property doesn't increase.
gluestack-ui Version
1.0.3
Platform
- Expo
- React Native CLI
- Next
- Web
- Android
- iOS
Other Platform
No response
Additional Information
I've already seen the docs on responsive design, but I would expect responsiveness to be already built in. Additionally, this doesn't cover many cases, like how to change icons, buttons, etc.