React-native: zIndex, is it possible

[JohnyDays]

I was using the following to simulate zIndex:

transform: [{'translate':[0,0,1]}] 

as a style property
It worked for a while, but now an error has appeared saying it is invalid(even though it worked for the last day)
Is there another way to do zIndex, I have a position:'absolute' element inside another position:'absolute' element, and the inner element is appearing behind the parent element, the above style corrected this, but it no longer works.

[brentvatne]

The order that you place the elements in determines its layout order, so if you put something at the end it will appear on top if you use position: absolute. Alternatively you can use my library react-native-overlay to bring anything to the front.

[JohnyDays]

Maybe I didn't explain myself correctly, I have a sequence of items placed using position:'absolute' and then inside each one of them I have another position:'absolute' item (these items are children of the parent absolutely positioned items), which is supposed to appear on the corner of each of these items, but instead appears behind them.

[amitverma]

You should post some code. I have the same setup and things are working fine for me.

[JohnyDays]

If i remove the transform: [{'translate':[0,0,1]}] style, those icons appear behind the posts e.g they don't appear.
Both the posts and the icons are absolutely positioned, and the icons are children of the posts.

[brentvatne]

@JohnyDays - are the icons the last child of the posts?

[JohnyDays]

They are the first child, but the following elements are not absolutely positioned.
Is that the problem? This is a slight deviation from the way the web works I believe, but I might be wrong on that would have to test. Will try changing that and close the issue if it worked.

[brentvatne]

@JohnyDays - yup, make them the last child, that will fix it

[JohnyDays]

It did fix it, thanks for the help.

I don't know how relevant it is for the project to maintain similar behaviour to regular css/html, but here's a js fiddle demonstrating this differs from what would happen on the web, where an absolutely positioned child is always on top of it's siblings.

https://jsfiddle.net/m39z3bjb/1/

[brentvatne]

cc @vjeux re: consistent behaviour with web

[vjeux]

On React Native we have position: relative by default. This has the behavior that those children are on the same z-index space as absolute children and your assumption doesn't hold true anymore: https://jsfiddle.net/m39z3bjb/2/

Thanks a lot for the jsfiddle, we really want to be compatible with the web!

[ghost]

Not sure how relevant it is, but I did make a little module to help with this type of thing. It allows you to define a key to order it's children by

 <Order by='z'>  
  <View z={2} style={{backgroundColor: 'red', position: 'absolute', left: 5, height: 100, width: 50}}>
    <Text>1</Text>
  </View>
  <View z={1} style={{backgroundColor: 'blue', position: 'absolute', left: 5, height: 50, width: 100}}>
    <Text>2</Text>
  </View>
</Order>

So that when you do something like this, 2 would be on bottom. Although I would imagine this breaks down when not having an index for every item, could be updated easily to be more powerful I am sure.

https://www.npmjs.com/package/react-native-order-children

[ktoh]

+1 to re-open this issue.

There are situations where one cannot rely on rendering order to enforce Z-index: the two are orthogonal principles, which is why CSS implements z-index. For example, a card or a button console may need to be rendered above some descriptive text (in flex-order), but still sit in front of it (e.g. to capture touch first, to provide layout overlap, etc).

Also see https://productpains.com/post/react-native/zindex-support/

[ide]

The approach I would take is to reorder the native views so that from the perspective of React and css-layout there has been no reordering.

[MattFoley]

I should chime in that there seems to be a very old iOS bug that causes the view drawing hierarchy to break when modifying the m34 value of the CATransform3D of a given UIView's backing layer. I'm guessing that this is how RCTViewManager is achieving mimicking CSS's perspective value? This has been an issue since iOS 5 as far as I know.

My workaround has always been to modify the layer.zPosition of affected views to manually override the broken UIView hierarchy. I don't know of any other work around myself.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/zindex-is-it-possible

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[SudoPlz]

Product pain duplicate of https://productpains.com/post/react-native/zindex-support

[scazzy]

For everyone else, zIndex is supported by react native. Please refer to this documentation - http://facebook.github.io/react-native/releases/0.39/docs/layout-props.html#zindex

[SudoPlz]

Amazing job!

[Noitidart]

zIndex has some issues on Android - https://github.com/facebook/react-native/issues/8968#issuecomment-314322836

It is working fine in iOS and UWP (windows)

[notgiorgi]

For me re-ordering JSX is the only solution right now, if components I want to position are not siblings

Sometimes, Even though I want component A to be before B in markup I still put it like this:

<Container>
  <B />
  <A />
</Container>

and I give container row-reverse/column-reverse that allows me to show some deep child of A on top of the B even though zIndex doesn't work and also maintain the order.

[cyclone747]

we all know "re-ordering JSX is the solution right now" but when we can't re-order elements----

what should we do ????

[RohanGada]

if you have any elevation style prop put in the style, remove it. Solved my zIndex problem.