RTL Arabic text clipping for specific phrase "تعيين كلمة المرور"
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem obligatorischen Expo Snack-Reproduzierer und teste die exakte arabische Phrase im RTL-Modus sowohl auf Android als auch auf iOS, wobei du sie mit den bereitgestellten funktionierenden Varianten vergleichst. Verfolge den an der RTL-Formgebung oder -Messung beteiligten React Native Text-Renderingpfad; fertig ist die Untersuchung, wenn die vollständige Phrase ohne Abschneiden gerendert wird und die vorhandenen Varianten weiterhin korrekt bleiben.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100