Description
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
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.