fix: dynamic font scaling support for inputs and buttons

[hurshore]

Pull Request Template

Description:

This PR introduces a new useFontScale hook to address text scaling issues in buttons and inputs on iOS and Android. Currently, when users increase their device's font size settings, text can get cut off in UI elements since they don't scale accordingly.

The hook provides utilities to dynamically adjust component heights based on the system font scale, ensuring text remains visible and properly contained within UI elements. It uses React Native's useWindowDimensions to reactively update when system font settings change.

Fixes #219

Tested Platforms:

• [x] Web
• [x] iOS
• [x] Android

Affected Apps/Packages:

• ui

Screenshots:

1. Input/button with default font scale

   

2. Input/button with increased font scale

   

Notes:

• The hook provides three utilities:
  • fontScale: current system font scale factor
  • getScaledSize: scales any size value according to system font scale
  • getScaledHeight: calculates appropriate container height based on font size
• Components using this hook will automatically adjust their heights when system font size changes
• Implementation preserves existing web functionality while only applying scaling on native platforms
• The solution maintains consistent appearance across different device font size settings without requiring app restart

Example usage in components:

const { getScaledHeight } = useFontScale();
const baseHeight = 48;
const baseFontSize = 16;

// Component height will now scale with system font size
const dynamicHeight = getScaledHeight(baseHeight, baseFontSize);

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rnr-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2024 10:19pm
rnr-showcase	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2024 10:19pm