react / react/react-native

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

Ouverte
#58,316 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Needs: Triage :mag: Platform: iOS
Langage dominant
C++
Étoiles
127k
Forks
25.3k
Merge moyen
1 j 23 h
PR mergées (30 j)
4

Description

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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par le reproducer obligatoire à l’adresse github.com/muhasabahhub/rn-arabic-seat et comparez le rendu iOS pour ellipsizeMode="clip" et "tail" avec des lignes arabes qui débordent. Suivez le chemin de rendu du texte React Native iOS depuis le reproducer. Le travail est terminé lorsque le texte RTL sur une seule ligne qui déborde est proprement tronqué au bord du conteneur, sans fragment déformé, tandis que le comportement LTR reste correct.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
ios, react-native
Domaine
internationalization, mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.