RTL Arabic text clipping for specific phrase "تعيين كلمة المرور"
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 4
説明
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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
必須の Expo Snack 再現手順から始め、RTL モードで正確なアラビア語フレーズを Android と iOS の両方でテストし、提供されている動作するバリエーションと比較します。RTL のシェーピングまたは計測に関係する React Native Text のレンダリングパスを追跡します。完了の条件は、フレーズ全体がクリッピングなしでレンダリングされ、既存のバリエーションが引き続き正しく動作することです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 48/100