zIndex inconsistent behaviour on Android and IOS

[shubendrak]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Steps to Reproduce

Create a project with react-native init projectName

1. Create a Absolute positioned View inside a Relative positioned parent
2. Provide zIndex to Absolute positioned View.
3. Create Multiple View of type as mentioned in step 1 in flexDirection: column
4. The Absolute positioned View will be clipped by the Next Relative positioned View in IOS.

Expected Behavior

On Android the Text component should appear above the below View Component which is correct as per my understanding.
On IOS the Text component should appear above the below View Component. As it happened in Android.

Actual Behavior

On android the Text component appear above the below View Component which is correct as per my understanding.
On IOS the Text component is not shown above the below View Component. The Text component is getting clipped.

Reproducible Demo

https://snack.expo.io/ryqJU3ZJM
https://stackoverflow.com/questions/47200609/react-native-zindex-inconsistent-behaviour-on-android-and-ios

[janicduplessis]

This works on Android because of an optimisation that causes view that are used only for layout (don't contribute to any visual) to be removed. In this case your inputContainer Views get optimized away and make it that all Text and TextInputs are in the same view which makes it work properly. If you disable this optimisation (add a backgroundColor or collapsable=false) you will see that it doesn't work at all on Android because overflow is always hidden (no support for overflow visible currently).

See https://snack.expo.io/H1j2nEUkz

Not sure if there is an easier way to accomplish the effect that you want but I think you will have to make sure all inputs and text components are in the same View, or avoid using absolute positioning but that would make your layout move a bit when showing error messages.

[shubendrak]

@janicduplessis Thanks for your input. I understand the behavior now. In Web using HTML, CSS I can accomplish this effect using same markup. Shouldn't there be a support for same in react native.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[janicduplessis]

@shubendrak We can't always be 100% compatible with the web because of some platform limitations, but try to be as close as possible.