Repository navigation
Responsive font sizes for better readability on different screen sizes in React Native #2734
Description
Description
Currently, fonts used in gluestack-ui for React Native are not responsive. This leads to text looking either too large on larger screens or too small on smaller screens. It would be great if there was an option to make fonts responsive based on screen dimensions or use relative font sizes that scale according to device screen size and resolution.
Expected Behavior:
Font sizes should adjust automatically based on the screen size and resolution, similar to how rem, em, or vw works in CSS for the web. In React Native, we could achieve this using the react-native-responsive-fontsize package or by manually calculating font size based on screen width/height.
CodeSandbox/Snack link
Any New App
Steps to reproduce
- Install gluestack-ui in a React Native project.
- Add a text element using gluestack-ui.
- Run the app on various screen sizes (try both small and large devices).
- Notice that the font size remains fixed, even on smaller screens.
gluestack-ui Version
CLI - 0.7.20
Platform
- Expo
- React Native CLI
- Next
- Web
- Android
- iOS
Other Platform
No response
Additional Information
Environment:
- React Native version: 0.73.7
- "@gluestack-ui/button": "^1.0.8",
- "@gluestack-ui/icon": "^0.1.25",
- "@gluestack-ui/nativewind-utils": "^1.0.26",
- "@gluestack-ui/overlay": "^0.1.16",
- "@gluestack-ui/toast": "^1.0.8",
Activity
akash3gtm commentedon Feb 20, 2025
As this is a styling issue, and each user resolves this issue with different methods.
We will not give out of the box support for this.
Also because the styling is directly coming from nativewind itself, we can't give support even if we want to.
Please check with nativewind directly how it tackles this issue.
Moving this to discussion.