overlapping components with zIndex does not seem to work.

[aprilmintacpineda]

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 8.9.4
  Yarn: Not Found
  npm: 5.7.1
  Watchman: Not Found
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.52.0 => 0.52.0

Expected Behavior

Adding higher zIndex to a target component should over other components even if they are outside the parent container of the target component.

Actual Behavior

zIndex does not work.

Steps to Reproduce

https://snack.expo.io/@aprilmintacpineda/zindex-issue

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[aprilmintacpineda]

I think expo uses the latest version of react-native so this bot is a bit odd not knowing that I added a link to reproduce it on expo.

[larskarbo]

@aprilmintacpineda expo sdk v25 uses react-native 0.52.0, and you also use that in your environment.

Try to upgrade react-native (https://facebook.github.io/react-native/docs/upgrading.html) and see if the issue persists

[aprilmintacpineda]

@larskarbo

I followed the link you gave me and used react-native-git-upgrade since I was concerned that other options might rewrite files I configured for the external libraries that I use.

Now, info command gives me:

Environment:  OS: macOS Sierra 10.12.6
  Node: 8.9.4
  Yarn: Not Found
  npm: 5.7.1
  Watchman: Not Found
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: ^0.54.2 => 0.54.2

I had to reinstall my node_modules.
I reinstalled the app on my iOS simulator.

the issue still persists.

[aprilmintacpineda]

The issue does not seem occur on android. (Tested via the expo snack above.)

[hramos]

On iOS, zIndex only works when Views are siblings of each other. Unfortunately what you're trying to achieve here is not supported. Ideally, it would work the same across iOS and Android, but we're not there yet.

[aprilmintacpineda]

@hramos so this is currently a limitation? is it a limitation of iOS itself or react-native?

[hramos]

Neither. What you describe under Expected Behavior is not how zIndex works. It only affects the order of siblings.

[hramos]

#698 has additional discussion about this towards the end of the thread.

[nguyenvanphuc2203]

i am use absolute and margin property to resovle this issue:
example:

<View style={{ flex: 1}}>
      <View style={{position:'absolute',top:0,zIndex:10}}></View>
     <View style={{marginTop:25}}></View>
</View>