React Native (Android) doesn’t render overflow styles…
To start, this is how I solved this issue. It may not be the best way or the right way, but it solved my problem — and I’m happy with it 😎. After reading through some other comments I couldn’t really find anyone who had a good, simple-to-follow solution. If you or someone else did, please let me know and I’ll be happy to add links to any related articles at the bottom.
Ok. It’s important to note that I’m currently using React Native 0.55.2.
This is what I am creating.
Normally, this is pretty straightforward to accomplish when you are working on the web and there are multiple ways to do it. So I wrote up what I thought was a winner, loaded up my project on iOS and it worked! Done! Time to move on. But when I ran it on Android… it wasn’t working as expected.
Here’s the code:
And how it renders on the devices:
That won’t work 🙁. So I had to try another approach. I would create a parent element with two children, each positioned absolutely and ordered with zIndex.
Here’s the code:
I added backgroundColor to the elements so you can see what is going on.
And how it renders on the devices:
I kept the code in the example pretty simple and straightforward so you can take it and do what you want. It’s important to note that for Android you have to use the elevation style prop to do the drop shadows.
Here is how we are utilizing the code in the CompanyCam app.
About CompanyCam
We built CompanyCam to take the guess work out of your daily work. In realtime, see what, where, and when projects are going on. Think of it like an organized news feed for your business and only your business.
