Skip to content

iOS missing FlexboxLayout RTL support #6156

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

Open
Archez opened this issue Aug 6, 2018 · 1 comment
Open

iOS missing FlexboxLayout RTL support #6156

Archez opened this issue Aug 6, 2018 · 1 comment
Assignees

Comments

@Archez
Copy link
Contributor

Archez commented Aug 6, 2018

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

Yes

Tell us about the problem

The FlexboxLayout has a few properties that are horizontally spaced through start/end directions. On Android these properties respect the supported language's ltr/rtl direction; however, this is not the case on iOS. Screenshots included at the bottom of this post.

The specific properties that are not flipping for iOS:
Parent:

  • flexDirection: row/row-reverse
  • justifyContent: flex-start/flex-end
  • alignItems: flex-start/flex-end (When flexDirection is column based)
  • alignContent: flex-start/flex-end (When flexDirection is column based and wrapping is true)
  • flexWrap: wrap/wrap-reverse (When flexDirection is column based)

Child items:

  • alignSelf: flex-start/flex-end (When parent flexDirection is column based)
(Of course any combination of these properties is also possible as well)

Which platform(s) does your issue occur on?

iOS (tested 11)

Please provide the following version numbers that your issue occurs with:

  • CLI: 4.1.2
  • Cross-platform modules: 4.1.1
  • Runtime(s): android 4.1.3, ios 4.1.1

Please tell us how to recreate the issue in as much detail as possible.

rtl-test.zip
Provided here is a repro app that has a main view displaying a couple labels in various FlexboxLayouts. Each layout describes a possible scenario of the many flex properties. There are labels that say START and labels that say END. In a proper world, all the START labels should be positioned alongside the starting edge of the language's ltr/rtl direction, and the END labels on the opposite side.

Android will show everything working properly, but iOS will always display the START labels on the left side, and END on the right side.

I included an action bar that also shows an END actionItem and a START navigationButton for reference, as the action bar components all properly flip on both platforms.

iOS requires that there is at least a blank language strings for an RTL language, and the device set to that language to properly have the app in RTL mode (I choose Arabic for my demo).

Screenshots

Android RTL:
android-ar-rtl

iOS RTL:
ios-ar-rtl


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

@tsonevn
Copy link
Contributor

tsonevn commented Aug 7, 2018

HI @Archez,
I marked this as a feature request. Perhaps, we should expose property similar to the iOS's semanticContentAttribute, which allows mirroring the user-interface. Related to this article. You can keep track of the issue for further info

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

No branches or pull requests

3 participants