Repository navigation
[iOS] TextInput with Hiragino Sans: extra space on text selection and text clipping at the bottom #56123
Closed as not planned
Description
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.6
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
Activity
react-native-bot commentedon Mar 17, 2026
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.
react-native-bot commentedon Mar 17, 2026
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.
react-native-bot commentedon Apr 11, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
react-native-bot commentedon May 5, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
react-native-bot commentedon May 30, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
6 remaining items
react-native-bot commentedon Jul 21, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
react-native-bot commentedon Aug 16, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
react-native-bot commentedon Aug 16, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
react-native-bot commentedon Sep 9, 2026
This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.
react-native-bot commentedon Sep 16, 2026
This issue was closed because the author hasn't provided the requested feedback after 7 days.
ryota0222 commentedon Oct 31, 2026
I've updated the issue description with the full React Native version.
The issue still reproduces on 0.83.6. Could you please reopen this issue?