Text with italic/bold-italic fonts is horizontally clipped

Description

Text rendered with italic or bold-italic custom fonts gets horizontally clipped on both iOS and Android. The last glyph on a line is cut off because the text layout measurement is based on advance widths rather than ink bounds (the actual drawn pixel extent of glyphs).

Italic and bold-italic fonts commonly have glyph outlines that overshoot their declared advance width. The platform text layout engines (StaticLayout/BoringLayout on Android, NSLayoutManager.usedRectForTextContainer: on iOS) size the text container using advance widths only, so the rightmost glyph's ink gets clipped by the container boundary.

This is especially visible with:

Large font sizes
Custom bold-italic fonts with prominent overshoot (e.g. Magistral-BoldItalic)
Text views sized with alignSelf: 'flex-start'

Steps to reproduce

Load a custom bold-italic font (e.g. Magistral-BoldItalic)
Render a <Text> component with alignSelf: 'flex-start' so the text view is not stretched to full width
Observe that the rightmost character is clipped horizontally

React Native Version

0.83.2

Affected Platforms

Runtime - Android, Runtime - iOS

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

System:
  OS: macOS 15.7.3
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 1.58 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.9.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 32.0.0
      - 33.0.0
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-30 | Google Play Intel x86 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
      - android-35 | ARM 64 v8a
      - android-35 | Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-35 | Google Play Intel x86_64 Atom
      - android-36 | Google Play Intel x86_64 Atom
      - android-36 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-36 | Pre-Release 16 KB Page Size Google APIs ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14432022
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.3.5
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.2
    wanted: 0.83.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no crash

MANDATORY Reproducer

https://snack.expo.dev/@alex_p8/font-overflow-fix

Screenshots and Videos

Expected Behavior

The text container should be wide enough to fully contain the drawn glyphs. The measurement should account for ink bounds (the actual pixel extent of rendered glyphs), not just advance widths.

Actual Behavior

The rightmost glyph on each line is horizontally clipped. The text container is too narrow because it is sized based on advance widths, which do not account for glyph overshoot common in italic and bold-italic typefaces.

We built a measurement-layer fix for this in expo-pretext (v0.10.0, just shipped).

Root cause: RN uses advance width for container sizing, but italic/bold-italic glyphs extend beyond advance width (ink bounds > advance bounds). When a parent View has overflow: hidden, the overshoot gets clipped.

Our approach: Measure actual glyph ink bounds natively — CTLineGetTypographicBounds + raster scanning on iOS, Paint.getTextBounds + bitmap scanning on Android — then auto-apply padding to the <Text> element.

Simplest usage:

import { InkSafeText } from 'expo-pretext'

<InkSafeText style={{ fontFamily: 'Georgia', fontStyle: 'italic', fontSize: 80 }}>
  fly
</InkSafeText>

Drop-in <Text> replacement. Non-italic text has zero overhead (no measurement, no padding).

Also ships useInkSafeStyle() (hook) and getInkSafePadding() (pure function for FlashList).

This doesn't fix the underlying RN layout engine — it's a userland workaround that measures ink bounds and compensates with padding. But it works today on iOS and Android with no RN patches.

GitHub: https://github.com/JubaKitiashvili/expo-pretext
npm: npx expo install expo-pretext

This issue is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label.

Still an issue

Navigation Menu

Repository navigation

Text with italic/bold-italic fonts is horizontally clipped #56349

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

Expected Behavior

Actual Behavior

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Text with italic/bold-italic fonts is horizontally clipped #56349

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

Expected Behavior

Actual Behavior

Activity

JubaKitiashvili commented on Apr 15, 2026

react-native-bot commented on Oct 13, 2026

a-klotz-p8 commented on Oct 13, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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