Flatten margin styles are not properly overriding when applied from specific to general properties
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the linked Snack or reproducer-react-native project with the conditional margin styles to observe the discrepancy between the visible and hidden components. Trace the style-flattening entry point responsible for the reproduction and verify that the general margin rule consistently overrides the specific rule, including on the hidden component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100