Open
Description
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.
In iOS, I have the expected result:
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
Labels
No labels