react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Font won't scale properly when changing the font size and display size in settings

Open teniii opened this issue 4 years ago • 1 comments

Description

[ANDROID ONLY] On some Android devices, when font size is changed (usually increased), the fonts are updated, but not accordingly to other apps. After trying to find a pattern, I've noticed that changing the display size scales the texts, but changing the font size doesn't have the same effect . More and more users report this issue, mostly users that increase their font size and find a discrepancy between other native apps and ours.

React Native version:

System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 964.77 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.15.1 - /usr/local/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.3, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-28 | Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom_64
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: 12.3/12C33 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.0 => 0.64.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

This behaviour happens only on specific devices. Android devices with this issue found by now: Huawei Y6 (Android 9), Motorola Moto G8 Power (Android 11).

Inside our app, which contains text encapsulated inside multiple views, the issue happens as followed:

  1. Surf through the app, having default settings for font size and display size
  2. Go to Android Device Settings, change the font size or display size
  3. Come back to the app, surf again, see the differences
  4. Go to a native app, see the discrepancies between the React-Native app and a native app

Actual examples would be:

  1. setting the font size to max and display size to min => small font
  2. setting the font size to min and display size to max => huge font

When I say small and huge, i compare the fonts to the native apps.

Expected Results

Scaling the font based on both the display size and font size inside settings. Expected results for the 2 examples above: the text should be somewhere in the middle, being dependent to each setting, not just the display size.

Snack, code example, screenshot, or link to a repository:

Case 1: Values inside of settings:
image image Screenshot inside other app: image

Case 2: Values inside of settings:
image Screenshot inside the app: image

Screenshot inside other app: image

teniii avatar Jul 06 '21 15:07 teniii

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Feb 24 '24 05:02 github-actions[bot]

This issue was closed because it has been stalled for 7 days with no activity.

github-actions[bot] avatar Mar 02 '24 05:03 github-actions[bot]