Fixup direction == 'rtl'

[kmelmon]

Fixes #4668
Fixes #4646
Fixes #4645
Fixes #4499

This change fixes multiple RTL related issues. At the most basic level, our implementation of direction == 'rtl' was incorrect. The problem here was that we would do two things:

1. Yoga would see the direction == 'rtl' and do layout in an RTL fashion. This results in absolute positions in a "flipped" coordinate space, which we would then push into XAML.
2. We also mapped the direction property to the XAML FlowDirection property and set this on the backing XAML element. When FlowDirection == RightToLeft, XAML flips everything.

These two cancel each other out in the most basic scenario (a container with children stacked horizontally), so you'd end up with an LTR layout instead of RTL.

Also, there was code in place which tried to manually flip certain properties (padding, margin, and border), but this code was also incorrect. Most importantly, this code is unnecessary. It appears there was just a misunderstanding about how XAML applies these properties - it already flips these properties when in an RTL mode. I manually verified each of these properties is supposed to flip in RTL mode, and XAML does flip them in RTL. Also, after debugging some scenarios, I realized this code was buggy. It was manually querying the FlowDirection of the element having its properties set, which isn't reliable. The FlowDirection property inherits down the tree, so at the time a XAML element is being created, it hasn't inherited the property yet. But later, after it is in the tree, and XAML layout runs, it will. So the result of querying for FlowDirection varies depending on when we update the properties. Yikes! This caused the symptoms we saw in bug #4499, where the corner radius was sometimes flipped, depending on exactly when the property was applied.

This change fixes both sets of issues by doing the following:

1. Do not let yoga layout anything in RTL. Always run yoga layout in LTR.
2. Push FlowDirection into XAML, and let XAML be the one and only place we flip into RTL. This will do the correct thing for flexbox layout, and also allow native controls like ComboBox to pick up the correct FlowDirection as yoga doesn't do the layout of these controls, XAML does.

As a result of the above, I was able to also remove the code that was trying to manually flip certain properties as it's totally unnecessary.

Also, I noticed the RTLExample RNTester page essentially does nothing on Windows, as the page only actually applies direction == 'rtl' if the Platform is iOS. This is because rtl isn't supported on Android. The fix was simple - just check for "not Android".

Microsoft Reviewers: Open in CodeFlow

[kaiguo]

I remember I did something special for Image RTL, could you check and see if this is still needed after your fix?
https://github.com/kaiguo/react-native-windows/blob/master/vnext/ReactUWP/Views/Image/ReactImage.cpp#L36-L38

[kmelmon]

@kaiguo thanks. Yes this fix is still needed. Since we're still pushing FlowDirection == RightToLeft into the panel it would mirror the image without your change.

[NickGerleman]

Approving, but please update the manifest with a real issue tracking upstreaming before checking in.

[NickGerleman]

Wrong issue number?

[kmelmon]

I think there's a bug in the script. I typed in 4678 and it truncated or something.

[NickGerleman]

I think the "prompts" package behavior is to clear the number after a delay if you type something new. I've had the same thing pop up before. I can check if there's an option or new release that fixes the issue.

[NickGerleman]

Could you mark the Windows specific changes with "// [windows" etc?

[kmelmon]

they already do have // [windows]