Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zIndex not working on new architecture enabled #38513

Closed
grgmo opened this issue Jul 19, 2023 · 13 comments
Closed

zIndex not working on new architecture enabled #38513

grgmo opened this issue Jul 19, 2023 · 13 comments
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Resolution: Fixed A PR that fixes this issue has been merged. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@grgmo
Copy link
Contributor

grgmo commented Jul 19, 2023

Description

zIndex does not seem to work on ios or android with new architecture enabled.

It works as expected for old architecture.

I just have 2 Views with Text inside it. View on top has zIndex: 1 and bottom one does not have zIndex set.

This bug cannot be reproduced using react-native in browser snack.

The bug was previously raised here #34617 but seems to have been closed.

Expected
Simulator Screenshot - iPhone 14 Pro - 2023-07-19 at 11 04 12

Actual
Simulator Screenshot - iPhone 14 Pro - 2023-07-19 at 10 56 03

React Native Version

0.72.3

Output of npx react-native info

System:
OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 96.30 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.14.2
path: ~/.nvm/versions/node/v16.14.2/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v16.14.2/bin/yarn
npm:
version: 8.5.0
path: ~/.nvm/versions/node/v16.14.2/bin/npm
Watchman:
version: 2023.02.06.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /Users/gurung/.asdf/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK:
API Levels:
- "30"
- "31"
- "32"
- "33"
Build Tools:
- 30.0.3
- 31.0.0
- 32.0.0
- 33.0.0
System Images:
- android-30 | Google APIs ARM 64 v8a
- android-31 | Google APIs ARM 64 v8a
- android-31 | Google Play ARM 64 v8a
- android-32 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8309675
Xcode:
version: 14.3/14E222b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.17
path: /usr/bin/javac
Ruby:
version: 3.0.3
path: /Users/gurung/.asdf/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

Steps to reproduce

create a new project

npx react-native@latest init AwesomeProject

Follow steps to enable new architecture https://reactnative.dev/docs/next/new-architecture-app-intro

in App.tsx anywhere

      <View
        style={{
          height: 20,
          backgroundColor: 'red',
          marginBottom: -10,
          zIndex: 1,
        }}>
        <Text>I SHOULD BE ON TOP</Text>
      </View>
      <View
        style={{
          height: 20,
          backgroundColor: 'pink',
        }}>
        <Text>I SHOULD BE BEHIND</Text>
      </View>

Expected
I SHOULD BE ON TOP text should be displayed on top of I SHOULD BE BEHIND

Actual
I SHOULD BE BEHIND is displayed on top of I SHOULD BE ON TOP

Snack, code example, screenshot, or link to a repository

https://github.com/grgmo/react-native-zindex-repro

@grgmo grgmo added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Jul 19, 2023
@github-actions github-actions bot added the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Jul 19, 2023
@cortinico cortinico added Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. and removed Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Jul 19, 2023
@grgmo
Copy link
Contributor Author

grgmo commented Jul 19, 2023

⚠️ Missing Reproducible Example
ℹ️ We could not detect a reproducible example in your issue report. Please provide either:

This bug is not reproducible on Snack. Steps to reproduce and code snippet is mentioned above

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Jul 19, 2023
@cortinico
Copy link
Contributor

This bug is not reproducible on Snack. Steps to reproduce and code snippet is mentioned above

Then please provide a reproducer project using the template as suggested

@cortinico cortinico added Needs: Author Feedback and removed Needs: Attention Issues where the author has responded to feedback. labels Jul 19, 2023
@github-actions github-actions bot removed the Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. label Jul 19, 2023
@grgmo
Copy link
Contributor Author

grgmo commented Jul 19, 2023

This bug is not reproducible on Snack. Steps to reproduce and code snippet is mentioned above

Then please provide a reproducer project using the template as suggested

my bad, attached link to the repo

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Jul 19, 2023
@cortinico cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Attention Issues where the author has responded to feedback. labels Jul 20, 2023
@meghvarse
Copy link

Facing same issue, zIndex not working after enable new architecture.

@meghvarse
Copy link

@cortinico , Can you please provide any update on this issue?

@szmarczak
Copy link

Same here.

@szmarczak
Copy link

Then please provide a reproducer project using the template as suggested

The guy literally has provided code you can copy-paste and you didn't even bother to take half a minute to bootstrap the project yourself. Let's not be crazy, those requirements are counter-productive. Snack is not an environment to test bugs, and bootstrapping a rn project on your own shouldn't be that hard.

@szmarczak
Copy link

szmarczak commented Oct 6, 2023

Looks like this issue is a duplicate of #33866 edit: #33866 was for a rc version so it got closed, this is the main issue now

@javache
Copy link
Member

javache commented Oct 27, 2023

This has been resolved in 850349b, which will go out with v0.73.

@javache javache closed this as completed Oct 27, 2023
@cortinico cortinico added the Resolution: Fixed A PR that fixes this issue has been merged. label Oct 27, 2023
@vincentmegia
Copy link

vincentmegia commented Nov 14, 2023

What about android?

@joemun
Copy link

joemun commented Nov 28, 2023

What about android?

Should we reopen this issue? or create a new issue for z-index not working in Android? @cortinico

@cortinico
Copy link
Contributor

As @javache mentioned, this fix is shipped in 0.73. Asking about Android makes no sense here. Let's wait for the 0.73 stable and open a new issue if the problem persists on 0.73.0

@joevilches
Copy link
Contributor

A potential workaround for folks that have this problem would be to add position: relative to the style of the View with the zIndex applied. Technically this will have some other potential changes since this will make it so that we are now forming a stacking context so a child could change its stacking order a bit, but I assume that is fairly rare.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Resolution: Fixed A PR that fixes this issue has been merged. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
Development

No branches or pull requests

8 participants