Skip to content

feat(core): Added support for style direction property (ltr/rtl) #10691

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from

Conversation

CatchABus
Copy link
Contributor

@CatchABus CatchABus commented Feb 5, 2025

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 direction inherited 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:

  • Navigation transition
    • The regular slide transition will slide to the right in the case of RTL direction
    • The regular flip transition 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)
  • Corrected the iOS button text alignment. Core demands that the default is center just like android
  • Added support for start and end values to horizontalAlignment property in order for views to be able to align based on layout direction
  • The Label default or initial text alignment shall respect the layout direction
  • Added hasRtlSupport helper function to determine whether an app supports RTL (it's always true for iOS)
  • Regarding iOS horizontal ScrollView, the initial scrollbar position will align to the end in the case of RTL direction (this was a default on android)
  • Added missing iOS FlexboxLayout layout direction support for flex alignment and direction

Few things to consider:

  • Text alignment does not support start and end values yet. It's doable but will require extra workaround for iOS since it only provides left and right for aligning to each side. For the time being, users can rely on text-align: initial the default of which is left for LTR and right for RTL
  • Android does not support RTL by default. Users will have to append the android:supportsRtl="true" flag to Application tag in AndroidManifest.xml in order to support it

NativeScript 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Android align-text bug with Arabic characters
1 participant