Skip to content

zIndex is not working #1842

Open
Open
@agustin-flirc

Description

@agustin-flirc

Description

The components are not rendered considering the zIndex.

To exemplify I have 3 Views, with different zIndex:

  • Red, zIndex = 2.
  • Blue, zIndex = 1.
  • Green, zIndex = 0.

Result:
Screenshot 2023-06-05 at 16 09 36

In iOS, I have the expected result:
Screenshot 2023-06-05 at 16 10 10

Version

0.71.8

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 118.56 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.6.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.4.0 - /opt/homebrew/bin/npm
    Watchman: 2023.03.20.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.16 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.8 => 0.71.8
    react-native-macos: ^0.71.0-0 => 0.71.10
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Start a new project and add 2 elements (I used View) overlapping with different zIndex.

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

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

const App = () => (
  <>
    <View
      style={[
        styles.square,
        {
          top: 0,
          left: 0,
          backgroundColor: 'red',
          zIndex: 2,
        },
      ]}
    />
    <View
      style={[
        styles.square,
        {
          top: -20,
          left: 20,
          backgroundColor: 'blue',
          zIndex: 1,
        },
      ]}
    />
    <View
      style={[
        styles.square,
        {
          top: -40,
          left: 40,
          backgroundColor: 'green',
          zIndex: 0,
        },
      ]}
    />
  </>
  );

const styles = StyleSheet.create({
  square: {
    height: 40,
    width: 40,
  },
});

export default App;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions