react / react/react-native

iOS: ellipsizeMode="clip" renders RTL (Arabic) text as a mangled fragment at the line start

Offen
#58,316 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Needs: Triage :mag: Platform: iOS
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
  1. Clone https://github.com/muhasabahhub/rn-arabic-seat, npm install, npx expo start, Expo Go on a physical iPhone.
  2. Select: clip + any Arabic font (Scheherazade or Hafs). Mutations all off.
  3. Overflowing rows (the second of each pair) render as a jumbled cluster at the right edge instead of a clean clipped line.
  4. 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
Image

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.