Inconsistent absolute line-height rendering as system text size changes in iOS

normanzb commented 23 hours ago

Description

The line-height renders differently when iOS text size setting changed, the line-height with a absolute value should stay the same no matter how iOS text size is set.

Steps to reproduce

create an <View style={{ width: 10, height: 32, backgroundColor: 'red' }} /> element with height set to 32.
create an <Text style={{ lineHeight: 32 }}>here is a demo text</Text> element with line-height also set 32.
put these 2 elements side by side in a flex-col element.
these 2 elements should be rendered with same height
go to iOS accessibility setting, change font size to slightly smaller.
go back to the app.

expected result:

the 2 elements still renders with same height

actual result:

the 2 elements renders with different height, with the text element being smaller.

React Native Version

0.74.5

Affected Platforms

Runtime - iOS

Output of `npx react-native info`

info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Max
  Memory: 1.59 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.17.0
    path: ~/.n/bin/node
  Yarn: Not Found
  npm:
    version: 10.8.2
    path: ~/.n/bin/npm
  Watchman:
    version: 2024.09.09.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/xxxx/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12169540
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 3.1.4
    path: /Users/xxxx/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.5
    wanted: 0.74.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

info React Native v0.75.3 is now available (your project is running on v0.74.5).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.75.3
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.5
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

no crash

Reproducer

https://snack.expo.dev/@normanmodprotocol/frowning-violet-bagel

Screenshots and Videos

default ios font size setting (correct):

ios font size set to smallest (incorrect):

ios font size set to largest:

react-native-bot commented 23 hours ago

:warning:	Newer Version of React Native is Available!
:information_source:	You are on a supported minor version, but it looks like there's a newer patch available - 0.74.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

react-native-bot commented 23 hours ago

:warning:	Newer Version of React Native is Available!
:information_source:	You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

normanzb commented 23 hours ago

tested on 0.74.5, still reproducible

cortinico commented 7 hours ago

tested on 0.74.5, still reproducible

Can you test it on 0.76.0 RC2 also?

normanzb commented 4 hours ago

0.76.0 RC2

hi @cortinico it is partially fixed in 0.76.0 RC2.

when text size in iOS setting is smaller, the line-height does not shrink anymore (correct):

however when text size in iOS setting is larger, the line-height still increases (incorrect, the text in screenshot is really small, should not cause line-height to increase):

facebook / react-native