Responsive font sizes for better readability on different screen sizes in React Native

[shankarRxo]

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

1. Install gluestack-ui in a React Native project.
2. Add a text element using gluestack-ui.
3. Run the app on various screen sizes (try both small and large devices).
4. 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",

[akash3gtm]

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.