RN top-level window is laid out LTR in RTL locales #4670
Description
The basic problem here is: If I deploy an RN app in an RTL locale (eg Hebrew), the app will be laid out LTR, and the min/max/close buttons are on the right-hand side instead of the left-hand side.
We should provide an easy way for apps to be deployed in RTL locales that are RTL-aware at the top level.
The work for automatically applying RTL layout to the RN tree is more well-understood. When we run layout, we start with the root react-native node, and for this node we pass a flow direction into yoga, currently we always pass in LTR, which explains why at the app-level the content is always LTR.
There is actually a TODO in this code with a reference to an internal Office bug number:
// TODO: Real direction (VSO 1697992: RTL Layout)
YGNodeCalculateLayout(rootNode, actualWidth, actualHeight, YGDirectionLTR);
The app could set the direction property on their top-most RN component but we should consider doing this automatically. There is an i18Manager.isRTL API which returns true if the app is running in an RTL locale. We could use this information to determine the layout direction for the root node of the RN tree.
I'm not clear on what you have to do to get the min/max/close buttons to flip to the other side of the window, this needs some research.
In addition we may need an API for apps to gain explicit control over this behavior. Some apps may want to always look LTR even in RTL locales.