React Native Android zIndex, elevation issue with 'absolute' position

#reactnative #android #expo

The issue

I'm pretty new to React Native and different rules of styling has been haunting me for a while. Recently, I tried to make my own Side Drawer Modal simply because react native modal doesn't work on web and I needed to make my app universal (Yes, I'm lazy). Everything seemed to work fine on the web but on Android, my Modal did appear however wasn't organized according to the zIndex I've set up which was supposed to be at the highest level.

What I tried

Since then, I searched the web and found out that for Android, I actually needed to use elevation property as well which should be higher than the zIndex. It now brought my modal upfront as in display so I thought it worked! Well, not so fast. It seemed to be in front but the components behind it was being interacted and the actual content of modal was acting like a ghost. From this point, I was going frantic. I simply did not know what else I could control.

The Solution

As many of you might already know and guessed, yes, it was arranging of the components. It seemed like that for Android platform, regardless of the zIndex, elevation, component that comes after a component has higher zIndex. I don't understand just why but that's how it was. All I had to do was moving the Modal component right at the bottom after the main View component (in my case ScrollView).

With experience and right knowledge, I should have tried this earlier, but for someone who might run into similar problem, I hope this helps.