feat(core): Added support for style direction property (ltr/rtl) #10691
Conversation
|
Hello @CatchABus, Maybe we can consider add flag like ´rtl´to the NS cli, this will add extra stuff for android and maybe IOS. Yes it is for a small number of language, but if NS gain full support for arabic and asiatic languages, it will be a new huge market. |
CatchABus
force-pushed
the
feat/css-direction
branch
from
e7bb5c3 to
c7d40e5
Compare
CatchABus
force-pushed
the
feat/css-direction
branch
from
ef9b553 to
4854f88
Compare
|
View your CI Pipeline Execution ↗ for commit f82dc3d
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Pull Request Overview
This PR adds Right-to-Left (RTL) layout support to NativeScript Core. It introduces a new direction CSS property that allows developers to control layout direction at the view level, with support for automatic detection based on system settings on both iOS and Android platforms.
- Adds RTL support through a new
directionCSS property with valuesltr,rtl, andnull(default/inherit) - Implements platform-specific layout direction detection and handling for iOS and Android
- Updates text components (Label, Button, TextField, TextView) to properly handle text ellipsis based on direction
- Extends horizontal alignment to support logical
startandendvalues alongside physicalleftandright
Reviewed Changes
Copilot reviewed 41 out of 48 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| tools/assets/App_Resources/Android/src/main/AndroidManifest.xml | Enables RTL support in Android manifest and fixes indentation |
| packages/core/utils/layout-helper/index.*.ts | Adds hasRtlSupport() function to detect RTL capability |
| packages/core/ui/styling/style-properties.ts | Registers the direction CSS property |
| packages/core/ui/core/view/index.*.ts | Implements native direction setters for iOS and Android |
| packages/core/ui/text-base/index.*.ts | Updates text alignment and ellipsis handling for RTL |
| packages/core/ui/text-field/index.ios.ts | Adds direction-aware line breaking for text fields |
| packages/core/ui/text-view/index.ios.ts | Adds direction-aware line breaking for text views |
| packages/core/ui/label/index.*.ts | Adds direction-aware ellipsis positioning |
| packages/core/ui/button/index.*.ts | Updates button text alignment and ellipsis for RTL |
| packages/core/ui/layouts/*/index.ios.ts | Updates layout calculations for RTL in FlexboxLayout and StackLayout |
| packages/core/ui/scroll-view/index.ios.ts | Implements RTL-aware scroll position initialization |
| packages/core/ui/frame/index.*.ts | Updates navigation transitions to respect RTL direction |
| packages/core/application/application*.ts | Adds layout direction detection and change events |
| packages/core/core-types/index.ts | Defines LayoutDirectionType and adds start/end to horizontal alignment |
| apps/automated/src/ui/label/label-tests*.ts | Updates tests for RTL support |
| apps/automated/src/application/application-tests.*.ts | Adds layout direction initialization tests |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { ScrollView as ScrollViewDefinition, ScrollEventData } from '.'; | ||
| import { ContentView } from '../content-view'; | ||
| import { profile } from '../../profiling'; | ||
| import { ContentView } from '../content-view'; |
There was a problem hiding this comment.
Removed unused imports but the change also removes interface augmentation and type definitions. This could be a breaking change if external code references ScrollViewBase.on(event: 'scroll', ...) signature.
3 participants
PR Checklist
What is the current behavior?
Right now, core has no support for enforcing a layout direction.
What is the new behavior?
Added css
directioninherited property for a minimal RTL support.This property will use the native APIs of each platform which means that enforcing a layout direction will automatically provide the default native direction experience.
For example, iOS UINavigationBar will align back button to the right in the case of RTL.
The following cases will additionally be affected by layout direction:
slidetransition will slide to the right in the case of RTL directionfliptransition will flip to the left in the case of RTL direction (it used to and will flip to the right in the case of LTR)startandendvalues tohorizontalAlignmentproperty in order for views to be able to align based on layout directionLabeldefault or initial text alignment shall respect the layout directionhasRtlSupporthelper function to determine whether an app supports RTL (it's always true for iOS)FlexboxLayoutlayout direction support for flex alignment and directiondirectionpropertyFew things to consider:
startandendvalues yet. It's doable but will require extra workaround for iOS since it only providesleftandrightfor aligning to each side. For the time being, users can rely ontext-align: initialthe default of which isleftfor LTR andrightfor RTLandroid:supportsRtl="true"flag to Application tag inAndroidManifest.xmlin order to support itNativeScript app templates shall not support RTL by default since it adds extra burden to layout and processing and it's a feature meant for a small number of languages.
User is responsible to enable RTL in one's own app using
android:supportsRtl="true".This PR adds a set a features to have as many needs as possible based on #7094 #9465 requests.
Fixes/Implements/Closes #6051 #6156.