iOS: ellipsizeMode="clip" renders RTL (Arabic) text as a mangled fragment at the line start
Nessuno ha ancora preso questa issue.
- 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
- 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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- 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