react / react/react-native

RTL Arabic text clipping for specific phrase "تعيين كلمة المرور"

Ouverte
#55,220 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

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

Description

Description

When the app is running in RTL mode, a specific Arabic phrase causes part of the text to be clipped and not rendered on screen.

The issue happens only with the exact phrase:

تعيين كلمة المرور

In this case, the word "المرور" is hidden/clipped from the UI.

However, the issue does not occur when:

An extra space is added at the end
تعيين كلمة المرور

A single character is changed
بعيين كلمة المرور

Any small modification is made to the phrase

This suggests a rendering/layout bug related to RTL text shaping or measurement for this specific Arabic phrase.

Steps to reproduce

Enable RTL layout:


I18nManager.forceRTL(true);
I18nManager.allowRTL(true);

Render a Text component with the following value:

 <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
     {/* not working */}
    <Text>تعيين كلمة مرور</Text> 

    {/* working by adding space */}
    <Text>تعيين كلمة مرور </Text>

    {/* working by replace first letter */}
    <Text>بعيين كلمة مرور</Text>
    </View>
React Native Version

0.83.1

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx @react-native-community/cli info
System:
  OS: macOS 26.0.1
  CPU: (12) arm64 Apple M2 Max
  Memory: 100.19 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.4
    path: /Users/omar/.nvm/versions/node/v20.19.4/bin/node
  Yarn:
    version: 1.22.22
    path: /Users/omar/.nvm/versions/node/v20.19.4/bin/yarn
  npm:
    version: 10.8.2
    path: /Users/omar/.nvm/versions/node/v20.19.4/bin/npm
  Watchman:
    version: 2025.10.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 3.4.3
    path: /opt/homebrew/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.1
    wanted: 0.83.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false
Stacktrace or Logs
console.log("تعيين كلمة مرور")
MANDATORY Reproducer

https://snack.expo.dev/@omarhija12/display-text?platform=android

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 reproducteur Expo Snack obligatoire et testez la phrase arabe exacte en mode RTL sur Android et iOS, en la comparant aux variantes fonctionnelles fournies. Suivez le chemin de rendu de React Native Text impliqué dans la mise en forme ou la mesure RTL ; le travail est terminé lorsque la phrase complète est rendue sans rognage et que les variantes existantes restent correctes.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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