You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
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
Uh oh!
There was an error while loading. Please reload this page.
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:
row
/row-reverse
flex-start
/flex-end
flex-start
/flex-end
(When flexDirection is column based)flex-start
/flex-end
(When flexDirection is column based and wrapping is true)wrap
/wrap-reverse
(When flexDirection is column based)Child items:
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:
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 sayEND
. In a proper world, all theSTART
labels should be positioned alongside the starting edge of the language's ltr/rtl direction, and theEND
labels on the opposite side.Android will show everything working properly, but iOS will always display the
START
labels on the left side, andEND
on the right side.I included an action bar that also shows an
END
actionItem and aSTART
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:

iOS RTL:

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
The text was updated successfully, but these errors were encountered: