How to use zIndex in react-native

Question

I ve want to achieve the following     The following images are what I can do right now  but that s NOT what I want    Sample of code I have right now   renderA         return            lt View style   position   absolute   zIndex  0   gt        parent of A              lt View style   zIndex  2   gt      element A              lt  View gt               lt View style   zIndex  2   gt      element A              lt  View gt           lt  View gt            renderB         return            lt View style   position   absolute   zIndex  1   gt        element B          lt  View gt             render         return            lt View gt               this renderA                 this renderB             lt  View gt             To put it in words  I want    Parent A  to be below everything  Element B  to be at the above parent A but below element A  Element A  above everything    Note that Parent A and Element B both have to be absolutely positioned  and both elements A and elements B have to be clickable

User · Accepted Answer

I finally solved this by creating a second object that imitates B.

My schema now looks like this:

I now have B1 (within parent of A) and B2 outside of it.

B1 and B2 are right next to one another, so to the naked eye it looks as if it's just 1 object.

User · Answer

UPDATE  Supposedly  zIndex has been added to the react-native library  I ve been trying to get it to work without success  Check here for details of the fix

User · Answer

I believe there are different ways to do this based on what you need exactly  but one way would be to just put both Elements A and B inside Parent A        lt View style    position   absolute     gt        parent of A          lt View style    zIndex  1      gt      element A          lt View style    zIndex  1      gt      element A          lt View style    zIndex  0  position   absolute       gt      element B      lt  View gt

User · Answer

Use elevation instead of zIndex for android devices  elevatedElement      zIndex  3     works on ios   elevation  3     works on android     This worked fine for me

User · Answer

You cannot achieve the desired solution with CSS z-index either  as z-index is only relative to the parent element  So if you have parents A and B with respective children a and b  b s z-index is only relative to other children of B and a s z-index is only relative to other children of A   The z-index of A and B are relative to each other if they share the same parent element  but all of the children of one will share the same relative z-index at this level

[javascript] How to use zIndex in react-native

Examples related to javascript

Examples related to react-native

Examples related to flexbox