Gap moves children views outside containing view

Mookiies commented 5 months ago

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 https://github.com/facebook/yoga/issues/1652

Steps to reproduce

Setup a view with gap and a non-default justifyContent
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[bot] commented 5 months ago

:warning:	Newer Version of React Native is Available!
:information_source:	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.

:warning:

Newer Version of React Native is Available!

:information_source:

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 commented 5 months ago

This issue is present on latest patch

Mookiies commented 5 months ago

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

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

NickGerleman commented 5 months ago

@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 commented 5 months ago

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

facebook / yoga