Gap moves children views outside containing view

[Mookiies]

Description

If using gap, justifyContent, and the first child is absolutely positioned, other children will be offset by the gap value.

This is unexpected because, the parent view should be containing the children, but it's not. Absolutely positioned children should not affect gap or the positioning of other views. Current behavior doesn't match CSS.

Somewhat related to #1652

Steps to reproduce

1. Setup a view with gap and a non-default justifyContent
2. Set position: 'absolute on the first child

React Native Version

0.73.7

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 13.6.4
  CPU: (10) arm64 Apple M1 Max
  Memory: 68.42 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.1
    path: ~/.asdf/installs/nodejs/18.19.1/bin/node
  Yarn:
    version: 4.1.1
    path: ~/.asdf/shims/yarn
  npm:
    version: 10.2.4
    path: ~/.asdf/installs/nodejs/18.19.1/bin/npm
  Watchman:
    version: 2023.09.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/<XXX>/.asdf/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9514443
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 3.3.0
    path: /Users/<XXX>/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@mookiies/gap-moving-child

Screenshots and Videos

Container has blue background and gap value of 100
Pink square is first child position: 'absolute with dimensions 50x50
Red square is second child with dimensions 100x100

Values	Expected	iOS/Android outcome
justifyContent: 'center'		Note how red-square, a normally positoned child element of the blue-square is extending beyond it by gap/2
justifyContent: 'flex-end'		Child positioned completely outside parent
justifyContent: 'flex-start'		Default works :)

Same behavior of gap affecting children persists with multiple children (2 children red squares)

Values	Expected	iOS/Android outcome
justifyContent: 'center'		Both children are offset by gap/2
justifyContent: 'flex-start'

Reproduction with web react: https://playcode.io/1850576

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.73.7. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[Mookiies]

This issue is present on latest patch

[Mookiies]

I think this is no longer and issue on react-native 0.74.0

https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+BNjAAHDgEYADDoA0nRQA8amAE6kkcTGg4ByFExgBbVPcNUwSANbZzsKiSAMJQTFDmDlTOpB4IYEw4qACScKQu7AiOpKhp5nEAViQ26BChuTlwDkiVpPkIfEIiIuJSMnIKSoQI6lDEmDZ2WWBUxGHwsZ4R0ubkmJJwABYcACxT5jOh4ZFZ0qTq6pioPnEA7vNLHACsBgiLpDiLVQg3DTwIAPRNza3SsvKKZQIKjTOpzBbLBBrYGg8xbCIOSySM4XSG6W73R7PdFvT7fYAfCTSIQE8DQeD8IA

[NickGerleman]

@Mookiies is this something that no longer reproes in RN 0.74/Expo 51, or just doesn’t repro in latest Yoga playground?

RN is opted into some older code wrt absolute positioning, so it’s possible they have different behavior.

[Mookiies]

It looks to be solved on RN 0.74.

I tried it out here and doesn't seem to happen anymore: https://github.com/Mookiies/absolute-repro/tree/master