Inconsistency padding properties when using flex

This get weird when I add padding properties

React Native version:

System: OS: macOS 11.2.1 CPU: (12) x64 Intel® Core™ i7-9750H CPU @ 2.60GHz Memory: 116.91 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 15.3.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.9 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 Android SDK: Not Found IDEs: Android Studio: 4.1 AI-201.8743.12.41.7042882 Xcode: 12.4/12D4e - /usr/bin/xcodebuild Languages: Java: 11.0.8 - /usr/local/opt/openjdk@11/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.1 => 0.64.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

This is test code here

<Text>Simple flex</Text>
<View style={{ flexDirection: "row", borderColor: "blue", borderWidth: 1, padding: 10, height: 70, }}>
  <View style={{ flex: 1, borderWidth: 1, borderColor: "green" }} />
  <View style={{ flex: 1, borderWidth: 1, borderColor: "red" }} />
</View>
<Text style={{ marginTop: 20 }}>Padding with flex</Text>
<View style={{ flexDirection: "row", borderColor: "blue", borderWidth: 1, padding: 10, height: 70, }}>
  <View style={{ flex: 1, padding: 0, borderWidth: 1, borderColor: "green" }} />
  <View style={{ flex: 1, padding: 20, borderWidth: 1,  borderColor: "red" }} />
</View>

[chrisglein]

I believe this is just expected from flex layout. For example if I translate your markup to HTML like so:

Simple flex
<div style="display: flex; flex-direction: row; border-color: blue; border-width: 1px; padding: 10px; height: 70px">
  <div style="flex: 1; border-style: solid; border-width: 1px; border-color: green"></div>
  <div style="flex: 1; border-style: solid; border-width: 1px; border-color: red"></div>
</div>

Padding with flex
<div style="display: flex; flex-direction: row; border-color: blue; border-width: 1px; padding: 10px; height: 70px">
  <div style="flex: 1; border-style: solid; border-width: 1px; border-color: green; padding: 0px"></div>
  <div style="flex: 1; border-style: solid; border-width: 1px; border-color: red; padding: 20px"></div>
</div>

I get the same result. You can run that in a jsFiddle here. If it behaves this way with HTML flexbox layout then it seems correct that RN/Yoga flexbox match. This appears to be by design.

[vdthieu]

I updated my code above to clearly show the problem