Flatten margin styles are not properly overriding when applied from specific to general properties

Description

By flattening the styles { marginTop: 15 } and { marginVertical: 0 }, it results in a component with margin: 0, however a "ghost" hidden component retains the marginTop: 15. A complete description can be found here https://github.com/HathorNetwork/hathor-wallet-mobile/issues/532.

Steps to reproduce

Use the flatten style syntax with a flag in a component, like: style={[{ marginTop: 15 }, flag && { marginVertical: 0 }]}

React Native Version

0.75.1 (Verified it happens on latest version)

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU:
  Memory:
  Shell:
    version: "5.9"
    path:
Binaries:
  Node:
    version: 20.16.0
    path:
  Yarn:
    version: 3.7.0
    path:
  npm:
    version: 10.8.1
    path:
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "30"
      - "31"
      - "32"
      - "33"
      - "33"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.2
      - 34.0.0
    System Images:
      - android-30 | Google APIs ARM 64 v8a
      - android-31 | Google APIs ARM 64 v8a
      - android-32 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
      - android-33 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode:
    version: 15.4/15F31d
    path:
Languages:
  Java:
    version: 11.0.19
    path:
  Ruby:
    version: 2.6.10
    path:
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

Not needed.

Reproducer

https://snack.expo.dev/@alexruzenhack/margin-rules-application
https://github.com/dream-sports-labs/reproducer-react-native

Screenshots and Videos

The images are in this issue: https://github.com/HathorNetwork/hathor-wallet-mobile/issues/532

Exécutez le projet Snack ou reproducer-react-native lié avec les styles de marge conditionnels afin d’observer l’écart entre les composants visibles et masqués. Suivez le point d’entrée de l’aplatissement des styles responsable de la reproduction et vérifiez que la règle de marge générale remplace systématiquement la règle spécifique, y compris sur le composant masqué.