RTL Arabic text clipping for specific phrase "تعيين كلمة المرور"
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the mandatory Expo Snack reproducer and test the exact Arabic phrase in RTL mode on both Android and iOS, comparing it with the supplied working variants. Trace the React Native Text rendering path involved in RTL shaping or measurement; done means the full phrase renders without clipping while the existing variants remain correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100