react / react/react-native

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

Aperta
#58,316 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Needs: Triage :mag: Platform: iOS
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con il reproducer obbligatorio disponibile all’indirizzo github.com/muhasabahhub/rn-arabic-seat e confronta il rendering su iOS per ellipsizeMode="clip" e "tail" usando righe arabe con overflow. Traccia il percorso di rendering del testo di React Native iOS partendo dal reproducer. Il lavoro è completato quando il testo RTL su una sola riga che supera i limiti viene ritagliato correttamente sul bordo del contenitore senza un frammento deformato, mentre il comportamento LTR rimane corretto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
ios, react-native
Ambito
internationalization, mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.