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 · 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

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

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