iOS: ellipsizeMode="clip" renders RTL (Arabic) text as a mangled fragment at the line start
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
Description
With numberOfLines={1} and ellipsizeMode="clip", a one-line RTL (Arabic) string that overflows its container renders as a jumbled fragment collapsed at the visual start (right edge) on iOS, instead of drawing the line normally and clipping the overflow at the container edge. ellipsizeMode="tail" on the same string truncates without mangling (subject to #58315). LTR text clips correctly.
Observed with multiple Arabic fonts (Scheherazade New, KFGQPC Hafs) in the same reproducer as #58315: select the "clip" mode — every overflowing row shows the mangled fragment; screenshots in the repo README.
Steps to reproduce
- Clone https://github.com/muhasabahhub/rn-arabic-seat, npm install, npx expo start, Expo Go on a physical iPhone.
- Select: clip + any Arabic font (Scheherazade or Hafs). Mutations all off.
- Overflowing rows (the second of each pair) render as a jumbled cluster at the right edge instead of a clean clipped line.
- Switch to tail: same strings truncate without mangling.
React Native Version
0.86.3
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
Expo SDK 57 managed project — envinfo equivalent below; full dependency table in the repo README.
System:
OS: Windows 11 10.0.26200
CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
Memory: 3.80 GB / 15.59 GB
Binaries:
Node: 24.13.1 - C:\Program Files\nodejs\node.EXE
npm: 11.19.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ~57.0.18 => 57.0.19
expo-font: ~57.0.2 => 57.0.3
react: 19.2.3 => 19.2.3
react-native: 0.86.3 => 0.86.3
react-native-safe-area-context: ~5.7.0 => 5.7.0
Device: iPhone 15, iOS 23.3.1, physical device via Expo Go. New Architecture (Fabric), Hermes.
Stacktrace or Logs
No crash or error output — this is a silent rendering defect. Nothing is logged.
MANDATORY Reproducer
https://github.com/muhasabahhub/rn-arabic-seat
Screenshots and Videos
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginnen Sie mit dem obligatorischen Reproducer unter github.com/muhasabahhub/rn-arabic-seat und vergleichen Sie das iOS-Rendering für ellipsizeMode="clip" und "tail" anhand von überlaufenden arabischen Zeilen. Verfolgen Sie den React Native iOS-Text-Rendering-Pfad ausgehend vom Reproducer. Als erledigt gilt die Aufgabe, wenn überlaufender einzeiliger RTL-Text sauber an der Containerkante abgeschnitten wird, ohne ein verfälschtes Fragment, während das LTR-Verhalten korrekt bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- ios, react-native
- Bereich
- internationalization, mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Aktiv
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 42/100