yoga: gap CSS property incorrectly adds gaps for absolutely positioned children
Description
In HTML/CSS, gap
applies gutters between child elements but ignores absolutely positioned children. On iOS React Native, gap
also adds gutters for each absolutely positioned child, unexpectedly increasing the size of the parent container.
React Native Version
0.71.6
Output of npx react-native info
System: OS: macOS 13.4.1 CPU: (10) x64 Apple M1 Pro Memory: 22.36 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.0/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v16.17.0/bin/npm Watchman: Not Found Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 1.8.0_131 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: Not Found react-native: Not Found react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
Create a container View with a gap
set (larger ones will make it easier to see the problem).
Give it two children, and make one of them absolutely positioned.
Notice the gap added incorrectly.
Snack, code example, screenshot, or link to a repository
<View style={{ gap: 12, backgroundColor: 'blue' }}>
<View style={{ backgroundColor: 'red', width: 20, height: 20 }} />
<View style={{ position: 'absolute' }} />
</View>
As compared to
<div style={{ gap: 12, backgroundColor: 'blue' }}>
<div style={{ backgroundColor: 'red', width: 20, height: 20 }} />
<div style={{ position: 'absolute' }} />
</div>
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 4
- Comments: 15 (2 by maintainers)
+1 Same issue