[0.82.0] Different behavior of views with position: "absolute" between old and new architecture

Description

In the old React Native architecture, a view with position: "absolute" will overlap a child of its sibling even if that child had a higher zIndex. This meant that box1 (blue) appears below box2 (red):

In the new architecture, the stacking behavior is different — box2, being absolutely positioned outside the sibling hierarchy, will overlap box1:

Steps to reproduce

Build and run rn-tester.
Open RNTesterPlayground.js with reproducer.

React Native Version

0.82.0

Affected Platforms

Runtime - Android, Runtime - iOS

Areas

Fabric - The New Renderer

Output of `npx @react-native-community/cli info`

info Fetching system and libraries information...
System:
  OS: macOS 15.4.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 164.56 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.17.1
    path: /Users/wojciechloboda/.nvm/versions/node/v22.17.1/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /Users/wojciechloboda/.nvm/versions/node/v22.17.1/bin/npm
  Watchman:
    version: 2025.04.28.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "28"
      - "31"
      - "33"
      - "35"
      - "36"
    Build Tools:
      - 28.0.3
      - 30.0.2
      - 30.0.3
      - 34.0.0
      - 35.0.0
      - 35.0.1
      - 36.0.0
      - 36.0.0
    System Images:
      - android-33 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.0
    wanted: 0.82.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

MANDATORY Reproducer

#54169

Screenshots and Videos

Old arch:

New arch:

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Reproducers are mandatory and we can accept only one of those as a valid reproducer:

For majority of bugs: send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.
If your bug is UI related: a Snack
If your bug is build/upgrade related: a project using our Reproducer Template

You can read more about about it on our website: How to report a bug.

version: 0.82.0

pr with reproducer: #54169

i think old arch&new arch image order is wrong in screenshots section

i think old arch&new arch image order is wrong in screenshots section

yup, thanks, its corrected now

It also happens on RN 0.81.5 (iOS/Android + New Architecture).

The old architecture behavior aligns with the web.

It might be related to view flattening.
When I set collapsable={false} on the styles.parentView View, it behaves the same as the old architecture.

<View style={styles.container}>
  <View style={styles.parentView} collapsable={false}>
    <View style={styles.box1} />
  </View>
  <View style={styles.box2} />
</View>

View flattening is great, but it seems to make layout behaviors harder to predict. 🤔

This issue is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label.

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Navigation Menu

Repository navigation

[0.82.0] Different behavior of views with position: "absolute" between old and new architecture #54174

Description

Steps to reproduce

React Native Version

Affected Platforms

Areas

Output of `npx @react-native-community/cli info`

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[0.82.0] Different behavior of views with position: "absolute" between old and new architecture #54174

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Areas

Output of npx @react-native-community/cli info

Stacktrace or Logs

MANDATORY Reproducer

Screenshots and Videos

Activity

react-native-bot commented on Oct 16, 2025

react-native-bot commented on Oct 16, 2025

react-native-bot commented on Oct 16, 2025

wojciechloboda commented on Oct 16, 2025

wojciechloboda commented on Oct 17, 2025

burakgormek commented on Oct 17, 2025

wojciechloboda commented on Oct 17, 2025

floydkim commented on Oct 31, 2025

floydkim commented on Oct 31, 2025

floydkim commented on Oct 31, 2025

react-native-bot commented on Apr 30, 2026

react-native-bot commented on Oct 28, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx @react-native-community/cli info`