flexDirection seems to be set to column-reverse in 0.60.*

[shercoder]

Description

After upgrading to RN 0.60.* from 0.59.10, we noticed everything was rendering in a reverse order. I have upgraded to 0.61.5 hoping it would fix the issue but it did not. This issue can only be seen on iOS running on a device. Android device/emulator and iOS simulator render everything in order.

According to RN documentation, flexDirection: column is by default but it doesn't seem to be the case. It seems like it is being set to column-reverse. I applied flexDirection: column manually to our main component and then everything rendered in order.

I started putting breakpoints in some of RN's files like the RCTView.m and RCTUiManager.m, it looks like RCTShadowView in uiBlockWithLayoutUpdateForRootView method of RCTUiManager has direction set to LTR but it's property layoutMetrics has direction set to RTL and this seems to be the issue. I'm not 100% since I'm not familiar with the codebase but having a mix of layout directions on a same object doesn't sound right.

We tested this on two different iOS Devices:

1. iPhone 8 with OS 13.2
2. iPhone 7 Plus with 11.2.1

React Native version:

System:
OS: macOS Mojave 10.14.4
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 809.16 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.14.1 - ~/.nvm/versions/node/v10.14.1/bin/node
npm: 6.9.0 - ~/.nvm/versions/node/v10.14.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 27, 28
Build Tools: 27.0.1, 28.0.3
System Images: android-22 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
solidarity-react-native: 2.0.2

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Upgrade your existing app to 0.60.* or even 0.61.* (I have tried both hoping it would fix in 0.61.*)
2. Run the app on an iOS device

[chrisglein]

The fact that this is only on device (not in iOS simulator) and only for an upgraded app really limits the ability to investigate. I wasn't sure if the upgrade was essential - are you seeing this on a clean new app? If not, it seems like something is off as a result of the upgrade process?
Given your comments about debugging in and seeing RTL behavior... what locale is this iOS device running on? Recently having looked into RTL issues ourselves we discovered some documentation issues. There may be some helpful information there?

[shercoder]

Thank you for replying @chrisglein. I wanted to do some more debugging before replying back so I don't make a fool of myself.

I-tried-1

So I went through our upgrade process again just to make sure I didn't miss anything, and I did not miss anything. I upgraded using the upgrade tool website provided by RN.

So about the locale question, I was confused about that too at first thinking it's the locale direction, but that's not the case. Because all the text renders from LTR. And all the other apps on the device are LTR as well.

The problem we're running into is the flex layout direction. After looking more into this, I discover YGNode (yoga node) has base direction set to YGDirectionLTR but context property for the node (in this case RCTShadowView) has the layoutMetrics.layoutDirection set to UIUserInterfaeLayoutDirectionRightToLeft.

So then I started looking at when a RCTShadowView created, by default the layoutDirection is being set to LTR (UIUserInterfaeLayoutDirectionLeftToRight) but something changes it to RTL and that's the part I'm struggling to figure out. Then I landed at this line of code https://github.com/facebook/react-native/blob/v0.61.5/React/Views/RCTLayout.m#L56
This is what seems to be changing from LTR to RTL. yoganode goes in having a direction set to LTR but somehow it returns RTL and that's what gets set as the layoutDirection. I can't debug further deep because then it gets into low level code and there is no way for me to debug or have enough knowledge to do so.

I-tried-2

Then I stripped our app to a bare bone single screen example in RN with just two text components, it still rendered them in reverse.

I-tried-3

Then I created a new app with RN 0.60.*, which rendered fine in correct order.

NOTE: I tried all of the above things on the same iOS device.

[chrisglein]

If I'm understanding your response correctly, it sounds like a clean app doesn't have the issue, but your app with everything stripped down does repro it. Which seems to me like something's drifted during upgrades in your core app project (not the app code)? If you haven't already, I'd recommend checking out the upgrade helper repo for diffs on core project files to see if something was missed in the upgrade.

[github-actions]

Do you need help upgrading to a newer React Native version? Visit the Upgrade Support repository or use the upgrade helper to see the changes that need to be made to upgrade your app.

[shercoder]

Sorry to bother, turns out the react-native-unity-view and Unity libs we were using somehow took control of the views. Looks like an upgrade to those libs have resolved the issue. Leaving this comment for anyone else on the same boat as I saw quiet a few people run into this issue and they reported it on react-native-unity-view.