Thanks to visit codestin.com
Credit goes to github.com

Skip to content

iOS missing FlexboxLayout RTL support #6156

Open
@Archez

Description

@Archez

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions