On web, the order is just fine, but on mobile everything is swapped: the order of the components, left margins are right margins etc. I did not change anything on purpose. From one build to another, the order simply changed.

I attached a screenshot from one of their templates which shows the same behavior (so the problem is not restricted to a single project): screenshot from react-native template ios application

Thank you!

Update:

code: https://github.com/expo/examples/blob/master/with-tab-navigation/App.js

image: screenshot from mobile phone ios

I also checked with another phone and it shows the proper order. Could it be related to some language or region?

CodePudding user response：

Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, alignContent defaulting to flex-start instead of stretch, flexShrink defaulting to 0 instead of 1, the flex parameter only supporting a single number.

https://reactnative.dev/docs/flexbox

CodePudding user response：

I uninstalled my Expo Go application from mobile and reinstalled it from App Store. Works now