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>
image

As compared to

<div style={{ gap: 12, backgroundColor: 'blue' }}>
  <div style={{ backgroundColor: 'red', width: 20, height: 20 }} />
  <div style={{ position: 'absolute' }} />
</div>
image

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 4
  • Comments: 15 (2 by maintainers)

Most upvoted comments

+1 Same issue