[iOS] TextInput with Hiragino Sans: extra space on text selection and text clipping at the bottom

Description

When using fontFamily: 'Hiragino Sans' on a on iOS, two rendering issues occur:

Text selection shows extra space below the text — When selecting text in a multiline TextInput, the selection highlight area extends significantly below the actual text glyphs, creating a large visible gap.
Text is clipped at the bottom in single-line TextInput — Characters with descenders (e.g., p, y, j) are cut off at the bottom. This occurs with both placeholder and actual input text.

Both issues do not occur when using the default system font (San Francisco). This appears to be caused by the font metrics (ascender/descender ratio) of Hiragino Sans not being properly accounted for in TextInput's rendering.

Note: Hiragino Sans is a system-bundled font on iOS, widely used for Japanese typography.

Steps to reproduce

Create a with style={{ fontFamily: 'Hiragino Sans', fontSize: 16 }}
Issue 1: In a multiline TextInput, type text (e.g., "Hello World") and select it — observe extra space below the selection highlight
Issue 2: Observe the single-line TextInput with text "https://example.com/yyy.jp" — the bottom of characters like p, y, j is clipped. This happens for both defaultValue and placeholder.
Compare with the system font TextInput — neither issue occurs

React Native Version

0.83

Affected Platforms

Runtime - iOS

Output of `npx @react-native-community/cli info`

System:
  OS: macOS 15.1
  CPU: (8) arm64 Apple M2
Binaries:
  Node: 20.19.0
SDKs:
  iOS SDK: 18.1
IDEs:
  Xcode: 16.1/16B40

Stacktrace or Logs

N/A (visual rendering issue, no errors)

MANDATORY Reproducer

https://snack.expo.dev/@ryotanny/hiragino-sans-textinput-bug

Screenshots and Videos

No response

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

This issue was closed because the author hasn't provided the requested feedback after 7 days.

Navigation Menu

Repository navigation

[iOS] TextInput with Hiragino Sans: extra space on text selection and text clipping at the bottom #56123

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx @react-native-community/cli info`

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[iOS] TextInput with Hiragino Sans: extra space on text selection and text clipping at the bottom #56123

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx @react-native-community/cli info

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Activity

react-native-bot commented on Mar 17, 2026

react-native-bot commented on Mar 17, 2026

react-native-bot commented on Apr 11, 2026

react-native-bot commented on May 5, 2026

react-native-bot commented on May 30, 2026

3 remaining items

react-native-bot commented on Jun 25, 2026

react-native-bot commented on Jul 21, 2026

react-native-bot commented on Aug 16, 2026

react-native-bot commented on Aug 16, 2026

react-native-bot commented on Sep 9, 2026

react-native-bot commented on Sep 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`